Найти тему

Unity 2D. Ruby's Adventure. Part 18

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

Чтобы воспроизвести анимацию на игровом объекте, Unity использует компонент под названием Animator. Разберем работу этого компонента на примере робота, поскольку у него более простая анимация по сравнению с персонажем Ruby.

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

В инспекторе добавьте компонент «Animator».

Добавление аниматора
Добавление аниматора

Самая важная настройка компонента Animator — это свойство Controller .

Контроллер — это компонент, отвечающий за выбор нужной анимации для воспроизведения. С помощью этого компонента вы сможете добавить нужные анимации игровому объекту, ввести параметры перехода от одной анимации к другой и задать условия этих переходов. Звучит достаточно сложно, но будем разбираться по порядку.

Сначала создадим новый контроллер и привяжем его к аниматору робота. В окне проекта перейдите в папку Animations. Эта папка содержит готовые анимации для вашего проекта, чтобы упростить нашу работу в дальнейшем. Внутри папки Animations щелкните правой кнопкой мыши и выберите Create > Animator Controller из контекстного меню:

Создание контроллера
Создание контроллера

Переименуйте созданный контроллер в Robot.

Теперь перетащите созданный контроллер в поле Controller у компонента Animator в префабе робота:

Задание контроллера
Задание контроллера

Теперь, когда у нас есть контроллер аниматора, нужно создать анимации, которые будет использовать контроллер. Анимации — это ассеты (активы), которые располагаются в папке проекта.

Чтобы создать анимацию в редакторе Unity, используйте окно «Animation». Чтобы правильно его открыть с возможностью добавления анимации для нужного объекта, обязательно должен быть выбран объект в окне иерархии!

Проверьте, что в окне иерархии выделен объект робота и воспользуйтесь пунктом меню Window > Animation > Animation:

Открытие окна анимации
Открытие окна анимации

Если объект в иерархии был выбран окно анимации будет иметь вид (иначе закройте окно, выберите нужный объект в иерархии и опять откройте окно анимации):

Окно анимации
Окно анимации

Нажмите кнопку Create для создания клипа анимации.

В появившемся диалоговом окне выберите папку «Animations» в качестве места для сохранения анимационного клипа и назовите клип «RobotLeft»:

Название клипа
Название клипа

Откроется окно создания клипов:

Окно созданий анимаций
Окно созданий анимаций

Окно разделено на две части:

  • Слева окно, в котором будет отображаться список свойств, при помощи которых создан этот клип анимации. Например, анимацию пульсации можно создать изменяя свойство Transform > Scale
  • Справа расположена временная шкала, показывающая ключевые кадры для каждого свойства.

Вы можете анимировать практически любое свойство любого компонента выбранного игрового объекта с течением времени. Это может быть цвет спрайта, который вы хотели бы изменить со временем, или размер спрайта. Вы можете изменять спрайты объекта с течением времени, изменяя свойство Sprite компонента Sprite Renderer.

Для создания анимации движения робота мы будем использовать изменение свойства Sprite компонента Sprite Renderer. У нас есть много отдельных спрайтов, которые мы можем расположить в цепочку. Бесконечно отображая эти спрайты друг за другом, Unity и создает анимацию, которую мы видим.

Все спрайты для вашего робота располагаются в папке с названием Art > Sprites > Characters в атласе спрайтов (или листе спрайтов) под названием MrClockworkSheet:

Атлас спрайтов
Атлас спрайтов

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

Сместите окно анимации в сторону и в окне проекта нажмите на стрелку рядом с изображением, чтобы увидеть все спрайты:

Спрайты робота
Спрайты робота

Удерживая клавишу Shift, щелкните первый и последний спрайты анимации движения лицом влево, чтобы выбрать все четыре и И перетащите эти спрайты в окно анимации.

  • MrClockworkWalkSides1
  • MrClockworkWalkSides2
  • MrClockworkWalkSides3
  • MrClockworkWalkSides4
Добавление спрайтов в анимацию
Добавление спрайтов в анимацию

Это автоматически создаст анимацию с использованием четырех спрайтов. Для просмотра в окне свойств кликните по стелочке вниз рядом со свойством Bot : Sprite, чтобы в правой части появились изображения. Для масштабирования правой части переместите в нее курсор мыши и крутите колесиком мыши:

Спрайтовая анимация
Спрайтовая анимация

Запустите игру, чтобы посмотреть результат.

Вы увидите, что анимация идет слишком быстро. Это связано с тем, что анимация имеет по умолчанию состоит из 60 кадров. Количество кадров задается в настройке «Samples» в окне анимации. Если у вас этого параметра нет, то кликните по трем точкам справа в окне и выберите пункт Show Sample Rate:

Количество кадров анимации
Количество кадров анимации

Таким образом анимацию работает со скоростью 60 кадров в секунду, что означает, что Unity отрисовывает новый спрайт анимации 60 раз в секунду. Получается, что каждый спрайт анимации из четырех остается на экране только в течение 1/60 (то есть 0,016 ) секунды. Чтобы это исправить, просто установите Samples на 4, чтобы спрайты менялись только 4 раза в секунду.

Теперь ваша анимация должна работать с правильной скоростью. Можете изменить это значение на свое, чтобы заставить анимацию работать с нужной вам скоростью.

Вот и готова одна анимация! Нам нужно сделать еще 3, чтобы был полный набор!

Чтобы создать еще одну анимацию, щелкните имя текущей анимации в левом верхнем углу окна, выберите «Create New Clip»:

Создание нового клипа
Создание нового клипа

В появившемся окне введите имя «RobotRight» и выберите папку «Animations»:

Создание нового клипа
Создание нового клипа

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

Компонент Sprite Renderer имеет свойство Flip, которое отражает спрайт относительно какой-либо оси. Следующий скрин просто для примера, повторять это не обязательно:

Свойство Flip
Свойство Flip

Этот параметр Flip мы также можем добавить в анимацию. Сначала перенесите четыре спрайта анимации движения влево в текущую анимацию RobotRight и установите Samples на 4:

Добавление спрайтов в анимацию
Добавление спрайтов в анимацию

Кликните Add property и щелкните треугольник рядом со свойством Sprite Renderer, а затем щелкните значок "+" рядом с Flip X:

Добавление свойства Flip X
Добавление свойства Flip X

Теперь вы можете изменить значение этого свойства для каждого кадра. Текущий кадр, для которого вы устанавливаете значение, отображается в поле рядом с кнопкой «Вперед» на верхней панели окна анимации, а также слева вертикальной белой полосой:

Кадр анимации
Кадр анимации

Установите флажок рядом с именем свойства Flip X в кадрах 0 и 4 , чтобы Flip оставался включенным для всей анимации:

Установка свойства
Установка свойства

Обратите внимание, что на той же строке, что и свойство Flip появились ромбики, которые означают изменение значения этого свойства в этом кадре. Если ромба нет, то кадр будет использовать последнее установленное значение, как в нашем случае с Flip. Мы установили его в пером кадре, а последующие кадры будут использовать его автоматически:

Установка свойства
Установка свойства

Создайте аналогично анимации для движения вверх и вниз.