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