Вы находитесь на странице: 1из 24

Урок № 8

Создание фона,
меню игры и кнопок

Н
а предыдущем занятии мы создали арену из
игры Clash Royal. Теперь перейдем к созда-
нию меню, как на рисунке 1 (см. стр. 3), и до-
бавим в него созданные ранее объекты!

МАТЕРИАЛЫ К УРОКУ ПРИКРЕПЛЕНЫ К ДАННОМУ PDF-ФАЙЛУ.


Для доступа к материалам урок необходимо открыть в программе
Adobe Acrobat Reader.

2
Создание фона, меню игры и кнопок

Рисунок 1

3
Урок № 8

Откроем новый проект. Поскольку мы будем созда-


вать изображение для мобильной игры, следует задать
книжную ориентацию и размер 1080 × 1920 (рис. 2-3).

Рисунок 2-3

В папке с референсами (архив которой прикреплен к


pdf-файлу урока) можно найти уже готовый пример фо-
нового изображения и импортировать его отдельным
слоем в проект.
4
Создание фона, меню игры и кнопок

Однако можно создать уникальное фоновое изобра-


жение, отрисовав его самостоятельно (рис. 4).

Рисунок 4

Затем в центре экрана разместим арену, созданную


на предыдущем занятии.
Если на изображении с ареной присутствует белый
фон, следует убрать его по уже знакомой схеме (клик-
нув левой кнопкой мыши по белой области с помощью
Fuzzy Select (   ), а затем перейдя Colors > Color to
Alpha).
5
Урок № 8

Таким образом получаем изображение без фона


(рис. 5).

Рисунок 5

6
Создание фона, меню игры и кнопок

Сохраняем картинку в формате .png, добавляем ее в


проект и размещаем по центру (рис. 6).

Рисунок 6

7
Урок № 8

Добавим кнопки к нашему меню.


Создадим кнопку Battle. Рисуем ее по аналогии с
другими 2D-элементами: создаем контур, заливаем эле-
мент цветом, задаем тень и блики (рис. 7).

Рисунок 7

Добавим на кнопку текст Battle, использовав ин-


струмент Text (   ) (рис. 8).

Рисунок 8

8
Создание фона, меню игры и кнопок

Размещаем кнопку под изображением арены


(рис. 9).

Рисунок 9

Создадим слой, на котором прорисуем другие икон-


ки. Начнем с верхней панели, на которой размещен уро-
вень игрока, количество монет и кристаллов.

9
Урок № 8

Для начала нарисуем квадрат с помощью инстру-


мента Rectangle Select (   ). Чтобы сгладить углы, пе-
рейдем во вкладку Tool Options и поставим отметку в
чекбоксе Rounded Corners (рис. 10).

Рисунок 10

Рисуем квадрат (рис. 11), задаем ему тень и добавля-


ем внутрь определенный элемент, для уровня – звездоч-
ку, а для монет и кристаллов – плюсик (рис. 12).

Рисунок 11 Рисунок 12

10
Создание фона, меню игры и кнопок

Равномерно размещаем иконки по верхнему краю


изображения (рис. 13).

Рисунок 13

Создаем слой и задаем ему Opacity=80. Возле ико-


нок рисуем небольшие прямоугольники с помощью
Rectangle Select (   ) и заливаем их черным цветом
(рис. 14).

Рисунок 14

Добавляем к иконкам с плюсиками изображения


монетки и кристалла, как показано на рисунке 15. Ка-
ждую грань кристалла следует залить другим оттенком
зеленого.

Рисунок 15

11
Урок № 8

Создаем еще один слой, задав Opacity значение 50.


Рисуем полупрозрачные панельки для остальных эле-
ментов (рис. 16).

Рисунок 16

12
Создание фона, меню игры и кнопок

Меняем цвет заливки на белый и добавляем еще не-


сколько окон под кнопкой Battle (рис. 17).

Рисунок 17

Нарисуем нижний блок меню. Для него создаем от-


дельный слой, на котором размещаем прямоугольник
серого цвета. Делим прямоугольник на пять секций.
Ячейку посредине следует сделать шире, чем остальные.
13
Урок № 8

Рисуем в ней два скрещенных меча и вставляем надпись


Battle (рис. 18).

Рисунок 18

С помощью инструмента Path создадим маленькие


иконки в других ячейках. Создаем контуры, закраши-
ваем фигуры, а затем добавляем тени и блики (рис. 19).

Рисунок 19

Можно продолжать отрисовку иконок для кнопок


и панелей самостоятельно или найти иконки на сайте
https://www.flaticon.com, а затем перерисовывать их в
одном стиле (рис. 20).

Рисунок 20

14
Создание фона, меню игры и кнопок

Поиск по сайту осуществляется на английском язы-


ке, поэтому для нахождения наиболее подходящих изо-
бражений можно воспользоваться Google Translate.
Переходим к большим блокам под центральной
кнопкой Battle. В них необходимо нарисовать сундуки
(рис. 21).

Рисунок 21

Первый сундук готов! Чтобы не создавать осталь-


ные сундуки с нуля, можно воспользоваться несколь-
кими способами: продублировать слой и сдвинуть объ-
ект в сторону или же использовать инструмент Clone
(Штамп –   ).

15
Урок № 8

Давайте рассмотрим второй способ. Чтобы клони-


ровать объект увеличим размер штампа на панели Tool
Options, наведем курсор на необходимый элемент, за-
жмем Ctrl и кликнем левой кнопкой мыши. Затем пе-
редвинем курсор на место, куда следует вставить кло-
нированный объект, и снова кликнем левой кнопкой
мыши. Наш объект клонирован (рис. 22)!

Рисунок 22

Давайте изменим цвет последнего бонусного сунду-


ка – сделаем его фиолетовым (рис. 23).

Рисунок 23

16
Создание фона, меню игры и кнопок

Теперь дорисуем маленькие кнопки справа и слева


от арены. Для рейтинга игроков нарисуем кубок, для
журнала боев – лист со списком, для онлайн-боев – ми-
шень, для новостей игры – награду (рис. 24-25).

Рисунок 24-25

17
Урок № 8

Включим отображение всех слоев и просмотрим ре-


зультат (рис. 26).

Рисунок 26

18
Создание фона, меню игры и кнопок

Нам осталось дорисовать элементы верхнего блока


меню и придумать текстовое наполнение панелей.
Начнем с иконок. Добавим к панели значки профи-
ля и настроек, как показано на изображении 27.

Рисунок 27

Также нарисуем сундук для панели ниже (рис. 28).

Рисунок 28

Клонируем объект на соседнюю панель с помо-


щью инструмента Clone. На панели возле кнопки
настроек разместим копию кубка и иконку игрока
(рис. 29).

Рисунок 29

19
Урок № 8

Теперь пропишем числовые значения для уровня,


счета монет и кристаллов, рейтинга игрока. Также сле-
дует добавить текстовое наполнение (рис. 30).

Рисунок 30

На заблокированные элементы интерфейса добавим


надпись Locked (рис. 31).

Рисунок 31

20
Создание фона, меню игры и кнопок

Наше меню готово (рис. 32)!

Рисунок 32

21
Урок № 8

В GIMP можно создавать страницы Главного


меню для любой 2D-игры (рис. 33-35)!

Рисунок 33

Рисунок 34

22
Создание фона, меню игры и кнопок

Рисунок 35

23
Урок № 8
Создание фона, меню игры
и кнопок

© Компьютерная Академия ШАГ


www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения,


фрагменты которых использованы в материале, принадлежат их законным владель-
цам. Фрагменты произведений используются в иллюстративных целях в объёме,
оправданном поставленной задачей, в рамках учебного процесса и в учебных целях,
в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське
право і суміжні права». Объём и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию объектов
авторского права и не ущемляет законные интересы автора и правообладателей.
Цитируемые фрагменты произведений на момент использования не могут быть
заменены альтернативными, не охраняемыми авторским правом аналогами, и
как таковые соответствуют критериям добросовестного использования и честного
использования.
Все права защищены. Полное или частичное копирование материалов запрещено.
Согласование использования произведений или их фрагментов производится
с авторами и правообладателями. Согласованное использование материалов
возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое исполь-
зование материалов определяется действующим законодательством Украины.

Вам также может понравиться