Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
  1. Design & Illustration
  2. Game Design

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

by
Read Time:12 minsLanguages:

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

Final product imageFinal product imageFinal 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 FileStart by creating a New FileStart 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 fillshape the head from rectangle with linear fillshape 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 fillmake an eye from circle with radial fillmake 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 ellipsemake a nose from ellipsemake 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 toolshape the mouth with pen toolshape 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 circlesshape the ears from circlesshape the ears from circles

Шаг 7

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

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

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

place one object inside the otherplace one object inside the otherplace one object inside the other

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

Шаг 1

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

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

recolor the bear iconrecolor the bear iconrecolor the bear icon

Шаг 2

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

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

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

add a spot around the eyeadd a spot around the eyeadd a spot around the eye

Шаг 3

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

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

Flip the spot Horizontal Flip the spot Horizontal Flip the spot Horizontal

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

Шаг 1

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

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

change the color of the head shapechange the color of the head shapechange 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 pointedmodify the ears making them pointedmodify the ears making them pointed

Шаг 3

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

Duplicate the ear and Flip HorizontalDuplicate the ear and Flip HorizontalDuplicate the ear and Flip Horizontal

Шаг 4

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

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

recolor the elements and finish the iconrecolor the elements and finish the iconrecolor the elements and finish the icon

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

Шаг 1

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

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

recolor the head to greenrecolor the head to greenrecolor the head to green

Шаг 2

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

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

turn the bears nose into a beakturn the bears nose into a beakturn 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 modemake feathers in multiply blend modemake feathers in multiply blend mode

Шаг 4

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

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

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

add elliptical feathers to the foreheadadd elliptical feathers to the foreheadadd elliptical feathers to the forehead

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

Our parrot icon is readyOur parrot icon is readyOur parrot icon is ready

Шаг 5

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

set of square flat animal icons is finishedset of square flat animal icons is finishedset 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 colorunlock our background shape and change its colorunlock our background shape and change its color

Шаг 2

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

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

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

make a game panel from rounded rectanglesmake a game panel from rounded rectanglesmake a game panel from rounded rectangles

Шаг 3

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

add circles in the bottom of the screenadd circles in the bottom of the screenadd circles in the bottom of the screen

Шаг 4

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

continue using the Ellipse Tool to make circlescontinue using the Ellipse Tool to make circlescontinue using the Ellipse Tool to make circles

Шаг 5

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

depict stylized clouds from circlesdepict stylized clouds from circlesdepict stylized clouds from circles

Шаг 6

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

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

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

start arranging the iconsstart arranging the iconsstart arranging the icons

Шаг 7

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

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

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

add icons and shuffle themadd icons and shuffle themadd icons and shuffle them

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

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

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

Match Three Games Screen with Flat Animals in Affinity Designer is readyMatch Three Games Screen with Flat Animals in Affinity Designer is readyMatch Three Games Screen with Flat Animals in Affinity Designer is ready
One subscription.
Unlimited Downloads.
Get unlimited downloads