Покадровая спрайтовая 2д анимация в Unity

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

В данной статье мы разберём анимацию на примере трёх самых популярных состояний в 2д платформере:

• Состояние покоя
• Бег, или ходьба
• Прыжок

Подготовка кадров

Первым делом нам необходимо загрузить в окно Project спрайты для наших анимаций. На изображении ниже, я загрузил все необходимые кадры анимаций в три спрайта для каждого состояния(покоя, прыжок, бег). Вы можете все кадры использовать отдельными спрайтами, а можете сгруппировать как у меня. Это впринципе не важно.

Создание Анимации (Animation)

Теперь нам необходимо каждое из состояний анимировать. Для этого открываем окно Animation, с помощью вкладки Window - Animation - Animation. Откроется данное окно.

Благодаря этому окну, мы и будем превращать наши кадры в анимацию. Для этого выбираем игровой объект, который анимируем, в нашем случае это персонаж с именем Player. А далее нажимаем кнопку Create, которая изображена на рисунке выше. Далее откроется окно, в котором необходимо указать название для нашей первой анимации покоя. Назовём её idle. Готово, наша анимация создана, но пока она ещё пустая, и не имеет никаких кадров.

Важно №1. После создания ПЕРВОЙ анимации, автоматически создаётся и контроллер анимаций(Animator), с таким же названием, как и у объекта, которому мы и создаём анимацию. В моём случае название аниматора будет Player. Контроллер анимаций хранит ВСЕ состояния анимаций данного объекта(покой, бег, прыжок), и благодаря ему происходит смена этих состояний анимаций с одной на другую. На рисунке у нас создана пока ещё пустая анимация покоя idle, и контроллер анимаций Player.

Важно №2. Так же, после создания первой анимации, в Inspector-е данного объекта создаётся и компонент Animator, который несёт в себе ссылку на наш контроллер анимаций. Благодаря этому компоненту мы и будем в дальнейшем через скрипт C# менять состояния анимаций с одной в другую.

Перейдём к окну Animation. Перенесём наши спрайты из окна Project, в пустое пространство окна Animation. После нажатия клавиши "пробел", Вы можете обнаружить, что ваш персонаж на игровой сцене начинает анимироваться.

Скорее всего смена кадров у Вас происходит очень быстро, и чтобы исправить эту проблему, необходимо ЛИБО вручную увеличить расстояние между Вашими кадрами, ЛИБО снизить частоту кадров в секунду. Обычно используют второй вариант.

Для этого открываем меню в правом верхнем углу(три точки), и ставим галочку на Show Sample Rate. А дальше снижаем значение кадров в поле Samples, например, до 12.

Отлично. Анимация состояния покоя idle готова! Теперь создадим вторую анимацию, бег. Для этого в окне Animation жмём треугольничек, напротив названия Вашей анимации, и в выпадающем списке жмём Create New Clip. После чего прописываем название Вашей анимации бега, например run, и сохраняем.

После чего была создана новая и пустая анимация бега. Теперь всё так же как и в предыдущем примере, перетаскиваем кадры бега в окно Animation, уменьшаем количество кадров, и всё. Таким же образом создаём анимацию прыжка, с названием, например, jump.

После всех проделанных манипуляций, у нас должно получится 3 анимации(idle, run, jump) и один контроллер(Animator) Player.

Контроллер Анимаций (Animator)

Теперь поработаем с контроллером анимаций. Открываем наш контроллер либо через вкладку Window - Animation - Animator, либо кликнув 2 раза по нашему аниматору Player в окне Project. Откроется окно Animator, которое будет выглядеть примерно так.

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

Например, от состояния покоя idle анимация может быть переключена на анимацию бега run. И это нам нужно указать через стрелочки. Для этого правой кнопкой мыши нажмём на анимацию idle. Далее в выпадающем списке жмём Make Transition, и далее указываем к какому блоку будет вести стрелочка. Укажем на блок run. Ура, стрелочка прехода создана. Создаём такие же стрелочки и между другими анимациями. У Вас должно получится так:

Так же обратите внимание на блок Any Stay, что означает Любое Состояние. Например, чтобы не создавать много стрелочек от множества анимаций к анимации jump, можно сделать всего одну стрелочку от Any State. Это будет тоже самое.

Теперь настроим наши переходы. Для этого жмём на любую БЕЛУЮ стрелочку, и в окне Inspector проводим следующие настройки:

• В поле Has Exit Time убираем галочку, чтобы анимация прерывалась сразу же, как произойдёт смена анимаций на другую.
• В поле Transition Duration указываем значение 0, чтобы переход между анимациями был не плавный, а мгновенный.

Такие же настройки нужно проделать со ВСЕМИ БЕЛЫМИ стрелочками.

Готово! Теперь необходимо создать условия, при которых будет осуществляться переход из одной анимации к другой. Для этого создадим две переменные. Одна переменная будет хранить информацию о том, бежит ли наш персонаж - если да, то будем воспроизводить анимацию бега. А вторая переменная будет хранить информацию о том, находится ли наш персонаж в прыжке - если да, то воспроизводим анимацию прыжка.

Создадим эти две переменные с названиями moveX и Jumping с типами Float и Bool соответственно. Для этого в этом же окне выбираем Parametrs, жмём на плюсик, и выбираем тип. Далее указываем название этих переменных.

Переменные созданы, теперь необходимо создать 5 условий перехода, для каждой белой стрелочки. Приведу пример, как создать условие перехода с idle на run. Для этого жмём на белую стрелочку перехода между этими анимациями, и в окне Inspector находим отдел Conditions, в котором указываем, что переход осуществляется тогда, когда переменная moveX имеет значение больше чем 0.1 - то-есть находится в движении по оси X:

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

• От run к idle: переменная moveX имеет значение меньше чем 0.1
• От Any State к jump: переменная jumping имеет значение true.
• От jump к idle: переменная jumping имеет значение false.
• От jump к run: переменная jumping имеет значение false.

Запуск анимаций через скрипт

Мы почти завершили. Отсалось совсем немного. Теперь нам необходимо в эти переменные занести данные из нашего скрипта C#, во время передвижения персонажа и прыжка.

Для этого откройте свой C# скрипт, в котором прописана ваша функция передвижения персонажа, и для начала объявите переменную anim, в котором будет хранится ссылка на наш контроллер.

public Animator anim;

Далее в методе Start() или Awake() присвоим ссылку к нашей переменной:

anim = GetComponent<Animator>();

Отлично, теперь с помощью метода SetFloat() установим нашей переменной moveX значения полученное от нашего передвижения Mathf.Abs(Input.GetAxisRaw("Horizontal")) по модулю:

anim.SetFloat("moveX", Mathf.Abs(Input.GetAxisRaw("Horizontal")));

Теперь как только персонаж начнёт своё движение, будет воспроизведена анимация бега. А если персонаж остановится, то анимация бега перейдёт в состояние покоя.

Теперь работа с прыжком:

В вашем скрипте должна быть переменная, которая отвечает за то, находится ли персонаж на земле или нет. У меня эта переменная называется isGround. Необходимо проверять, если персонаж на земле, то в переменную Jumping заносим false, и анимация прыжка не воспроизводится. А если персонаж находится не на земле, то нужно в переменную Jumping записать true - которая и воспроизведёт анимацию прыжка:

if(isGround)
{
    anim.SetBool("Jumping", false);
}
else
{
    anim.SetBool("Jumping", true);
}

На это всё! Поздравляем, анимация готова.

Важно: В некоторых случаях, в зависимости от анимации прыжка, нам необходимо отменить циклическое воспроизведение анимации прыжка. Поэтому нажмите на стрелочку, исходящую от Any State ведущая к jump, и в окне Inspector в поле Can Transition To поставьте галочку.

Теперь уже точно всё! Надеюсь мне получилось объяснить принцип создания спрайтовой покадровой анимации. Так же напомню, что существует так же и костная анимация, которая так же довольно часто используется. Поэтому, если Вам интересна данная тема, то можете посетить наш гайд по созданию костной 2д анимации.

Если возникли вопросы, задавайте их в комментариях. И не забудьте поставить лайк за столь большой труд :)