Как сделать 2D-анимацию в Unity с минимумом кода: кадры и скрипты
Инди-играм может не хватать визуальной привлекательности. Разбираемся, как оживить персонажей и фоны с помощью самой простой анимации.
Что можно анимировать в Unity
Анимация позволяет оживить игру даже с самой примитивной графикой. Например, персонаж для игры из этой статьи выглядит вот так:
Пишет о разработке сайтов, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
В нём нет ничего привлекательного, это набор простых фигур. Посмотрите, как он изменится, если добавить анимацию:
Теперь персонаж стал чуть более живым и даже забавным — на него гораздо приятнее смотреть, хотя внешне он не изменился.
С помощью анимации можно оживить и фоны. Например, сделать:
Анимацию добавляют и в интерфейсы: переливающиеся шкалы здоровья, поблёскивающие кнопки. Даже вращающаяся шестерёнка вместо простой надписи «Загрузка…» украсит проект.
Мини-игра к этой статье и все ассеты выложены в репозитории на GitHub. Если хотите научиться делать игры с нуля, рекомендуем записаться на курс «Профессия разработчик игр на Unity».
Анимация «из коробки» в Unity
В Unity создают анимацию с помощью:
Скрипт изменяет параметры объекта при определённых условиях: обновлении масштабов, добавлении цвета и так далее.
Что-то более продвинутое делается с помощью покадровой анимации — когда для разных состояний объекта (стоит, идёт, в прыжке, атакует) создаётся несколько спрайтов (двумерных изображений), которые сменяют друг друга с определённым интервалом.
И чуть более сложное — скелеты. Они позволяют использовать один спрайт, а потом приводить его в движение, изменяя положение отдельных частей.
Мы рассмотрим только скриптовую и покадровую анимацию в Unity, потому что для скелетной требуются специальные ассеты, и она куда сложнее.
Анимация вращения с помощью скрипта в Unity
Когда вы создаёте персонажа и добавляете ему спрайт, а потом управляете им, герой всегда смотрит в одну и ту же сторону, даже если движется в другую.
Исправить, создав отзеркаленную версию спрайтов, — не лучший вариант, потому что придётся делать лишнюю работу. Правильнее написать скрипт, который вращает объект.
Создание игры на ваших глазах — часть 7: 2D-анимации в Unity («как во флэше»)
В этой статье поговорим о 2D анимациях в Unity. Я расскажу о своем опыте работы с родными анимациями в юнити, о том, насколько тайм-лайны похожи на флэшевские, об управлении анимациями, event’ах, вложенности, и о том, как художник справляется с анимированием.
Для начала, немного теории.
В Unity есть две сущности:
1. Анимация (то, что отображается в окно «Animation»)
2. Mechanim дерево анимаций (то, что отображается в окне «Animator»).
Ниже я немного расскажу, что это такое и как нам может приходиться (или не пригодиться).
Animation
Итак, анимация. По сути — это таймлайн с ключевыми кадрами. Здесь вы можете двигать, поворачивать, масштабировать ваши объекты. Естественно, можно рисовать кривые и пользоваться разными изингами. И даже управлять любыми (в т.ч. самописными) их свойствами. То есть вполне можно написать компонент с float паблик-значением «яркость» и эту самую «яркость» анимировать наравне с x, y, z штатными средствами. Спрайты поддерживают покадровую анимацию.
Кстати, несмотря на то, что у каждой анимации есть FPS (поле «sample»), сами анимации к FPS не привязаны. Они привязаны ко времени. Т.е. если вы делаете анимацию с 5 FPS, где у вас объект двигается из точки А в точку Б с помощью задания двух ключевых кадров в начале и в конце, то в игре этот объект не будет двигаться ступеньками с 5 FPS. Анимация рассчитывается каждый кадр игры, а FPS внутри анимации сделан лишь для вашего удобства, чтобы вам не частить кадры.
Animator
Это — большая и сложная система, которая непосредственно управляет анимациями. То есть анимация — это просто файл (ресурс) с настройками ключевых кадров и сама по себе ничего не умеет. Вот именно компонент «Animator» — это то, что умеет играть эти анимации.
В самом же просто случае, ваш аниматор будет выглядеть так:
то есть содержать одну-единственную анимацию и никаких связей/переходов.
Начинаем шаманить.
Пока все понятно. Но давайте подумаем, как сделать что-то чуть более сложное?
Мой конкретный случай — у нас есть сугроб снега, в котором сидит заяц. Сугроб сам по себе шевелится:
Далее, мы хотим сделать такую анимацию:
1. сугроб, шевелясь, двигается влево
2. из сугроба выглядывает заяц (анимация пульсации останавливается):
3. сугроб двигается вправо
В принципе, ничего сложного. Анимируем пульсацию сугроба внутри объекта, внешним аниматором двигаем его влево, потом скрываем, вместо него показываем покадровую анимацию выглядывающего зайца, потом обратно. И все это на одном таймлайне (кроме «внутренней» анимации сугроба).
Но такой вариант мне не нравится его жесткостью. В первую очередь я считаю неправильным, что в таком варианте покадровая анимация вылезающего кролика оказывается на том же таймлайне, что и движение сугроба. Это значит, что если мы захотим сделать вариацию этой анимации, где сугроб будет двигаться по другой траектории, мы должны будем заново анимировать вылезание зайца. А если мы потом это самое вылезание захотим поправить, то нам придется делать это во всех анимациях, где оно используется.
Хотелось бы большей гибкости.
Есть другой вариант. Мы анимируем выглядывание зайца в отдельном объекте (так же, как мы сделали это с шевелением сугроба), а в основном тайм-лайне просто включаем этот объект (active) в нужный момент и анимация начинается.
Это уже гораздо лучше, но все равно не идеально. Ведь в таком случае мы должны в нашем основном таймлайне знать, какой длины анимация этого вылезания. Чтобы включить и отключить ее в нужный момент. А что если мы опять-таки поменяем эту анимацию и заяц будет дольше смотреть по сторонам? Да и вообще, в каких-то более сложных случаях нам будет еще сложнее уместить все в один таймлайн.
Идеально было бы иметь возможность поставить основной таймлайн на паузу, начать проигрывание вложенной анимации и снять его с паузы уже по окончании этой вложенной анимации (или по какому-то событию в ней).
То есть сделать так:
1. движение влево
2. прячем пульсирующий сугроб, показываем анимацию вылезания кролика, встаем на паузу
3. прячем анимацию вылезание кролика, показываем шевелящийся сугроб, двигаемся вправо
Что нам для этого понадобится? Unity позволяет добавлять на анимацию вызов кастомных юзер event’ов. Это именно то, что нам нужно! Осталось только правильно все написать.
Напишем метод для постановки на паузу. Кстати, в юнити нет такой прямой возможности. Для того, чтобы поставить на паузу анимацию, обычно применяется немного грязный хак с выставлением ее скорости в 0. Он в целом работает, правда, странности есть (об этом — в последней части статьи).
Где _animator — это переменная, в которой мы закешировали компонент » Animator «:
Если вы обратили внимание на скрин выше, над ключевым кадром, который я пометил цифрой «2» стоит небольшая вертикальная черта. Именно за ней скрывается вызов события (метода) «Pause»:
Стоит отметить, что в такие события можно даже передавать параметр. Поддерживаются string, float и объект из библиотеки (не со сцены).
Ок, на паузу мы поставили. Теперь задача — снять с паузы. Очевидно, это должна делать вложенная анимация. То есть доиграла анимация вылезающего кролика до конца, и прокинула наверх события «пошли дальше».
Этот метод ищет среди родителей компонент » GJAnim » и снимает его с паузы. Соответственно, ставим это событие на окончание анимации нашего кролика:
Profit!
Кроме того, все делается в пределах юнитевского UI и достаточно прозрачно для любого аниматора. Наш художник через час попадания ему в руки этого инструмента, уже во всю анимировал.
О багах Unity и сумасшествии.
Однако, не все так гладко. В какой-то момент, создав анимацию, мы увидели, что она ведет себя неправильно.
У нас была родительская (главная) анимация, которая показывала один объект (скрывала все остальные), вставала на паузу, в это время в этом объекте начинала проигрываться своя (вложенная) анимация, которая снимала родителя с паузы по окончании. Далее — показывался следующий объект и т.п.
Так вот, мы заметили, что кадры иногда проскакивают.
Долго-долго дебажили, много писали в лог… и вот что выяснили:
По видимому, в юнити есть какой-то стэк кадров/событий анимаций. И когда компьютер (редактор unity) подтормаживает, он может положить в этот стек сразу два кадра, чтобы в следующую итерацию выполнить их оба.
Это влечет за собой чуть ли не полностью неисправимый фейл. Мы ловили ситуацию, когда аниматор выполнял все действия с кадром и вставал на паузу (это ок), а потом в этот же кадр выполнял еще и следующий кадр. То есть за один кадр рассчитывал сразу два кадра анимации. И то, что в 1-м кадре было событие, ставящее скорость анимации в 0, не мешало ему рассчитать еще и следующий кадр, который, по видимому, уже лежал в стеке.
И если в анимации с кроликом этого бы никто не заметил (кролик бы вылез на пиксель не на том месте), то когда вы каждый кадр что-то прячете и показываете, тут может быть фейл.
На данный момент проблема выглядит неисправимой. Как мы справились? Поставили FPS таких анимаций в 20. Видимо, на таком FPS’е случая, когда юнити хочет просчитать два кадра за одну итерацию — не случается.
Но все равно, ситуация не очень. Получается, что при каких-то фризах на компьютере (или на очень тормозных), все равно игрок сможет словить сбой анимаций.
Как выполнить настройку анимированной модели персонажа в Unity3D?
Наверняка многим кажется достаточно сложным процесс создания и введения в проект анимированной модели персонажа. В этой статье мы хотим затронуть тему импорта 3D модели персонажа в Unity3D, его подготовку, импорт анимаций, настройку аниматора и простейший контроллер, который будет управлять движениями и анимацией персонажа.
И импортируем в проект:
Открываем в окне Project папку с персонажем, находим его модель, переносим в сцену.
Поскольку это модель из магазина AssetStore, она полностью настроена и готова к введению в игру. Тем не менее, важно убедиться, что всё настроено верно:
2. Во вкладке Animation у данной модели нет собственных анимационных клипов. Именно поэтому мы возьмем их с сайта mixamo.com:
Эти анимации можно свободно скачать, что мы и сделаем сейчас.
Humanoid – анимации легко можно использовать на любых Humanoid – персонажах. Поэтому не важно, создадите ли Вы свою анимацию или скачаете готовую – любой из вариантов будет работать с Humanoid – персонажем.
Я подготовил вот такой сет анимаций. Он включает в себя:
Обязательно выберите все файлы с анимациями и во вкладке Rig переключите их в режим Humanoid:
Пора настроить импорт каждой анимации в проект. Выделяем,например, walking и переходим во вкладку Animation:
1.Назначаем ключи старта и окончания анимации (поскольку каждый файл анимации идет отдельным файлом, обычно эти ключи автоматически стоят верно).
3.Устанавливаем галочку LoopTime- этот включенный параметр зацикливает анимацию при воспроизведении.
Аналогичным образом настраиваем остальные анимации. Не забываем нажимать Apply для того чтобы применить все изменения анимационного клипа.
Теперь в сцене выделим персонажа. Давайте посмотрим на компонент Animator, который присутствует на нем. Нам важны два поля:
Если Вы всё делаете, как и я – проблем с аватаром возникнуть не должно.
2. Controller – Это то, с чем мы и будем работать дальше. Анимационный контроллер – это своего рода схема, в которой мы определим, как именно воспроизводятся анимации, в каком состоянии какие из анимаций смешиваются друг с другом. Если сказать проще, то именно в контроллер мы будем отправлять сигнал о том, какая анимация должна воспроизводиться в данный момент. Но обо всём по порядку.
Давайте создадим анимационный контроллер: Правой кнопкой мыши кликаем в окне проекта. Create – Animator Controller.
Получится вот такой файл, я назвал его PersonAnimatorController:
Кликаем по нему дважды, откроется вкладка Animator:
Это и есть окно, в котором мы установим алгоритм работы наших анимаций. Давайте сразу создадим 3 состояния (ПКМ – Create State – Empty):
Выделив одно из состояний (например, idle), в окне Inspector мы можем заметить, что поле Motion сейчас пустое. Сюда необходимо поместить анимационный клип (тот, которому мы настраивали ключи Start-End, устанавливали Loop pose, и т.д.).
Поэтому, не снимая выделение с выделенного элемента, в окне Project находим файл с анимацией Idle, и из него перетаскиваем АНИМАЦИОННЫЙ КЛИП в поле Motion в окне инспектора.
Таким же образом устанавливаем клипы в остальные состояния (walk, run).
Теперь в левой части окна Animator переходим во вкладку Parameters:
Создаем Int – параметр, назовем его “state”. Это переменная, которая будет определять, в каком состоянии сейчас находится аниматор персонажа (какое из наших трёх состояний воспроизводится в данный момент). Этим параметром в будущем мы будем управлять из скрипта.
Теперь необходимо создать переходы между состояниями.
Кликаем на Idle правой кнопкой, жмем на Make Transition, после чего наводим курсор на состояние Walk.
Сразу сделаем переходы между всеми состояниями, и туда, и обратно.
Теперь переходим к настройке каждого перехода. Первый переход:
Выделяем его, смотрим в правую часть окна Animator:
Has Exit Time – снимаем галочку. Этот параметр, при включенном состоянии, сначала ждет, пока текущая анимация отыграет полностью, а уже после – совершает переход в другое состояние. Нам это не нужно, т.к. переходы у нас будут в конкретные моменты, когда наша переменная state меняет своё значение.
В Conditions добавляем условие перехода:
Дословно это выглядит так: “Если state = 0”. Если представить это в виде кода:
То есть, выбранный переход сработает в том случае, когда значение state будет равно “1”.
Обратный переход из Walk в Idle настраиваем так (не забываем во всех переходах отключать Has Exit Time):
По аналогии, нужно сделать переходы:
Idle – Run (state equals 2)
Run – Idle (state equals 0)
Walk – run (state equals 2)
Run – Walk (state equals 1)
Не забудьте выделить персонажа в сцене и переместить созданный анимационный контроллер в поле Controller в компоненте Animator:
Теперь, если запустить игру и, выделив персонажа, в окне аниматора поменять значение state, мы увидим, что анимации воспроизводятся:
Вы можете заметить, что персонаж немного смещается и разворачивается. Это происходит, потому что мы не настроили смещение и поворот за счёт анимации. Делается это в окне импорта каждого файла анимации, во вкладке Animation. Обычно я настраиваю анимации так, чтобы они никак не влияли на перемещение или поворот. Установите флажок во всех опциях Bake Into Pose.
А так же Based Upon в Original.
Теперь создадим скрипт, чтобы управлять анимациями персонажа по нажатию на клавиши.
Называем его PersonController. Перетяните скрипт на персонажа, чтобы он отобразился в списке компонентов под компонентом Animator:
Открываем скрипт. Пишем код:
Теперь, если запустить игру, персонаж начнет реагировать на нажатия на клавиши.
На этом пока всё. Это базовый механизм настройки персонажа, аниматора, и простой способ воспроизвести анимации. На основе этого принципа можно анимировать многие игровые объекты, не только персонажей. Но для того, чтобы сделать качественное смешивание анимаций и не превратить Анимационный контроллер в мешанину из огромной кучи состояний и переменных, которыми сложно управлять, когда их много – существуют очень удобные инструменты смешивания в Animator (BlendTree), а так же возможность создать машину состояний внутри одного состояния. Но об мы расскажем в отдельной статье.
Создание анимации в Unity3d на C#
Если вы читали мои предыдущие статьи по Unity3D, то должны помнить, что мы научились создавать объекты на 3D-сцене, а также управлять с помощью C# ими. Однако, если вы их не читали, то не волнуйтесь: эта статья вам даст все необходимые знания для создания независимого проекта на Unity3D. Итак, в этом материале мы научимся создавать простую анимацию на Unity3D, а также запускать её с помощью C#.
Я собираюсь использовать Unity3D версии 5.5.1f1. Для редактирования скриптов на C# подойдет любой текстовый редактор, лично я предпочитаю Notepad++, но можно задействовать как встроенные средства юнити, так и обычный блокнот.
Первое, что нам нужно, это новый проект в Unity, и на рисунке 1 мы видим настройки, которые я выбрал для этого примера. Вы также заметите, что в окне настройки проекта есть вкладка «Начало работы»; она приведет вас к отличным учебникам, примерам и массовому сообществу Unity – именно там можно также всему научиться, если вы хорошо владеете английским языком.
Рисунок 1: Настройка нашего проекта
Рисунок 2: Создание 3D-объекта в нашей сцене
Как мы видим на рисунке 2, я добавил куб к сцене. Далее нам нужен контроллер анимации, анимация, а также скрипт C#. В представлении активов внизу сцены давайте создадим все, что нам нужно, щелкнув правой кнопкой мыши на панели, затем:
Как только они появятся в нашей сцене, все должно выглядеть так, как показано на рисунке 4:
Рисунок 4: Созданные элементы
Во-первых, мы создадим состояние, которое из кода, который мы выполним, заставит объект вращаться. Чтобы создать это состояние, дважды щелкните по контроллеру анимации. После этого у вас будет примерно такой вид (на рисунке я ушел немного вперед):
Рисунок 5: Контроллер анимации с созданными состояниями
Два состояния, которые я уже создал, называются состояниями «Normal» и «MouseDownState». Обратите внимание, что сначала я создал нормальное состояние, и вы можете создать состояние, щелкнув правой кнопкой мыши, затем нажмите «Create State», а затем «Empty».
Теперь, если вы посмотрите между двумя созданными состояниями, мы увидим две соединяющие белые линии со стрелками на них. Они называются Tranisations, и для их создания щелкните правой кнопкой мыши состояние и выберите «Make Transition». Далее надо немного отредактировать: нажмите переход и снимите флажок «Has Exit Time». На рисунке 6 показан пример того, что вы увидите:
Рисунок 6: Выбранный переход и Has Exit Time
Если убрать галочку с опцией «Выйти», это не позволит автоматически перейти на «Нормальное» состояние «MouseDownState». Теперь, когда у нас есть базовый макет нашего контроллера, давайте создадим анимацию. Но, прежде чем мы отходим от представления контроллера анимации, нам нужно добавить анимацию в «MouseDownState».
Рисунок 7: Окно анимации, с добавлением свойства Rotation в нашем списке анимаций
Если вы нажмете кнопку «Add Property», вы увидите всплывающее окно, которое у нас есть. Оттуда добавьте свойство вращения; теперь давайте приступим к созданию ключевого кадра, который завершит анимацию. Сначала разверните свойство и переместите маркер текущего времени в позицию по вашему выбору (красная линия), а затем отредактируйте одну из позиций x, y или z так:
Рисунок 8: Создание ключевого кадра в нашей временной строке анимации
Хочу заметить, что использование временной шкалы очень похоже на то, как мы работали с ней при создании анимированного баннера html5 в Google Web Designer или анимации на флеш в Macromedia Flash Professional 8.
После того, как вы добавили ключевые кадры во временную строку, теперь мы можем перейти к скрипту C# и заставить наш куб вращаться, когда нажмем на него.
Из кода видно, что можно получить многие объекты, свойства и все остальное, что нам нужно для построения нашей игры/приложения. Если вы затем запустите сцену и щелкните 3D-объект, мы увидим вращение.
Если вы только начинаете работать с Unity3D, то вам придется многому научиться. Но, когда вы освоите основы, все будет весело, даже если вы просто используете Unity в свое свободное время. Есть вопросы? Пишите.
статьи IT, Unity3d, анимация, си шарп