Это четвертая часть учебника о том, как создать игру на Unity, подобную Jetpack Joyride в Unity 2D. Настало время поработать с анимацией в Unity.
Создание анимации в Unity
Сейчас наша мышь очень ленивая. Она не хочет шевелиться, а только и делает, что летает с помощью ракетного ранца. Тем не менее, топливо стоит дорого, так что это лучше мышке по земле бегать на своих двоих :] Для этого нам предстоит научиться создавать анимацию и изменить скрипт MouseController для переключения между анимациями на земле и в воздухе.
Кадры с анимацией бега находятся в спрайт-листе mouse_run, поэтому первым делом вам надо правильно их нарезать. Откройте папку Sprites в браузере проекта и найдите mouse_run. Выберите и установить его Sprite Mode в Multiple в Инспекторе. Затем нажмите на кнопку Sprite Editor чтобы открыть Редактор спрайта.
В Редакторе спрайта нажмите на кнопку Slice в левом верхнем углу чтобы открыть варианты нарезки. Установите для поля Type (Тип) значение Grid
(сетка). Установите размер сетки на 162 x 156 и нажмите на кнопку Slice. Теперь у нас есть сетка. Не забудьте нажать на кнопку Apply для сохранения изменений.
Закройте Редактор спрайта. Теперь, если вы развернете mouse_run в Браузере проекта, вы увидите, что он был нарезан на четыре разных спрайта.
Теперь у вас есть все кадры необходимые для создания анимации. Анимация полета состоит из одного спрайта. Это спрайт, который вы использовали, чтобы создать мышь, так что у вас уже есть все кадры для этой анимации.
Для работы с анимацией вам нужно будет открыть окно Анимация, если вы его еще не открыли. Выберите Window\Animation и откройте окно Animation (Анимация). Поместите его так, чтобы можно было видеть вкладки Animation и Project. Я предпочитаю размещение его наверху, рядом с вкладками Сцена и Игра, но вы можете поместить его в любом месте, где вам нравится.
Перед созданием своей первой анимации, создайте папку Animations во вкладке Project (Проект). Не забывайте, что большинство новых файлов в Unity создаются в папке, выбранной в данный момент в Браузере проекта.
Далее выберите Игровой объект mouse в Иерархии, так как новые анимации будут добавлены к недавно выбранному объекту в Иерархии.
Во вкладке Анимация создайте два новых клипа: run и fly, выбрав [Create New Clip] в выпадающем меню, расположенном в верхнем левом углу (левее свойства Samples (Образцы)).
Обратите внимание на 3 новых файла, созданных во вкладке Project в папке Animations: fly (полет) и run (бег), а также файл аниматора mouse. Выберите mouse в Иерархии. В Инспекторе вы увидите, что к нему автоматически добавлен компонент Animator.
Для начала, добавим кадры к анимации бега. Убедитесь, что вкладки Анимация и Проект видны. Во вкладке Animation выберите анимацию run.
Во вкладке Project откройте папку Sprites и разверните раскадровку mouse_run.
Выберите все анимационные кадры: mouse_run_0, mouse_run_1, mouse_run_2, mouse_run_3 и перетаците их во временную диаграмму на вкладке Animation, как показано ниже:
Вот как должна выглядеть временная диаграмма после добавления кадров.
Добавление покадровой анимации в Unity
Анимация fly будет состоять только из одного кадра. Выберите анимацию fly во вкладке Анимация.
Во вкладке Project найдите спрайт mouse_fly и перетащите его во временную диаграмму, как вы это делали с run анимацией. Но на этот раз вам нужно добавить только один спрайт.
Убедитесь, что вы остановили после добавления кадров анимации режим записи (recoding mode) во вкладке Анимация, или вы можете случайно оживить позицию мыши или другие свойства. Нажмите на красную точку в панели управления вкладки Анимация, чтобы остановить запись.
Зачем нам создавать анимацию из одного кадра? Well, you will see in a moment that it will be much easier to switch between the running and flying mouse states using the Animator transitions.
Настройка Аниматора и запуск настройки анимации
Запустите сцену, при этом Вы заметите две странные вещи:
- Мышь носится как сумасшедшая.
- Мышь не падает, даже если вы не касаетесь экрана.
К счастью, это легко исправить. Первый баг возникает из-за, что анимация проигрывается слишком быстро, второй - из-за неверных настроек аниматора.
Вы заметили, что теперь мышь теперь по умолчанию бегает, хотя раньше был только лишь спрайт летающей мышки? Это из-за того, что вы добавили анимацию бега первой, и компонент Animator установил ее как анимацию по умолчанию. В этом случае, эта анимация запускается сразу при начале игры.
Для корректировки скорости анимации выберите анимацию run во вкладке Анимация и установите в свойстве Samples 8
вместо 60
.
Чтобы пофиксить второй баг, выберите Игровой объект mouse в Иерархии и найдите в Инспекторе компонент Animator. Выключите Apply Root Motion и включите Animate Physics.
Вот выдержка из документации Unity о свойстве Root Motion:
Root motion (корневое движение) – это эффект, при котором вся сетка объекта сдвигается с его начальной точки, но это движение создается скорее самой анимацией, а не изменением позиции объекта Transform.
Другими словами, вы должны включить его, если ваша анимация изменяет объект Transform. Сейчас не этот случай, поэтому мы его отключаем. Кроме того, поскольку игра использует физику, было бы здорово синхронизировать анимацию и физику. Именно поэтому мы и включили Animate Physics. Запустите сцену. Теперь мышь топает по полу.
Тем не менее, мышь продолжает идти, даже когда она находится в воздухе.
Чтобы это исправить, вам нужно создать несколько анимационных переходов.
Переключение между анимациями
Поскольку существует два анимации, вы должны сделать чтобы игровой объект мышь мог переключаться между ними. Для этого воспользуемся механизмом аниматора Переходы (Transitions).
Создание анимационных переходов
Вам понадобится еще одна вкладка для работы. В верхнем меню выберите Window\Animator, чтобы добавить вкладку Animator. В настоящее время у вас есть две анимации: run и fly. Анимация run выделена оранжевым цветом который означает, что это анимация по умолчанию.
В настоящее время у нас нет перехода между анимациями run и fly. Это значит, что у мыши всегда анимация run. Чтобы исправить это, вам нужно добавить два перехода: от run к fly и обратно. Чтобы добавить переход от run, щелкните правой кнопкой мыши на ней и выберите пункт Сделать переход (Make Transition), а затем наведите курсор на анимация fly и щелкните на ней левой кнопкой мыши. Теперь добавьте переход от fly к run. Проиллюстрируем процесс создания обоих переходов в Unity (на тот случай, если что-то не понятно):
Это создает два безусловных перехода. Это значит, что при запуске игры, мышка сначала будет бежать, а после одного проигрыша этой анимации, она перейдет к летающему состоянию. Как только анимация полета завершится, мышка снова перейдет к бегу, и так далее. Это трудно заметить, потому что анимация fly занимает лишь доли секунды, так как сочтоит из одного кадра. Тем не менее, если вы переключитесь на Аниматор когда сцена запущена, вы увидите, что есть постоянный переход между анимациями:
Добавление параметров перехода
Чтобы разорвать порочный круг необходимо добавить условие, чтобы знать когда анимация fly должна перейти к анимации run и наоборот. Откройте вкладку Аниматор и найдите панель Параметры (Parameters) в левом нижнем углу. Сейчас она пуста. Нажмите на кнопку +, чтобы добавить параметр, выбрав в выпадающем списке Bool.
Назовите новый параметр grounded.
Выберите переход от run к fly, чтобы открыть свойства перехода в Инспекторе. В секции Conditions измените единственное условие с Exit Time на grounded и установите его значение в false
.
Сделайте то же самое с переходом от fly к run, но на этот раз установите значение grounded равным true
. Таким образом мышm будет летать, когда grounded равно false
, и ходить, когда true
. В то время как мы еще должны поработать с параметрами, вы можете проверить переходы прямо сейчас. Чтобы сделать это, запустите сцену, убедившись, что вкладка Аниматор видна и установите (или снимите) флажок с параметра grounded пока игра запущена.
Добавление объекта для проверки приземления мыши
Есть много способов, чтобы проверить приземлился ли объект. Мне нравится следующий метод, потому что он дает визуальное представление о той точке, где отмечается земля, и это довольно полезно, когда у вас есть много подобных отметок (земля, потолок, и т.д.). Что делает данный метод наглядным, так это объект Empty добавленный как дочерний объект персонажа, как на картинке:
Создайте пустой игровой объект, а затем перетащите его на игровой объект mouse в Иерархии, чтобы добавить его в качестве дочернего объекта. Выберите этот объект в Иерархии и переименуйте его в groundCheck (Контроль заземления). Установите его Position в (0, -0.7, 0)
. Чтобы сделать его более наглядным, нажмите на icon selection (Выбрать значок) в Инспекторе и выберите зеленый прямоугольник со скошенными краями (вы можете выбрать любой цвет, но зеленый мне нравится больше).
Вот, что у нас должно получиться:
Скрипт будет использовать положение этого пустого объекта, чтобы проверить находится ли он на земле.
Использование слоев для определения приземления
Прежде чем вы сможете убедиться, что мышь находится на земле, вам нужно определить, что является основанием. Если вы не сделаете этого, мышь будет ходить на вершине лазеров, монет и других игровых объектов с коллайдерами. Вы собираетесь использовать класс LayerMask в сценарии, но чтобы использовать его, необходимо сначала установить правильный слой с объектом пола. Откройте папку Prefabs во вкладке Проекты (Project) и раскройте префаб room1. Выберите floor (пол) внутри Prefab.
В Инспекторе нажмите на выпадающий список Layer (слой) и выберите пункт Add Layer... (Добавить слой...).
Это откроет редактор Tags & Layers (Теги и Слои) в Инспекторе. Найти первый редактируемый элемент User Layer 8 и введите в него Ground. Все предыдущие слои зарезервированы в Unity.
Далее, выберите floor в папке Prefab и снова установите его Layer в Ground.
Проверка приземления мыши
Чтобы мышка автоматически переключалась между состояниями, вам надо будет обновить скрипт MouseController и проверить, находится ли мышка на земле, а затем сообщить об этом Aниматору (Animator).
Откройте скрипт MouseController в MonoDevelop и добавьте следующие переменные экземпляра:
public Transform groundCheckTransform;
private bool grounded;
public LayerMask groundCheckLayerMask;
Animator animator;
Переменная groundCheckTransform
хранит ссылку на groundCheck, который вы создали ранее.
Переменная grounded
определяет на земле ли мышка.
Переменная groundCheckLayerMask
хранит LayerMask
, который определяет, что есть земля.
И наконец, переменные animator
содержат ссылку на компонент Animator (Аниматор).
Лучше закешировать компоненты, получаемые с помощью GetComponent в какой-нибудь переменной, так как GetComponent медленно работает.
Для кеширования компонента Animator откройте следующую строку кода Start
:
animator = GetComponent<Animator>();
Теперь добавим метод UpdateGroundedStatus
:
void UpdateGroundedStatus()
{
//1
grounded = Physics2D.OverlapCircle(groundCheckTransform.position,0.1f,groundCheckLayerMask);
//2
animator.SetBool("grounded", grounded);
}
Это метод проверяет приземлилась ли мышь и устанавливает параметр аниматора:
- Чтобы проверить, на земле ли мышка, создайте круг с радиусом
0.1
на позиции объекта groundCheck, который вы добавили в сцену. Если этот круг перекрывает любой объект, который имеет слой, указанный в groundCheckLayerMask
, то мышка на земле.
- Этот код устанавливает параметр grounded Аниматора, который затем запускает анимацию.
Наконец, добавьте вызов UpdateGroundedStatus
в конце FixedUpdate
:
UpdateGroundedStatus();
Он вызовет метод со всеми исправленными обновлениями, гарантируя, что статус земли будет постоянно проверяется.
Настройка параметров скрипта MouseController для приземления
Остался один маленький шаг, чтобы заставить мышку автоматически переключаться между бегом и полетом. Откройте Unity и выберите игровой объект mouse в Иерархии. Найдите компонент скрипта Mouse Controller. Вы увидите два новых параметров скрипта:
Нажмите на выпадающий список Ground Check Layer Mask и выберите слой Ground. Перетащите groundCheck из Иерархии в свойство Ground Check Transform
Запустите сцену.
Включение и выключение пламени ракетного ранца
Несмотря на то, что вы вылечили мышь от лени, вы не вылечили ее от расточительности, ибо ее ракетный ранец включен даже когда она находится на земле. Откройте скрипт MouseController и добавьте публичную переменную jetpack
чтобы сохранить ссылку на систему частиц.
public ParticleSystem jetpack;
Затем добавьте следующий метод AdjustJetpack
:
void AdjustJetpack (bool jetpackActive) {
jetpack.enableEmission = !grounded;
jetpack.emissionRate = jetpackActive ? 300.0f : 75.0f;
}
Этот метод отключает систему частиц, когда необходимо, а также уменьшает интенсивность выбросов частиц, когда мышь падает, так как реактивный ранец может быть по-прежнему работать, но не в полную силу.
Добавьте вызов этого метода в конце FixedUpdate
:
AdjustJetpack(jetpackActive);
Переменная jetpackActive имеет значение true
, когда вы держите левую кнопку мыши и false
, когда вы ее отпустили.
Теперь вернитесь в Unity и перетащите jetpackFlames из Иерархии в свойство jetpack скрипта MouseController.
Запускаем сцену для отладки.
Теперь реактивный ранец имеет три различных состояния. Он отключен, когда мышь приземлилась, работает в полную силу, когда мышь поднимается вверх, и едва дымит во время спуска. Я нахожу это довольно реалистичным, поскольку маловероятно, что вы выключите реактивный ранец, а потом устремитесь камнем вниз.
На этом наш урок подошел к концу. Вы можете скачать окончательный проект для этого урока используя эту ссылку: RocketMouse_Final_Part2.
А что же дальше?
В следующей части нашего урока Игра в стиле Jetpack Joyride в Unity 2D. Часть 5 вы добавите в игру лазеры, монеты, звуковые эффекты и многое другое.