Урок № 9

Создание ассетов
и тайлов

Н
а предыдущих занятиях мы научились соз-
давать персонажей, фоновые изображения и
игровое меню в программе GIMP. Давайте
теперь создадим игровую карту на примере игры
Oxygen Not Included!

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

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

2
 Создание ассетов и тайлов

Oxygen Not Included – это очень популярная ком-

пьютерная 2D-игра  –  симулятор выживания, дей-
ствия которой происходят в космической колонии
(рис. 1).

Рисунок 1

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

нужно нарисовать все необходимые ассеты и тайлы.
Для начала разберемся, что же это такое.

Тайлы (англ. Tiles)  –  это небольшие изображения

(в виде плиток), из которых состоит игровое окруже-
ние 2D-игр.

Приступим к созданию тайлов, из которых мож-

но будет собрать основу игровой карты: платформы и
лестницы для передвижения игрока.

3
Урок № 9

Создаем новый проект, и задаем размер будущему

изображению, например, 128 × 128. Этот квадрат будет
нашим тайлом.
С помощью инструмента Path рисуем централь-
ную часть платформы. То есть сверху и внизу следует
создать контуры, а по бокам оставим заливку цветом.
Чтобы тайл можно было дублировать и соединять с
другими плитами, начало и конец линии размещаем на
одной высоте (рис. 2).

Рисунок 2

Сохраняем тайлы в формате .png.

По такому же принципу следует отрисовать и боко-
вые тайлы (рис. 3-4).

Рисунок 3-4

4
 Создание ассетов и тайлов

Также можно нарисовать еще одну центральную

плитку, добавив на нее небольшой декоративный эле-
мент (рис. 5).

Рисунок 5

Составим нарисованные тайлы (рис. 6).

Рисунок 6

С помощью тайлов очень удобно создавать окруже-

ние, изменяя размеры и формы элементов (рис. 7).

Рисунок 7

5
Урок № 9

Создаем новый проект и по такому же принципу

моделируем часть лестницы. Края следует нарисовать
на одинаковом расстоянии, чтобы этот элемент можно
было всячески составлять и дублировать, изменяя фор-
му и длину объекта (рис. 8-10).

Рисунок 8-10

6
 Создание ассетов и тайлов

По аналогии с лестницей рисуем часть трубы с по-

мощью инструмента Path. Также не следует создавать
контуры, чтобы можно было соединять тайлы между
собой (рис. 11-13).

Рисунок 11-13

Для создания игрового окружения этого пока будет

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

7
Урок № 9

Теперь рассмотрим, что такое ассеты и как их рисо-

вать.
Ассеты (англ. Assets)  –  это однотипные цифровые
объекты, из которых состоит игровой контент.
Обычно так называют сборники графики/звуков/
моделей/элементов интерфейса, которые использу-
ются в разработке любой игры.

Создадим ассеты, которые передают особенности

игрового мира Oxygen Not Included, к примеру: техни-
ка, центральные компьютеры, капсулы и т. д.
Начнем с довольно простого по форме элемен-
та – радиорубки. Создаем форму объекта, а затем про-
рисовываем его контур с помощью инструмента Path
(рис. 14).

Рисунок 14

8
 Создание ассетов и тайлов

Детализируем объект, добавив трубу, рычаги, кноп-

ки и т. д. (рис. 15).

Рисунок 15

9
Урок № 9

Детализируем и закрашиваем радиорубку (рис. 16).

Рисунок 16

Перейдем к созданию капсулы. По аналогии с

остальными игровыми элементами, создаем форму, за-
тем ее детализируем (см. рис. 17-18 на стр. 11).
Применяем заливку цветом, после чего на отдель-
ных слоях добавляем тени и блики (см. рис. 19-20 на
стр. 11).

10
 Создание ассетов и тайлов

Рисунок 17-18

Рисунок 19-20

11
Урок № 9

Создаем центральный компьютер, как на рисун-

ке 21.

Рисунок 21

Следующий объект  –  дистиллятор. Он состоит из

нескольких элементов сложной формы, которые соеди-
нены трубами. При отрисовке объект можно упростить
или видоизменить (рис. 22).

Рисунок 22

12
 Создание ассетов и тайлов

Добавляем детализацию: проводы, пластины, кноп-

ки, дополнительные трубы (рис. 23).

Рисунок 23

Заливаем цветом все элементы (рис. 24).

Рисунок 24

13
Урок № 9

Добавляем тени и блики (рис. 25).

Рисунок 25

Все нарисованные объекты необходимо сохранить

в формате .png. Также можно воспользоваться подан-
ными к занятию референсами (папку с реферансами вы
можете найти в прикрепленном к уроку архиве).

Пришло время собрать все созданные элементы

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

14
 Создание ассетов и тайлов

Рисунок 26

Переходим к добавлению в проект всех созданных

ранее элементов, размещаем их на карте (рис. 27).

Рисунок 27

15
Урок № 9

Добавляем больше платформ и лестницы, которые

будут их соединять (рис. 28).

Рисунок 28

Также вставляет трубы, разместив их за платформа-

ми. Можно развернуть направление труб, применив к
элементу инструмент Rotate (Вращение) (рис. 29).

Рисунок 29

16
 Создание ассетов и тайлов

Затем размещаем на сцене нарисованные ранее ассе-

ты (рис. 30). Можно изменить их размеры, цвет, а также
дублировать элементы.

Рисунок 30
В результате получаем крутую стилизованную игро-
вую сцену, отрисованную в одном стиле (рис. 31).

Рисунок 31

17
Урок № 9

На карту также можно добавить персонажей для

игры. Их можно нарисовать самостоятельно или же
взять из папки с предложенными референсами (рис. 32).

Рисунок 32

Мы создали только небольшую часть огромного

игрового мира Oxygen Not Included. В свободное вре-
мя вы можете создавать больше тайлов и ассетов, тем
самым наполняя карту все новыми и новыми объекта-
ми, как показано на изображениях 33-35.

Рисунок 33

18
 Создание ассетов и тайлов

Рисунок 34

Рисунок 35

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

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

www.itstep.org

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

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