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

Урок № 2

Создание элементов
фона для игры

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

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


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

2
Создание элементов фона для игры

Для начала создадим новый проект и зададим пара-


метры изображения: размер – 640 × 400, единицы изме-
рения – пиксели (px) (рис. 1).

Рисунок 1

Давайте создадим наш фон в стиле Pixel Art. Что-


бы было удобнее работать, включим отображение сетки
1 × 1 px (рис. 2).

Рисунок 2

3
Урок № 2

На рабочей области мы видим первый слой изобра-


жения – Background. Если он мешает рисовать, можно
временно отключить его отображение. Для этого на па-
литре Layers кликаем по иконке глаза (см. рис. 3). Это
действие можно применить к любому слою.

Рисунок 3

Каждый новый элемент фонового изображения сле-


дует создавать на новом слое.
Чтобы добавить новый слой, нажимаем на иконку
Create a new Layer на панели справа (рис. 4).

Рисунок 4

4
Создание элементов фона для игры

Появится окно с параметрами, где можно изменить


цвет слоя, его прозрачность, название и т. д. Назовем
новый слой Ground, поскольку на нем будем рисовать
землю (рис. 5).

Рисунок 5

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

5
Урок № 2

Для начала нарисуем границу травы (черная линия),


а также создадим ее форму (рис. 6).

Рисунок 6

Затем прорисуем форму камней, чтобы создать по-


добие структуры земли (рис. 7).

Рисунок 7

6
Создание элементов фона для игры

Закрасим траву с помощью инструмента Bucket fill


(Заливка) (рис. 8).

Рисунок 8

Перейдем к закрашиванию камней. Следует исполь-


зовать несколько оттенков, чтобы максимально детали-
зировать элементы (рис. 9).

Рисунок 9

7
Урок № 2

Наконец, сотрем контур или зададим ему другой


цвет. Земля готова! (рис. 10).

Рисунок 10

Остался один нюанс: нашу платформу необходимо


поместить по всей длине холста. Для этого не обязатель-
но дорисовывать элемент, достаточно выделить элемент
(или его часть) с помощью инструмента Fuzzy Select
(   ) или Select by color (   ). Его границы будут обве-
дены пунктирной линией (рис. 11).

Рисунок 11

8
Создание элементов фона для игры

Затем скопировать элемент, нажав Ctrl + C, и вста-


вить с помощью Ctrl + V. Скопированный элемент ав-
томатически вставляется на том же месте, что и ориги-
нальный. Чтобы переместить его, выбираем инструмент
Move (   ), кликаем по скопированному элементу и пе-
ретягиваем его в сторону (рис. 12).

Рисунок 12

Чтобы заполнить всю длину холста, повторим дей-


ствия несколько раз.
Сейчас наш фон выглядит так, как на рисунке 13.

Рисунок 13

9
Урок № 2

Добавим к фону горы. Для этого создадим новый


слой, который назовем Mountain (гора) (рис. 14).

Рисунок 14

Нарисуем горы простой формы, но с помощью раз-


личных оттенков изобразим воздушную перспективу
(расстояние). Соответственно, горы на переднем плане
сделаем темнее, а все следующие  –  на оттенок светлее
предыдущих (рис. 15).

Рисунок 15

10
Создание элементов фона для игры

Добавим деревья на задний план. Для этого создаем


новый слой и рисуем дерево, начиная со ствола. Затем
прорисовываем крону дерева (рис. 16-17).

Рисунок 16-17

Давайте продублируем слой с деревом. Для этого на


панели Layers кликаем правой кнопкой мыши по необ-
ходимому слою и выбираем Duplicate Layer (рис. 18).

Рисунок 18

11
Урок № 2

Как и в случае с платформой, на скопированном слое


дерево находится на том же месте, что и оригинальное.
Переместим дерево в сторону, используя инструмент
Move (рис. 19).

Рисунок 19

Чтобы изменить размер дерева, используем инстру-


мент Scale (   ) или хоткей Shift + S. Вместо дерева поя-
вится рамка с маркерами. Чтобы равномерно увеличить
или уменьшить объект, следует зажать Shift и потянуть
за угловой маркер (см. рис. 20 на стр. 13).
Таким образом, наши деревья теперь разные по раз-
меру, а само изображение выглядит более интересно
(см. рис. 21 на стр. 13).

12
Создание элементов фона для игры

Рисунок 20

Рисунок 21

13
Урок № 2

По такому же принципу добавляем и деревья вдоль


всей платформы (рис. 22).

Рисунок 22

Все деревья находятся на разных слоях, давайте ис-


правим это! Для начала делаем видимыми только слои с
деревьями (рис. 23-24).

Рисунок 23-24

14
Создание элементов фона для игры

Затем кликнем правой кнопкой мыши по одному из


слоев и выбираем Merge Visible Layers (Объединить ви-
димые слои) (рис. 25).
Теперь все деревья находятся на одном слое
(рис. 26).

Рисунок 26

Рисунок 25

15
Урок № 2

Во вкладке Layers можно изменить очередность


слоев и, соответственно, порядок их отображения на
рисунке. Например, слой с деревьями расположен в
списке выше, чем слой с платформой. Поэтому корни
дерева находятся поверх земли (рис. 27).

Рисунок 27

Если же во вкладке Layers слой Ground перетащить


выше слоя Trees, корни деревьев спрячутся за платфор-
мой (рис. 28).

Рисунок 28

16
Создание элементов фона для игры

Итак, мы создали замечательное фоновое изобра-


жение и теперь можем добавить на него нашего пер-
сонажа из 1-го урока (рис. 29)!

Рисунок 29

В свободное время можно добавить к созданному


фону больше элементов окружающей среды. Для вдох-
новения рассмотрим красочные примеры, приведенные
на рисунках 30-32.

Рисунок 30

17
Урок № 2

Рисунок 31

Рисунок 32

18
Урок № 2
Создание элементов фона для игры

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


www.itstep.org

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


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

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