Как анимировать 2D-персонажей в Unity 2022 LTS

Помимо 2D-освещения, для создания скелетного анимированного персонажа в Happy Harvest использовались такие техники, как риггинг лица персонажа для создания различных выражений, библиотеки спрайтов для вариаций персонажа и Sprite Swap для переключения между спрайтами, прикрепленными к одной и той же кости в процессе анимации.

Перспективные соображения

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

Для персонажа существует три набора анимации: Вправо (или "вбок"), вверх и вниз. Персонаж также переворачивается для анимации с левым или правым лицом.

В этом есть определенный компромисс. Если персонаж стоит лицом вправо и держит лейку в правой руке, то при переворачивании персонажа лицом влево лейку придется поменять местами.

Обработка вариаций для каждого направления

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

Общие правила 2D-анимации

Вот несколько приемов из демонстрационного ролика для создания ригидного и анимированного персонажа:

Нарисуйте персонажа в нейтральном положении с прямыми руками и ногами. Если части тела согнуты, это может вызвать проблемы при анимации.

Установите разрешение немного выше, чем предполагает показатель Pixels per Unit(PPU) в вашей игре. В исходном состоянии разрешение может выглядеть хорошо, но вращение и растягивание изображений может вызвать пикселизацию.

Если вы широко используете 2D-освещение в своей игре и хотите максимально использовать карты нормалей, не рисуйте свет и тени на спрайте. Вместо этого рисуйте ненаправленные тени. Эта техника называется ambient occlusion. Ваш спрайт будет выглядеть лучше, но лучше не использовать направленный свет, например солнечный.

Слои частей тела, поменянные местами с помощью функции Sprite Swap, должны быть сгруппированы соответствующим образом. Например, все слои с положением рта

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

Процесс работы с PSD

Пакет 2D Animation позволяет импортировать рисунки персонажей прямо из Photoshop в Unity. Для этого пакет PSD Importer работает со слоистыми файлами PSD и PSB. Вы можете импортировать все слои персонажа в виде спрайтов и разместить их точно так же, как они были нарисованы в приложении.

При выборе импортированного PSD- или PSB-файла появляются опции, аналогичные настройкам импорта спрайтов, но с дополнительными опциями для 2D-анимации и риггинга. Вам нужно будет выбрать следующие ключевые параметры:

Импорт скрытых слоев: Этот параметр импортирует все слои из файла PSD или PSB, включая скрытые слои.

Отдельные спрайты (мозаика): Эта настройка доступна только в том случае, если для параметра "Тип текстуры" выбрано значение "Множественная". Он создает спрайты из импортированных слоев и помещает их в атлас текстур. Оставьте эту опцию включенной, если вы хотите создать персонажа.

Используйте в качестве рига: Эта опция генерирует префаб персонажа с той же иерархией и положением слоев, что и в PSD или PSB-файле.

Используйте группу слоев: Это добавляет группировку слоев из файла PSD или PSB. Включите его, чтобы сгруппировать части персонажа, например, части с заменой спрайтов.

В разделе "Управление слоями" можно просмотреть иерархию слоев, а также вручную добавить или удалить слои для импорта.

Вы можете создать скелет персонажа в редакторе Skinning Editor внутри редактора Sprite Editor. Начните с нажатия кнопки Create Bone (Создать кость), а затем щелкните левой кнопкой мыши в области главного окна. Первый щелчок создает центр кости, а второй отмечает местоположение кончика кости. Этот инструмент соединяет кости в цепочки и вставляет их друг в друга.

Используйте кнопку Edit Bone (Редактировать кости), чтобы уточнить кости. Кнопка Split Bone позволяет разделить кости на две части. Это хороший вариант для изготовления конечностей. Если вы создадите одну кость ноги и щелкните в том месте, где должно быть колено, кость разделится на бедро и икру.

Если вы посмотрите на файл PSD_Character_Boy.psd в Happy Harvest, то заметите несколько дополнительных костей, например, кость лица (face_bone). Они позволяют голове персонажа слегка поворачиваться, придавая ей почти трехмерный вид. Вы также можете посмотреть на кости, используемые для движения бровей и век, чтобы сделать персонажа более выразительным. Это эффективные детали, которые можно добавить, если главный герой разговаривает с NPC.

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

Чтобы убедиться в правильности иерархии, выберите кнопку Preview Pose и протестируйте несколько поз. Чтобы изменить положение костей, нажмите кнопку Сбросить позу на панели инструментов.

Чтобы назначить спрайты костям, вам нужно создать геометрию. Начните с нажатия кнопки Автогеометрия. Откроется небольшое всплывающее окно, в котором вы можете определить, как будет создаваться геометрия.

Рекомендуется установить все ползунки на ноль, чтобы максимально упростить геометрию. Включите опцию Weights, чтобы автоматически привязывать кости к спрайтам. Щелчок по кнопке Generate For All Visible создает и устанавливает веса костей для всех спрайтов. Чтобы сделать это для отдельного спрайта, дважды щелкните на нем. Это полезно для настройки геометрии некоторых спрайтов.

Чтобы полностью контролировать количество вершин и изгиб геометрии, вам придется редактировать сетку вручную с помощью инструментов в разделе "Геометрия".

Используйте как можно меньше вершин. Меньшее количество вершин позволяет сэкономить на производительности, поскольку положение каждой вершины должно рассчитываться на основе вращения костей. Меньшее количество вершин также способствует лучшему изгибу сетки, поскольку легче задать веса для меньшего количества точек. Кроме того, каждая целевая платформа имеет идеальное количество игровых вершин, так что оптимизация геометрии - это всегда хорошая идея.

Вес

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

Чтобы начать настройку весов, нужно определить, какие кости будут влиять на определенный спрайт. Нажмите кнопку Bone Influence и выберите спрайт. В небольшом всплывающем окне вы можете задать, какие кости влияют на выбранный спрайт. Установите только те кости, которые должны влиять на спрайт, а остальные удалите.

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

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

В окне Sprite Library Editor можно редактировать содержимое выбранного ассета библиотеки Sprite. Выберите ассет библиотеки спрайтов, а затем в окне инспектора выберите Open in Sprite Library Editor. Вы также можете открыть окно редактора библиотеки спрайтов через Window > 2D > Sprite Library Editor.

Актив библиотеки спрайтов группирует содержащиеся в нем спрайты по категориям и меткам и позволяет редактировать их содержимое в окне редактора библиотеки спрайтов. В Happy Harvest найдите LIBRARY_PSD_character_base, которая содержит фиктивный символ. После того как мы сделали примеры анимации, чтобы убедиться, что категоризация работает, мы создали вариации, например LIBRARY_PSD_character_boy. Поскольку каждый ярлык имеет соответствующую версию во всех библиотеках спрайтов, ссылающийся ярлык или спрайт может быть анимирован и корректно отображаться при замене одной библиотеки на другую.

Вы можете убедиться в том, что вариации имеют один и тот же риг или скелет, проверив разные PSD-файлы, например PSD_character_base и PSD_character_boy (совпадают кости и структура). Они также гнутся во время анимации.

Чтобы увидеть анимацию, выберите префаб персонажа, а затем выберите Prefab_character_base внутри Visual (рекомендуется включать визуальную часть персонажа в качестве дочернего GameObject и использовать корневой GameObject для коллизий или другой логики).

Первый кадр анимации, например, ANIM_character_idle_side, изменяет ключевые параметры для направления, для которого создается анимация. К ним относятся:

Значения спрайтового резольвера: Sprite Resolver - это компонент, прикрепленный к игровому объекту конечности, который позволяет легко менять местами спрайты одной и той же категории в библиотеке спрайтов. В этом случае при создании анимации выберите "боковые" версии разных спрайтов.

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

2D инверсная кинематика для начального положения цели: Рука, нога и ступня используют 2D Inverse Kinematics (2D IK) для расчета положения цепочки костей на основе целевой позиции. Вы можете увидеть, как сбрасывается целевая позиция этих GameObject'ов, посмотрев на элементы LimbSolver2D_Target.

Переход от анимации с правым лицом к левому в Happy Harvest осуществляется с помощью ANIM_character_face_left или ANIM_character_face_right. Единственный параметр, который они изменяют, - это масштаб родительского объекта GameObject. Изменение значения X на единицу или отрицательную единицу приводит к перевороту всего визуального ряда по оси X. Он используется в аниматоре, управляющем персонажем, о котором мы расскажем в следующем разделе.

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

В Happy Harvest, если вы откроете окно Animator или файл CONTROLLER_PSD_Character_base_prefab, вы увидите, что контроллер Animator для проекта уже настроен. Изучите слои на левой стороне, которые управляют различными частями тела. Голова может воспроизводить одну анимацию, а тело - другую, и так далее. Это дает больше возможностей без увеличения количества анимаций. Вот слои анимации в примере:

Голова: Этот слой используется для того, чтобы заставить персонажа моргать и оглядываться по сторонам. Он обозначен буквой A, чтобы показать, что это аддитивный слой. Как аддитивный слой, он смешивает анимацию головы (моргание и оглядывание) с анимацией других слоев, например, бездействия или ходьбы. Если бы этот слой был переопределенным, а не аддитивным, он бы не смешивал анимации для свойства, используемого одновременно несколькими другими анимациями.

База: Он используется для основных анимаций тела - ходьбы, бездействия и использования инструмента. Каждое состояние имеет шестиугольную форму, указывающую на то, что они являются машинами с субсостояниями. Если вы дважды щелкнете на IDLE, например, вы увидите, как параметры DirX, DirY и Speed используются в свойстве Conditions стрелок перехода для запуска перехода между анимациями в зависимости от скорости и направления движения.

Флип: Этот слой заставляет символ поворачиваться вправо или влево в зависимости от параметра DirX. Анимация, как уже говорилось, изменяет масштаб всего объекта GameObject, от масштаба X, равного единице, до отрицательного (переворот в направлении X).

Вы можете использовать вкладку Параметры (рядом со Слоями) для подключения Аниматора

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

Чтобы создать новую анимацию для главного героя, откройте окно анимации через Window > Animation > Animation.

Выберите префаб Prefab_character_base. При нажатии на опцию Создать новый клип из выпадающего меню с существующими анимациями создается новый анимационный клип. Клип анимации - это линейная запись того, как положение, поворот, масштаб и другие свойства объекта изменяются с течением времени. Ваша новая анимация будет автоматически добавлена к существующему контроллеру анимации в первом слое анимации.

Начните анимацию, нажав красную кнопку "Запись". Теперь все изменения, которые вы делаете с персонажем, записываются в клип анимации. Вы можете продолжать изменять анимацию, переключаясь на кривые или просматривая отдельные свойства. Начните перемещать кости под root_bone и посмотрите, как персонаж будет вести себя как марионетка.

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

Чтобы добиться такого же движения в игре, вам нужно будет анимировать вращение руки и предплечья одновременно. Совместить оба вращения и при этом сделать правдоподобное движение рукой - сложная задача. Инструмент 2D Inverse Kinematics, входящий в пакет 2D Animation, вычисляет вращения и позволяет цепочке костей перемещать их в целевые положения.

Сначала вам нужно добавить компонент IK Manager 2D на GameObject в верхней части иерархии, аналогичный компоненту Prefab_character_base. Этот компонент отвечает за управление всеми IK-решателями персонажа. Нажатие на кнопку + добавляет новый решатель. Решатель рассчитывает поворот костей в соответствии с целевым преобразованием.

В Happy Harvest мы добавили решатели проблем с конечностями. Это стандартный решатель для ног и рук, который может решать до двух костей и Effector (свойство, определяющее кость или трансформацию, для которых решает IK Solver). Вы можете увидеть, как они работают и организованы, посмотрев на игровой объект с именем LimbSolver2D в нижней части иерархии родительского игрового объекта персонажа.

Happy Harvest включает в себя несколько простых и полезных анимаций для фонового реквизита или других персонажей. Самое важное

- Свинья имеет простую настройку без 2D IK, которая хорошо подходит для декоративного элемента.

- Качающееся движение уличных фонарей (P_Lantern_Hanging) - это анимационный ролик, который воспроизводится в цикле и изменяет только вращение спрайта во времени, без необходимости в риггинге.

- Флипбук, или покадровая анимация, - это быстрый метод анимации второстепенных фоновых персонажей с меньшими накладными расходами, поскольку в нем используется меньшее количество кадров. Он также хорошо подходит для создания эффекта брызг воды.

- Эффект воды и ветерок, шевелящий кусты и деревья, - это спецэффекты, созданные с помощью Shader Graph и VFX Graph.

Если вы еще не сделали этого, обязательно скачайте эти продвинутые электронные книги, в которых рассказывается о разработке 2D-игр, рендеринге и визуальных эффектах (3D и 2D) в Unity:

2D-арт, анимация и освещение для художников

Введение в универсальный конвейер рендеринга для опытных создателей Unity

Окончательное руководство по созданию продвинутых визуальных эффектов в Unity

Кроме того, посмотрите другие наши 2D-демонстрации, Затерянный склеп и Dragon Crashers.

Больше ресурсов для продвинутых программистов, художников, технических художников и дизайнеров вы найдете в хабе "Лучшие практики Unity".