Часть 2. Создание игрового прототипа

Введение

Обычно перед началом разработки следует определиться с основными требованиями, предъявляемыми к игре. Цель нашего практикума по разработке заключается в том, чтобы сделать игру и опубликовать ее на одном из онлайн-ресурсов (подробнее об этом см. Часть 7). Если говорить более обобщенно, то в списке требований, с которыми следует определиться при начале разработки, можно выделить следующие:

– платформа: WebGL (браузерная игра),

– ориентация: ландшафтная,

– длительность игровой сессии: 3–5 минут,

– система управления: легкое управление при помощи мыши и клавиатуры,

– однопользовательская игра.

В игре “Dragon Picker” центральным объектом в игре будет являться дракон, который периодически роняет драконье яйцо. Игровой процесс будет заключаться в том, чтобы ловить летящие вниз объекты. Позднее в игру могут быть добавлены различные виды объектов, одни из которых могут добавлять очки в игре или жизни, либо отнимать их. Для нас важно будет добавить один вид объектов, а разные виды других объектов вы сможете добавить самостоятельно по аналогии. В качестве основного референса можно указать игру Kaboom 1981 года, разработанную компанией Activision. При желании вы без труда найдете её браузерную версию на просторах сети Интернет:



2.1 Создание проекта и первой сцены

Последовательность создания проекта и сцены внутри среды разработки не отличается для различных операционных систем.

1. Запустите Unity Hub, который был скачан и установлен в предыдущей главе;

2. Создайте новый проект, для этого нажмите New Project в правой верхней части окна Unity Hub.

3. Выберите вид проекта All templates – 3D, в поле Project Name дайте имя проекту: DragonPicker. В поле Location укажите путь к папке с проектом. Проект может находиться в любом месте на вашем компьютере.



4. Нажмите кнопку Create project. После этого откроется среда разработки Unity. Для первого запуска проекта может потребоваться значительное время, которое зависит от производительности вашего компьютера. Вид среды разработки после старта выглядит, как и ранее при создании нашего первого проекта Hello World. Также в первой главе была показана возможность изменения темы оформления на светлую, при желании вы можете использовать светлую тему оформления среды разработки.

5. В левой нижней части среды разработки внутри панели Project находится структура проекта. Внутри папки Assets хранятся исходные файлы проекта. В данный момент там существует только папка Scenes, в которой находится главная сцена с именем SampleScene.

6. Внутри сцен могут существовать отдельные объекты и персонажи, с которыми происходят различные действия во время игры. Давайте переименуем главную сцену. Это можно сделать также, как и в большинстве операционных систем при взаимодействии с папками. Кликните по SampleScene правой кнопкой мыши, выберите в выпадающем меню Rename и напишите новое имя Scene_1. После переименования среда разработки предложит перезагрузить сцену, соглашаемся, нажатием кнопки Reload. Теперь в проекте существует сцена с названием Scene_1:



7. Внутри сцены будут происходить основные действия с созданными игровыми объектами. Позже мы добавим и другие сцены, например сцену для стартового меню.

2.2 Импорт игровых объектов и персонажей

В качестве основного источника визуальных моделей и визуального оформления для своих игр на первом этапе вы можете использовать Unity Asset Store – это магазин, в котором можно приобрести (или скачать бесплатно) различные ресурсы для Unity. Для простоты понимания мы будем называть их ассетами. В Asset Store можно найти:

– 3D модели,

– звуковые эффекты/музыку,

– элементы пользовательского интерфейса,

– шейдеры/частицы,

– наборы спрайтов,

– готовые скрип-файлы и многое другое.

Основным источником персонажей в нашей игре станет набор моделей Dragon for Boss Monster, который распространяется бесплатно. Далее будет приведена подробная последовательность действия по добавлению этого ассета с игровыми персонажами – драконами в Unity.

1. Зайдите на сайт assetstore.unity.com и войдите под своей учетной записью (своим Unity ID). Для добавления ассета используется личный кабинет пользователя с тем же Unity ID, который указывался при регистрации и входе в Unity Hub.

2. Используя строку поиска в верхней части сайта, найдите Dragon for Boss Monster:



3. Откройте найденный ассет, кликнув по нему в браузере, и нажмите кнопку “Add to My Assets”. Следом на том же месте появится кнопка Open in Unity, которая позволяет открыть пакет в среде разработки (если этого не произошло автоматически, см. пункт ниже):



4. После добавления в коллекцию ассет будет привязан к вашему Unity ID. Пакет будет доступен в менеджере пакетов Unity. Вернитесь в проект Unity, на верхней панели инструментов выберите Window – Package Manager:



5. В менеджере пакетов доступно достаточно большое количество расширений для установки в Unity. Чтобы увидеть список с пакетами, добавленными вручную, выберите отображение пакетов, добавленных вами – Package Manager – Packages – My Assets. Среди установленных пакетов найдите только что добавленный Dragon for Boss Monster и скачайте его, нажав кнопку Download:



6. После завершения скачивания, рядом с кнопкой Download появляется кнопка Import, нажмите ее. Появится новое окно со списком импортируемых файлов, еще раз нажмите Import чтобы импортировать файлы из ассета в проект Unity.

7. На данном этапе мы нашли подходящий ассет-пак в магазине unity asset store, научились импортировать пакет в проект. На следующем этапе мы добавим скачанные модели на сцену.

2.3 Добавление дракона с анимацией

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

1. В окне Project откройте папку с префабами драконов. Путь к папке: Assets – FourEvilDragonsHP – Prefab – DragonTerrorBringer.

2. Создайте дубликат дракона Red, для этого выберите его (кликнув левой кнопкой мыши) и нажмите комбинацию клавиш Ctrl+D (или Command+D для MacOS). Автоматически будет создана префаб-копия с именем Red 1. Мы создаем копию модели, чтобы не использовать оригинальную модель из скачанного пакета. Возможно в будущем нам понадобятся оригинальные файлы из первоисточника, в этом случае правилами хорошего тона при разработке является «сохранность» исходных ресурсов.

3. Перетащите префаб дракона с именем Red 1 в папку Scenes. Для этого наведите курсор мыши на дракона Red 1 и зажав левую кнопку мыши перетащите в папку Scenes:



4. Таким образом, в папке Scenes вашего проекта теперь должно находиться два файла: сцену и префаб с драконом Red 1. Переименуйте дракона Red 1 в DragonRed, для этого кликните левой кнопкой мыши по объекту, нажмите Rename и введите подходящее имя:



5. Теперь добавим персонажа DragonRed на игровую сцену. Для этого перетащите префаб из окна Project в окно Hierarchy:



6. После этого персонаж DragonRed автоматически появится в окне Scene (в центральной части среды разработки Unity).

7. Как было указано ранее, координаты добавляемых на сцену объектов отображаются в окне Inspector (справа). Чтобы узнать координаты добавленного персонажа DragonRed, кликните по нему в окне Hierarchy, после этого в окне Inspector отобразятся его свойства. Нас интересуют параметры компонента Transform. Установите их значения: Rotation: 0, 0, 0; Position: 0, 0, 0; Scale: 1, 1, 1:



8. Теперь добавим дракону анимацию движения. Для этого нужно будет создать контроллер анимации. В окне Project, внутри папки Scenes (там, где находится префаб DragonRed) кликните правой кнопкой мыши и выберите из контекстного меню Create – Animator Controller. Дайте ему имя DragonRedController:



9. Контроллер нужен для того, чтобы строить “дерево анимации”, в котором описывается порядок, условия запуска и переключения анимации игровых объектов. Кликните дважды по созданному контроллеру DragonRedController чтобы открыть его.

10. Окно Animator выглядит пустым, так как контроллер был только что создан и в него не добавлено ни одной анимации. Давайте добавим подходящую анимацию парения дракона в воздухе, для этого найдите в скачанном Asset-паке анимацию FlyIdle. Она находится в папке Assets – FourEvilDragonHP – Animations – DragonTerrorBringer – FlyIdle:



11. Создайте дубликат анимации FlyIdle, как вы уже делали это ранее (комбинация клавиш Ctrl+D для Windows или Command+D для MacOS), переместите созданный дубликат анимации в папку Scenes, переименуйте файл анимации в FlyDragonRed.

12. Теперь перетащите FlyDragonRed в окно Animator. Автоматически будет создана связь Entry -> Fly Float, которая говорит контроллеру о том, что после запуска игры должна запускаться анимация полета:



13. Таким образом, был создал контроллер, и в него загружена стандартная анимация полета. Осталось лишь подключить контроллер к персонажу. Для этого в иерархии объектов на сцене выберите дракона и в окне Inspector найдите компонент Animator. В списке напротив поля Controller нажмите значок мишени и выберите созданный ранее контроллер DragonRedController:



14. Теперь, если запустить сцену, нажав кнопку Play (стрелка в центральной верхней части среды разработки Unity), то можно заметить, что запускается анимация парящего в воздухе дракона. Однако, игровая камера еще не была настроена, поэтому ракурс может оказаться не очень удачным. Тем не менее, переключившись в окно Scene вы сможете увидеть все объекты, присутствующие на сцене. На скриншоте ниже также показано, что окна Scene и Game находятся рядом друг с другом, чтобы расположить окна также, просто потяните за значок с очками окна Game и вы увидите, что окно может быть примагничено к любой части интерфейса. Впрочем, это касается любого окна внутри Unity:



15. Позднее мы изменим положение камеры и выберем более удачное расположение дракона. Нажмите кнопку Play еще раз, чтобы выйти из режима проигрывания сцены и вернуться к работе в среде разработки Unity.

2.4 Создание игрового объекта – драконьего яйца

В Unity возможно создавать игровые объекты встроенными средствами. Конечно, в реальных проектах не обойтись без использования объектов, разработанных в сторонних пакетах. Но, если речь идет о простых примитивах – то бывает достаточно и встроенных в Unity средств редактирования геометрии. В этом разделе нашего практикума мы создадим игровой объект в виде драконьего яйца, при этом будем использовать встроенные возможности среды разработки Unity.

1. Создайте объект для драконьего яйца, выбрав в меню GameObject – 3D Object – Sphere. В окне Hierarchy (слева) появится созданный объект. Переименуйте созданный объект-сферу в DragonEgg.

2. Кликните по сфере левой кнопкой мыши и установите в окне Inspector (справа) параметры Transform в следующем виде:

– Position: 0, 0, 0;

– Rotation: 0, 0, 0;

– Scale: 1, 1.5, 1.



3. Созданное яйцо должно оказаться под моделькой дракона и принять более вытянутую форму. Также внутри среды разработки Unity существует возможность создавать собственные материалы и текстуры. Давайте создадим материал для драконьего яйца. Для этого в папке Assets – Scenes создайте материал, кликнув внутри правой кнопкой мыши и выбрав Create – Material (так же, как и ранее создавали С#-скрипт файл). Назовите созданный материал EggMaterial:



4. Кликните по материалу EggMaterial, и в окне Inspector будут показаны свойства материала, доступные для редактирования. Например, кликнув по полю Albedo можно изменить основной цвет, также можете использовать бегунки Metallic и Smoothness, чтобы управлять параметрами отражения и преломления света на материале. Можете поэкспериментировать и установить цвет, который вам покажется наиболее подходящим. В любом случае вы всегда сможете вернуться к этому пункту и отредактировать свойства материала. В нашем примере настройки цвета материала показаны ниже. Я счел приемлемым воспользоваться пипеткой и выбрать в качестве основного цвета драконьего яйца цвет кости на модели дракона:



5. Чтобы назначить созданный материал объекту, просто перетяните материал EggMaterial (из папки Assets – Scenes) на объект DragonEgg (в окне Hierarchy или на сцене Scene), как мы уже неоднократно делали. Материал будет назначен созданному ранее 3D-объекту.

6. Далее добавим яйцу свойства твердого тела. Для этого выберите объект DragonEgg в панели Hierarchy, и в окне Inspector нажмите кнопку Add Component. Откроется окно добавления компонентов. В появившейся строке поиска напишите Rigidbody и кликните по найденному компоненту Rigidbody в окне поиска Search. Так мы добавили яйцу свойство твердого тела, это значит что тело будет обладать массой Mass, сопротивлением среды Drag и т.д. в соответствии с теми свойствами, которые указаны в компоненте Rigidbody:



7. Теперь при воспроизведении сцены (нажатии кнопки Play) яйцо DragonEgg будет падать вниз, тогда как дракон останется парить в воздухе и махать крыльями.

8. Так как на экране будет появляться множество объектов DragonEgg, позднее нам придется работать с массивами этих объектов. Для простоты дальнейшей работы привяжем к DragonEgg специальный тег. Для этого выберите DragonEgg в окне иерархии (Hierarchy), далее выберите выпадающий список Tag в окне Inspector – Add Tag…:



9. После этого откроется диспетчер тегов и слоев. Внутри окна Tags & Layers кликните по значку “+” и добавьте новый тег с именем DragonEgg. После того как напишете новое имя, нажмите Save:



10. Теперь в поле Tag (окно Inspector) для объекта DragonEgg задайте (выберите из списка) новый тег с именем DragonEgg:



11. Так как яйцо дракона должно будет генерироваться автоматически, то его нахождение на сцене не требуется. В этом случае в Unity принято работать с так называемыми префабами. Unity prefab – это особый тип ассетов, позволяющий хранить весь GameObject со всеми компонентами и значениями свойств. Ранее мы уже работали с префабом – драконом, который был скачан из Asset Store. Теперь давайте создадим свой префаб из объекта DragonEgg. Чтобы это сделать просто перетащите 3D объект с именем DragonEgg из окна Hierarchy в окно Project (папку Scenes):



12. Если все сделано правильно, то DragonEgg в окне Hierarchy поменяет свой цвет на голубой, так обозначаются префабы в иерархии объектов. После того как шаблон для DragonEgg будет создан, его можно удалить из окна Hierarchy (и соответственно со сцены). Удалите DragonEgg из Hierarchy (клик ПКМ – Delete), он останется в папке Assets – Scenes и его можно будет многократно вызывать и использовать в игре.

2.5 Создание игрового объекта – энергетического щита

1. Создадим новый игровой объект, которым мы будем управлять и ловить падающий драконьи яйца. Выберите в главном меню GameObject – 3D Object – Sphere. Переименуйте объект в EnergyShield. Установите его параметры Transform в следующем виде:

– Position: 0, -6, 0;

– Rotation: 0, 0, 0;

– Scale: 3, 3, 3;

2. Создайте новый материал ShieldMaterial (клик ПКМ в окне Project – Create – Material). В свойствах материала установите для него Rendering mode – Transparent, а цвет и прозрачность как показано на рисунке ниже:



3. Перетащите материал ShieldMaterial на объект EnergyShield на сцене, как это делали уже ранее, чтобы объекту – энергетическому щиту был присвоен вид созданного материала:

4. Добавьте на EnegryShield компонент Rigidbody. Внутри компонента снимите флажок Use Gravity (при выключенной Use Gravity объект не будет падать). Там же установите флажок Is Kinematic (данный пункт отключает физику для объекта, отключаются силы, не работают столкновения объектов, эта модификация объекта нам будет полезна далее):



5. Сохраните сцену, кликнув правой кнопкой мыши по сцене _0Scene и выбрав Save Scene.

2.6 Настройка камеры и игровой области

Важно понимать, что камера на сцене существует как обычный игровой объект. Камера является своего рода глазами игрока, реализованного в виде объекта со своим набором компонентов. Одна из задач заключается в том, чтобы найти оптимальное положение и настройки камеры. Этим мы и займемся в текущем разделе.

1. Выберите объект Main Camera в иерархии объектов. Настройте компонент Transform:

– Position: 0, 0, 10;

– Rotation: 0, 180, 0;

– Scale: 1, 1, 0;

2. В инспекторе для компонента Camera установите в поле Projection – Orthographic, в поле Size значение 12, и Far: 100. Итоговые настройки камеры показаны ниже:



Обратите внимание на тонкую белую рамку в окне Scene, она показывает область отрисовки камеры. Вы можете самостоятельно поэкспериментировать с остальными параметрами в настройках камеры и посмотреть, как эти параметры влияют на рамку и соответственно область отрисовки объектов.

Загрузка...