Продолжаем создавать нашу 2D игру на Unity. Мы ограничим наш игровой мир, создадим реалистичное пламя и узнаем как работать со слоями в Unity.
Добавление пола и потолка
Как вы могли догадаться, добавление пола и потолка является относительно простым упражнением; все, что вам действительно нужно, это объект, с которым мышка будет сталкиваться в верхней и нижней частях картинки. Когда вы ранее создали объект Mouse, он был создан с изображением, поэтому пользователь может визуально отслеживать, где объект находится на протяжении всей игры. Пол и потолок, однако, могут быть представлен пустыми игровыми объектами, поскольку они никогда не двигаются и их расположение очевидно для пользователя. Выберите GameObject\Create Empty чтобы создать пустой объект. Вы не увидите его на экране прямо сейчас... Выберите GameObject в Иерархии и сделать следующие изменения в Инспекторе:
- Переименуйте его в floor.
- Установите Position в (0, -3.5, 0).
- Установите Scale в (14.4, 1, 1).
- Нажмите Add Component (Добавить Компонент) и добавьте компонент Box Collider 2D выбрав Physics 2D\Box Collider 2D.
Теперь вы должны увидеть зеленый коллайдер в нижней части сцены:
Не парьтесь насчет этих магических чисел в свойствах Position и Scale; позже, по мере добавления новых элементов, вы начнете понимать их смысл.
Вы не добавили компонент Rigidbody 2D к игровому объекту floor (пол). Это потому, что пол должен только ограничить движение мыши и не должен зависеть от гравитации, приложенной к нему силе и пр.
Запустите сцену. Теперь мышь падает на пол и не проваливается.
Однако, если вы активируете ракетный ранец, мышь по-прежнему улетит из комнаты, так у нас отсутствует потолок. Я уверен, что вы можете добавить его самостоятельно. Задайте позицию потолка Position координатами (0, 3.7, 0), и не забудьте переименовать его в ceiling.
Нужна помощь в добавлении потолка? Не вопрос! Выберите GameObject\Create Empty для создания объекта. Выберите его в Hierarchy (Иерархии) и сделать следующие изменения в Инспекторе:
- Измените имя на ceiling.
- Установите Position в (0, 3.7, 0).
- Установите Scale в (14.4, 1, 1).
- Нажмите Add Component (Добавить Компонент) и добавьте компонент Box Collider 2D
Теперь у нас есть и пол, и потолок на сцене.
Теперь, если вы запустите игру, вы увидите, что мышь никогда не улетает за пределы игрового экрана.
Использование системы частиц в Unity для создания пламени
В этом разделе вы сделаете вырывающееся пламя из ракетного ранца, когда мышь взлетает с его помощью. Почему пламя? Потому что мне нравится играть с огнем!
Есть много различных способов показать как пламя выходит из ракетного ранец, но мой личный фаворит - это системы частиц. Системы частиц используются для создания множества мелких частиц и моделирования таких эффектов, как огонь, взрывы, туман.
Чтобы добавить систему частицы на сцену выберите GameObject\Create Other\Particle System. Вы сразу же заметите изменения в сцене: будет показана Система частиц. Так всегда происходит, когда выбран объект.
Хорошее начало, но у нас есть несколько проблем. Во-первых, Система частиц всегда остается в центре экрана, независимо от того, где летит мышь. Для того, чтобы языки пламени всегда вылетали из ракетного ранца, вам нужно добавить систему частиц, как потомка мыши. В Иерархии перетащите Particle System за mouse, чтобы добавить его как дочерний элемент. Вот, что у нас должно получиться:
Теперь, когда система частиц перемещается правильно, настроить ее, чтобы она была похожа на пламя, выбрав Particle System в Иерархии и проделав следующие изменении в Инспекторе:
- Переименуйте Particle System в jetpackFlames.
- Установите Position в (-0.62, -0.33, 0) чтобы переместить его на сопла ранца.
- Установите Rotation в (65, 270, 270) чтобы установить направление, в котором частицы будет вылетать.
- В Инспекторе, найдите компонент Particle System и установите следующие свойства:
- Установите
Start Lifetime
(продолжительность жизни частиц), равной 0.5
- Установите
Start Size
(начальный размер частиц) равным 0.3
- Нажмите на
Start Color
(начальный цвет частиц) установите Red равным 255, Green равным 135, Blue равным 40 и оставить Alpha равной 255. Вы должны получить сочный оранжевый цвет.
- Разверните раздел
Emission
и установите Rate (число генерируемых частиц в секунду или в единицу пройденного расстояния системой частиц) равной 300. Убедитесь, что вы не сняли флажок слева от вкладки Emission и отключить ее.
- Разверните раздел
Shape
(задает фигуру, определяющую направление распространения частиц). Убедитесь, что Shape установлена в Cone (Конус), Angle (Угол) задан равным 12, а Radius (радиус) равен 0.1. Наконец, финальный аккорд - это включение чекбокса Random Direction (Случайное Направление).
Вот как система частиц должна выглядеть прямо сейчас:
Если пламя вашего ракетного ранца отличаются от представленного на рисунке, взгляните на скриншот ниже и убедитесь, что вы все сделали правильно:
Улучшение Пламени
Пламя жарко полыхает, но, если вы присмотритесь, то заметите, что вылетев из сопла ранца, частицы пламени внезапно останавливаются, как будто они столкнулись с невидимой стеной. Вы можете исправить это путем изменения цвета частиц после того, как они отлетят подальше от ранца. Выберите jetpackFlames в Иерархии и найдите вкладку под названием Color over Lifetime в компоненте Particle System
. Color over Lifetime определяет как частицы с течением времени изменяют свой цвет и прозрачность. Включите ее, нажав на чекбокс слева от названия вкладки, и раскройте ее.
Сейчас Color over Lifetime задан белым цветом. Это может показаться странным, так как вы видите, что пламя оранжевое. Однако, Color работает немного иначе. Вместо установки, цвет умножается на значение Start Color.
Перемножение любого цвета с белым выдает в результате первоначальный цвет, поэтому сейчас вы и видите оранжевое пламя. Но можно поменять Color over Lifetime на градиент и установить прозрачность для итогового цвета на 0. Так и сделаем, путь частицы постепенно исчезают.
Нажмите на белый прямоугольник в окне Color over Lifetime чтобы открыть Редактор градиента. Выглядит он так:
Перетащите верхний бегунок на право и измените значение Alpha на 0. Затем закройте Редактор градиента.
Запустите сцену. Теперь пламя из ранца выглядит более реалистичным.
Создания игрового уровня
Вы ведь помните, что мышь должна скользить по бесконечно длинной комнате, избегая лазеров и собирая монеты. Следовательно, если мы это не автоматизируем - работать нам над этой игрой до конца своих дней! Вам предстоитсоздать несколько различных секций уровня и добавит скрипт, который будет случайным образом добавить их перед игроком. Для начала, вы просто добавите несколько элементы фона в этом учебнике. Во второй части вы начнете создавать дополнительные комнаты, через которые наша мышь будет летать. Это, как может выглядеть одна из секций уровня:/p>
Процесс создания секции комнаты состоит из 3 этапов:
- Добавляем фон
- Добавляем пол и потолок
- Добавляем декоративные элементы (книжная полка, мышкину норку, и так далее)
Добавлений фона комнаты
Убедитесь, что и вкладка Scene (Сцена) и Project browser (Браузер проектов) видны. В Браузере проектов открыть откройте папку Sprites и перетащите спрайт bg_window на сцену. Сейчас вам не нужно заботиться о позиционировании спрайта на сцене.
Сейчас ваш фон будет вышае объекта мыши. Мы разоберемся с этим позже, пока что просто не обращайте внимания на мышь. Выберите bg_window в Иерархии и установите в Position такие значения (0, 0, 0).
После размещения центральной секции комнаты, необходимо добавить еще несколько секций - одну слева и одну справа от окна. На этот раз мы будем использовать bg спрайт. Найдите его в Браузере проекта и перетащите на сцену два раза. Первый раз слева, а второй раз справа от bg_window. Не пытайтесь поместить спрайт точно. Сейчас вам нужно только добавить его на сцену. Вы должны получить что-то вроде этого:
Похоже на комнату Сальвадора Дали, не так ли? :]
Вы могли бы задаться вопросом, почему мы располагаем комнату в точке с координатами (0, 0, 0). Это необходимо, так как вы будете добавлять все комнаты в пустой игровой объект, поэтому вам нужно знаеть где в центр комнаты. Вам будет понятнее, когда вы начнете генерировать уровень.
Использование Вершинной привязки (Vertex snapping)
Вы могли бы просто позиционировать каждый элемент фона на экране на основе размера каждого элемента, но это не самый лучший метод. Вместо этого вы будете использовать Вершинную привязку (Vertex snapping) - функцию Unity, которая позволяет легко позиционировать элементы рядом друг с другом. Вы только посмотрите, как все просто:
Чтобы использовать Вершинную привязку, вам просто нужно удерживать клавишу V
после выбора, но перед перемещением игрового объекта. Нужна более подробная инструкция по использованию Вершинной привязки? Хорошо.
Выберите объект с фоном комнаты, который вы хотите переместить. Не забудьте отпустить кнопку мыши. Затем, удерживая клавишу V
, переместите мышь в тот угол, который вы хотите использовать в качестве точки опоры. Это будет один из углов слева для фона в правой части окна, и один из углов справа для фона в левой части окна. Обратите внимание, как синяя точка показывает, какие вершины будут использоваться в качестве опорной точки. После выбора опорной точки удерживайте левую кнопку мыши и начинайте двигать объект. Обратите внимание, что вы можете переместить объект только так, чтобы точка опоры совместилась с углом (вершиной) другого спрайта.
Если вы сейчас запустите игру или перейдете на вкладку Игра, вы увидите, что мышь (персонаж, а не устройство ввода) находится позади фона. Как будто она находится снаружи и пытается проникнуть в дом. Давайте это исправим!
Сортировка слоев в Unity
Для того, чтобы мышонок появится в верхней части фона комнаты, мы воспользуемся функцией под названием Sorting Layer (Слои сортировки). Нам потребуется всего минута, чтобы поместить нашу мышь поверх фона. Выберите mouse в Иерархии и найдите компонент Sprite Renderer (позволяет вам отображать изображения в виде спрайтов(Sprites), чтобы использовать их и в 2D и в 3D сценах) в Инспекторе. Там вы увидите выпадающий список с названием Sorting Layer
, в котором, в настоящий момент, установлено значение по умолчанию, как показано на рисунке ниже.
Откройте выпадающий список и вы увидите список сортируемых слоев из тех, что у вас есть. Сейчас там должно быть только Default. Нажмите на Add Sorting Layer…, чтобы добавить слои для сортировки. Это сразу же откроет редактор Tags & Layers (Теги и Слои). Добавьте следующие слои сортировки, нажав кнопку +:
- Background
- Decorations
- Objects
- Player
Порядок сортировки слоев очень важен, поскольку определяет порядок отображения объектов в игре.
Когда вы закончите, редактор Tags & Layers будет выглядеть следующим образом:
Сейчас вам понадобятся только слои Background и Player. Остальные будут задействованы позже. Выберите mouse в Иерархии и установите его Sorting Layer в Player. Мышь должна немедленно переместиться к передней части сцены.
Вы также должны переместить элементы фона (два различных bg объекта и bg_window) на фоновый слой, выбрав каждый объект в Иерархии, но не изменяя его слой. Это не обязательно делать сразу, но потребуется позже чтобы сохранить порядок в доме, когда вы добавите больше элементов.
Если вы запустите игру сейчас, вы сразу же заметите одну проблему - наш фон перекрывает пламя ракетного ранца.
Вы можете попробовать найти свойство сортируемого слоя в инспекторе для системы частиц jetpackFlames, но вы не найдете его. Это лишь малое напоминание того, что Unity изначально позиционировался как 3D-движок для игр, а некоторые из его объектов до сих пор не полностью обновленыдля работы в 2D мире.
Исправление порядка сортировки Систем частиц
Хотя в Инспекторе нет никаких свойств сортировочного слоя для jetpackFlames, это не значит, что вы не можете добраться до них и изменить их в скрипте. Сначала создайте новый С# скрипт и назовите его Creating ParticleSortingLayerFix. Прикрепите его к объекту jetpackFlames. Не знаете, как это сделать? Пользуйтесь инструкцией ниже:
Создание скрипта ParticleSortingLayerFix
Убедитесь, что в Браузере проекта выбрана папка Scripts и нажмите Assets\Create\C# Script. Назовите скрипт ParticleSortingLayerFix. Перетащите скрипт к jetpackFlames в Иерархии, точно также, как вы перетаскивали скрипт MouseController к мышке, чтобы добавить его в систему частиц.
Убедитесь, что он добавлен, выбрав jetpackFlames в Иерархии и проверив в Инспекторе.
Откройте скрипт ParticleSortingLayerFix, дважды щелкнув на нем в Браузере проекта или в Инспекторе. Добавьте следующий код в Start
:
particleSystem.renderer.sortingLayerName = "Player";
particleSystem.renderer.sortingOrder = -1;
Первая строка устанавливает сортировки слой для системы частиц, а вторая строка устанавливает порядок объекта в сортировочной слоя. Если вы не установите его в -1
, то пламя от будет отображаться в верхней части ранца, как показано ниже:
Запустите сцену и вы увидите, что пламя от ранца теперь отображается над фоном.
Тем не менее, если вы остановите игру и перейдете к вкладке Сцена, система частиц будет по-прежнему отображаться позади фона. К сожалению, вам придется смириться с этим. Слой сортировки пламени установлен в коде, поэтому он не будет отображаться в интерфейсе. Скорее всего это будет исправлено в следующих обновлениях Unity.
Украшение комнаты
Чтобы украсить комнату можно использовать любое количество книжных полок и мышиных норок из папки Sprites в Браузере проекта. Вы можете расположить их так, как хотите, только не забудьте установить их Sorting Layer в Decorations. Нужна помощь дизайнера интерьера? Хорошо.
В Браузере проекта найдите изображение по имени object_bookcase_short1. Перетащите его на сцену также, как вы уже делали с фоном комнаты. Не пытайтесь поместить его где-нибудь в определенном месте, просто добавьте на сцену. Выберите object_bookcase_short1 в Иерархии и установите его Sorting Layer в Decorations. Теперь вы сможете увидеть его. Ура! Установите Position шкафа в (3.42, -0.54, 0) или поместите его в любое место, куда хотите. Теперь добавьте спрайт object_mousehole. Установите его Sorting Layer в Decorations и Position в (5.15, -1.74, 0).
Вот как я обставил комнату:
Вы не должны делать все так же, как у меня. Вдруг, ваша мышь не богата и может позволить себе максимум 2 книги )). Главное - не закрывайте окно книжным шкафом!
Посмотрите, теперь это уже начинает выглядеть как настоящая игра!
А что же дальше?
Я, надеюсь, вам понравилось читать эту статью. Теперь у вас есть смазливый мышонок, который летает вверх и вниз на основном фоне. В следующем уроке Игра в стиле Jetpack Joyride в Unity 2D. Часть 2 ваша мышка начнет двигаться вперед в случайно сгенерированной комнате. Вы даже добавите несколько анимаций чтобы сделать игру веселой и интересной. А пока, можете скачать результат нашего урока здесь: RocketMouse_Final_Part1