Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Game Design
Design

Как создать игровой экран “3 в ряд” в Affinity Designer 

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

В этом уроке мы будем разрабатывать игровой экран для игры “3 в ряд”. Мы будем трансформировать основные геометрические фигуры, чтобы создать милые иконки животных и применить различные типы градиентных заливок, чтобы сделать объекты яркими и трехмерными.  Мы закончим созданием фона для настройки шаблона игрового экрана.

Игры “3 в ряд” очень популярны, особенно для мобильных устройств. Игра довольно проста, но захватывает: нужно поместить три одинаковых объекта подряд, чтобы набрать все больше и больше очков.  В этом уроке мы будем разрабатывать яркую игровую панель с многоцветными квадратными животными.  Более того, этот урок поможет вам вдохновиться и спроектировать любой другой тип игровых экранов “3 в ряд”, например игра с драгоценными камнями или плоскими фруктами. Не стесняйтесь просматривать Envato Market для новых идей дизайна плоского игрового экрана, и давайте начнем!

1. Создание квадратного медведя

Шаг 1

Начните с создания нового файла размером 600 x 800 пк. Если вам не нравится работать на белом фоне, используйте инструмент Rectangle Tool (M), чтобы создать фигуру, покрывающую холст, и заполнить ее желтым цветом. Заблокируйте ее на панели Layers, щелкнув по иконке миниатюры. Мы сохраним эту фигуру в нижней части, и сможем перекрасить ее позже.

Start by creating a New File

Шаг 2

Давайте начнем формировать голову нашего первого животного: милого медведя.  Возьмите Rounded Rectangle Tool (M) и сделайте сиреневую фигуру 200 x 200 пк. Помните, что вы можете настроить Corner Radius вашей фигуры на панели управления сверху. Давайте сохраним его на уровне 25%.

Возьмите инструмент Fill Tool (G), удерживайте Shift и поместите ползунок Fill вертикально поперек фигуры, применяя двухцветную заливку Linear gradient.

Мы можем настроить цвет заливки, щелкнув на концах слайдера и выбрав соответствующий цвет на панели Colour. Давайте выберем светло-лиловый цвет для верхней части и более темный цвет для нижней части фигуры, придавая тем самым объем.

shape the head from rectangle with linear fill

Шаг 3

Давайте начнем формировать глаз. Возьмите инструмент Ellipse Tool (M), удерживайте Shift и сделайте ровный круг размером 50 x 50 пк.  Переключитесь на инструмент Fill Tool (G) и измените Fill Type на Radial на панели управления сверху. Примените белый цвет к центру фигуры и серый по краю, делая глаз сферическим.

Теперь давайте сформируем радужную оболочку. Скопируйте и вставьте (Command-C > Command-V) глазное яблоко, удерживайте Command-Shift и уменьшите копию, до 35 x 35 пк с помощью Move Tool (V).  Заполните ее радиальной заливкой бирюзового цвета в центре и темно-бирюзовой по краю.

Дублируйте (Command-C > Command-V) радужную оболочку и уменьшите копию, образуя зрачок.  Заполните его темно-бирюзовым сплошным цветом.  Сделайте маленький белый блик на глазу, используя инструмент Ellipse Tool (M).

make an eye from circle with radial fill

Шаг 4

Теперь, когда глаз готов, сгруппируйте (Command-G) все его элементы, удерживайте Option-Shift и перетащите вправо, делая копию.  Сгруппируйте оба глаза, выберите их вместе с фигурой головы и используйте панель Align сверху, чтобы выровнять фигуры горизонтально по центру.

Продолжайте использовать инструмент Ellipse Tool (M), чтобы сделать приплюснутый нос размером 50 x 15 пк. Нанесите вертикальную линейную заливку от светло-розового цвета сверху до темно-розового внизу. Сделайте меньший темно-розовый эллипс сверху и переключите его Blend Mode на Screen на панели Layers, тем самым формируя полупрозрачный блик.

make a nose from ellipse

Шаг 5

Затем мы сформируем рот. Используйте Pen Tool (P) и удерживайте Shift, чтобы создать квадратную линию.  Установите цвет заливки на none на панели Colour и нанесите темно-лиловый цвет на Stroke. Направляйтесь на панель Stroke и установите ширину 2 pt, все остальные параметры оставьте по умолчанию.

Возьмите инструмент Corner Tool (C) и закруглите углы фигуры, потянув за угловые точки вверх.

Дублируйте фигуру и используйте функцию Flip Horizontal с панели управления инструментов сверху, чтобы отразить фигуру.

shape the mouth with pen tool

Шаг 6

Теперь мы добавим уши. Используйте Ellipse Tool (M), чтобы сделать круг 70 x 70 пк.  Давайте сделаем, чтобы они хорошо сочетались с головой, выбрав правильный цвет. Найдите инструмент Color Picker на панели Colour, удерживайте и перетащите его над головой медведя. Вы увидите лупу, которая поможет вам найти нужный цвет. Выберите светло-лиловый цвет рядом с ухом и отпустите кнопку мыши.  Теперь вы можете выбрать ухо и применить цвет образца рядом с Color Picker. Вот, что у нас поучилось! 

Теперь давайте посмотрим, как мы можем скопировать сложный стиль заливки других объектов. Дублируйте (Command-C > Command-V) ухо и уменьшите копию. Скопируйте (Command-C) голову, выберите верхний элемент уха и перейдите в Edit > Paste Style. Измените положение заливки с помощью Fill Tool (G).  Добавьте второе ухо на противоположной стороне головы.

Как вы видите, мы можем копировать не только сами объекты, но и их внешний вид.

shape the ears from circles

Шаг 7

Давайте закончим медведя, добавив еще один элемент: стилизованный животик. Используйте Ellipse Tool (M), чтобы сделать овал и заполните его темно-лиловым цветом, переключите the Blend Mode на Screen на панели Layers.

Мы можем разместить созданный эллипс внутри фигуры головы, таким образом скрывая ненужные части. Выберете созданный овал на панели Layers и растяните его по фигуре головы, пока не увидите узкую синюю полосу, как показано на изображении ниже. Отпустите эллипс, разместив его на слое головы. 

Мы закончили!  Перейдем к следующей иконке животного. 

place one object inside the other

2. Создание квадратной панды

Шаг 1

Давайте используем иконку медведя, которую мы уже создали, чтобы создать новый элемент.  Дублируйте ее и давайте изменим цвета линейной заливки на белый сверху и серый внизу. Затем перекрасим уши с лилового на темно-серый. Измените линейную заливку носа на темно-серый, а также отрегулируйте цвет изгиба рта, переключив его на розовый. 

Наконец, отрегулируйте цвет глаз, изменив радиальную заливку на светло-коричневый цвет в центре и темно-коричневый по краю, примените темно-коричневый цвет к зрачку. 

recolor the bear icon

Шаг 2

Далее мы добавим темные пятна вокруг глаз, чтобы наш персонаж больше походил на настоящую панду.  Используйте инструмент Ellipse Tool (L), чтобы сделать фигуру размером 75 x 95 пк, заполняя ее линейной заливкой темно-серого оттенка. 

Поверните фигуру на 45 градусов и поместите ее ниже глаза, перетащив фигуру на панель Layers

Отметьте разницу между размещением одной фигуры внутри другой и размещением одной фигуры ниже другой. а этот раз вы увидите более длинный синий маркер, как показано на рисунке ниже. 

add a spot around the eye

Шаг 3

Дублируйте (Command-C > Command-V) пятно и поверните его горизонтально с другой стороны, используя функцию Transforms на панели управления инструментов сверху.  Переместите копию пятна, чтобы оно соответствовало второму глазу. 

И вот у нас есть панда!   Давайте двигаться дальше. 

Flip the spot Horizontal

3. Создайте квадратного енота

Шаг 1

Давайте продублируем персонажа панду и превратим его в милого енота! Прежде всего, измените цвет фигуры головы вертикальной линейной заливкой от светло-голубого сверху до более темного синего цвета в нижней части. 

Продолжайте, меняя цвета глаз на розовато-красный, и давайте заменим рот.  Используйте Pen Tool (P) для создания угловой формы рта темно-серым штрихом

change the color of the head shape

Шаг 2

Теперь давайте модифицируем уши. Выберите больший круг фигуры уха и Convert to Curves, используя кнопку на панели управления инструментов сверху.  Возьмите инструмент Node Tool (A) и выберите верхнюю точку фигуры.  Convert в Sharp с панели управления сверху, делая ухо заостренным. Сделайте то же самое для внутренней части уха: Convert to Curves и Convert верхнюю точку в Sharp.

modify the ears making them pointed

Шаг 3

Измените цвет уха, чтобы он подходил к голове и поверните ухо на 45 градусов. Дублируйте ухо и поверните горизонтально, поместив копию на противоположную сторону. 

Duplicate the ear and Flip Horizontal

Шаг 4

Выберите пятно вокруг глаза с помощью Fill Tool (G) и отрегулируйте цвета заливки, изменив их на более светлые и темные оттенки синего.  Скопируйте (Command-C) пятно, выберите второе пятно и Edit > Paste Style, примените новый внешний вид. 

Завершите персонажа, добавив светло-серый эллипс в область под носом.  С енотом это все!  Перейдем к нашей последней иконке! 

recolor the elements and finish the icon

4. Создайте квадратного попугая

Шаг 1

Давайте дублируем нашу самую первую иконку - фиолетового медведя - и используйте его, чтобы сделать забавного попугая. Измените цвет головы линейной заливкой от светло-зеленого сверху до более темного зеленого в нижней части. Удалите эллиптическую фигуру животика и рот медведя, так как они нам больше не нужны. 

Измените цвет глаз на оранжево-коричневый. 

recolor the head to green

Шаг 2

Давайте превратим нос медведя в клюв попугая! Поверните его на 90 градусов и Convert to Curves. Выберите нижнюю точку с помощью Node Tool (A) и Convert to Sharp с панели управления инструментов сверху.

Измените цвета линейной заливки на желтый сверху и оранжевый снизу. 

turn the bears nose into a beak

Шаг 3

Возьмите инструмент Ellipse Tool (M) и сделайте узкую фигуру размером 15 x 40 пк. Залейте ее светло-зеленым цветом и измените Blend Mode на Multiply, сделав темное полупрозрачное перо. 

Удерживайте Option-Shift и перетащите перо вправо, сделав копию.  Нажмите Command-J пару раз, чтобы сделать еще две копии. 

make feathers in multiply blend mode

Шаг 4

Давайте добавим последнюю деталь нашему попугаю. Используйте Ellipse Tool (M), чтобы сделать фигуру размером 40 x 70 пк посередине лба, выбрав подходящий цвет из самого светлого пятна на лбу и применяя светло-зеленый цвет к фигуре. 

Добавьте два меньших эллипса с обеих сторон от средней фигуры. Выберите все три фигуры и используйте Add Operation с панели управления сверху, чтобы объединить все эллипсы в одну фигуру. 

Дублируйте (Command-C > Command-V) фигуру и переместите нижнюю копию немного вниз, нажав клавишу Стрелка вниз несколько раз. Измените цвет фигуры на темно-зеленый, создавая плоскую тень. 

add elliptical feathers to the forehead

И вот он готов!  Наша иконка попугая готова!

Our parrot icon is ready

Шаг 5

Вот наш набор симпатичных квадратных животных, которых мы будем использовать в качестве элементов игры “3 в ряд”.  Давайте передвинемся и создадим простой игровой экран, чтобы увидеть, как они будут работать вместе! 

set of square flat animal icons is finished

5. Создание игрового экрана “3 в ряд”

Шаг 1

Давайте разблокируем нашу фигуру фона и изменим ее цвет на нежный оранжевый.  Используйте Rounded Rectangle Tool (M), чтобы сделать желтую фигуру размером 415 x 600 пк с Corner Radius 10%.

unlock our background shape and change its color

Шаг 2

Дублируйте (Command-C> Command-V) фигуру и сделайте копию меньше, изменив цвет заливки на более темный желтый. 

Дублируйте новую фигуру и уменьшите размер копии снова, переключая цвет на тот же светло-желтый, что и у большего закругленного прямоугольника. 

Наконец, дублируйте самый большой закругленный прямоугольник и немного переместите нижнюю копию вниз, нажав клавишу Стрелка вниз несколько раз.  Сделайте копию несколько крупнее и измените Blend Mode на Multiply на панели Layers, образуя неуловимую тень.  В целом у нас есть четыре закругленных прямоугольника для игровой панели.

make a game panel from rounded rectangles

Шаг 3

Используйте Ellipse Tool (M) и удерживайте Shift, чтобы сделать большой зеленый круг в нижней части холста.  Поместите его между экраном игры и фигурой фона.  Добавьте больше кругов, закрывающих нижнюю часть холста. 

add circles in the bottom of the screen

Шаг 4

Выберите более светлый зеленый оттенок и продолжайте использовать Ellipse Tool (M), чтобы сделать меньшие и более светлые круги, изображая простые стилизованные кусты. 

continue using the Ellipse Tool to make circles

Шаг 5

Продолжайте использовать ту же технику и заполните верхнюю часть холста светло-оранжевыми кругами, изображающими стилизованные облака. 

depict stylized clouds from circles

Шаг 6

Теперь мы можем начать размещать иконки животных на игровой панели.  Здесь я использую простой трюк, чтобы все элементы были равны.  Как вы, наверное, заметили, наш попугай немного меньше остальных персонажей, потому что у него нет ушей.  Это может сделать выравнивание фигур немного сложнее, и именно поэтому я копирую уши с иконки панды и прикрепляю их попугаю.  Сделайте уши полностью прозрачными, установив цвета Fill и Stroke на none, а затем сгруппируйте элементы вместе. 

Теперь мы можем поместить иконки в ряд и уменьшить размер, чтобы они соответствовали игровому экрану. Сохраняя выбранные иконки, перейдите к панели управления инструментов сверху и откройте панель Arrange.  Из этого пункта щелкните Space Horizontally и снимите флажок с Auto Distribution, установив значение пробела равным 0 пк

Вы также можете выровнять фигуры в нижней части, используя ту же панель Arrange.

start arranging the icons

Шаг 7

Сгруппируйте (Command-G) ряд иконок, удерживайте Option-Shift и перетащите его, создав копию. Нажмите Command-J несколько раз, заполняя экран игры иконками. Выберите все ряды, перейдите на панель Arrange и нажмите Space Vertically. Снимите флажок с Auto Distribute и установите значение пробела в 2 пк, делая узкие промежутки между краями иконок. 

Вы можете отрегулировать макет, уменьшая или увеличивая иконки и регулируя расстояние между рядами, чтобы иконки подходили к игровой панели.  

Сразу после этого мы можем случайным образом перетасовывать значки, делая всю сцену похожей на настоящий игровой экран.  Дважды щелкните ряд иконок, чтобы изолировать группу и перемещать значки внутри группы по горизонтали, удерживая Shift

add icons and shuffle them

Поздравляю! Вы поднялись на уровень выше! 

Отличная работа! Наш игровой экран “3 в ряд” готов! Надеюсь, вам понравилось следовать этому уроку, и вы нашли полезные советы и приемы, работая с основными фигурами, градиентными заливками и различными трансформирующими операциями Affinity Designer.  Не стесняйтесь применять свои знания, создавать новые игровые и персональные проекты, и не забывайте делиться своими потрясающими результатами! 

Если вы заинтересованы в том, чтобы научиться создавать другие элементы дизайна игр в Affinity Designer, обязательно посмотрите следующие уроки: 

Match Three Games Screen with Flat Animals in Affinity Designer is ready
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.