King, Witch and Dragon. Devlog #4

Главный герой замоделен, риг готов, пришло время анимировать. Это достаточно большая тема, даже в контексте одного персонажа, по этому я решил разбить её на 3 части. Первый пост посвящён стандартным анимациям персонажа, которые создаются в программе для работы с 3D-графикой и импортируются в игровой движок для дальнейшей настройки.

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

Подготовка

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

Мой выбор пал на 2 книги, о которых я много слышал от коллег и читал много положительных отзывов в интернете:

King, Witch and Dragon. Devlog #4

Первая книга The Animator's Survival Kit расказывает о фундаментальных основах анимации и её часто ставят на один уровень в Диснеевской The Illusion of Life.

Вторая книга Game Anim от бывшего аниматора Naughty Dog рассказывает об анимациях в контексте современных технологий и игр в частности. Также автор расширяет 12 фундаментальных принципов анимации и добавляет 5 новых пунктов, которые появились, благодаря специфике игровой анимации.

Вооружившись базовыми знаниями, я принялся применять их на практике.

Ключевые анимации персонажа

В платформерах персонаж бóльшую часть времени бегает и прыгает. Иногда он останавливается, чтобы дождаться очередной команды от игрока. Таким образом у нас есть 3 ключевых анимации:

  • айдл (ожидание, стояние на месте)
  • бег
  • прыжок

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

Айдл

Как сказал Джонатан Купер в своей книге

There's nothing more of a wasted opportunity than lazy bouncing or breathing idle

Jonathan Cooper

что можно перевести примерно как "Нет ничего хуже лениво-подпрыгивающего или дышащего айдла".

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

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

Бег

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

Когда я выложил эту gif-ку в сообществе игры ВКонтакте, а также в теме Screeshot Saturday, то получил фидбэк, что рука с мечом неестественно вытягивается при движении вперёд. Изначально идея была таким образом показать вес меча, но видимо я немного перестарался, по этому я подкорректировал анимацию, это будет заметно на более поздних gif-ках.

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

Прыжок

Для прыжка я сделал 3 зацикленных анимации:

  • движение вверх
  • зависание в врехней точке
  • движение вниз
King, Witch and Dragon. Devlog #4

В движке я создал Animation Blend-Tree и в нём сделал плавный переход между анимациями, в зависимости от вертикальной скорости персонажа:

King, Witch and Dragon. Devlog #4

Аддитивные анимации

Давайте посмотрим, как эти 3 ключевых анимации выглядят в действии...

Вроде бы неплохо, но чего-то не хватает...

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

Когда мы начинаем бежать с места, мы сначала подаёмся вперед, наклоняем туловище, чтобы наше тело начало "падать" вперёд и чтобы гравитация помогла нам начать ускорение.

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

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

Можно было было бы сделать полноценную анимацию под каждый из этих случаев (в некоторых ААА играх так и сделано), но что если у нас, например, несколько анимаций бега? Если делать анимации разгона и торможения для каждой версии бега, то это значительно увеличивает количество необходимых анимаций, а также усложняет наш Animator Controller.

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

King, Witch and Dragon. Devlog #4

При этом мы можем её проигрывать при переходе из любого айдла в любой бег. В моём случае получилось так:

Наклон для рывка в начале и небольшой наклон при остановке, плюс шарф отлетающий вперёд, т.к. он более лёгкий.

Аналогичный подход используется для создания аддитивной анимации приземления:

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

Движение по наклонным поверхностям

В зависимости от того, какую игру вы делаете, вам может понадобиться реализовать движение по наклонным поверхностям. Например, в Celeste все повержности строго горизонтальные или вертикальные, в Iconoclasts есть склоны под углом 45 градусов, а в Ori and the Will of the Wisps очень много органических и скругленных поверхностей. Я решил реализовать вариант с движением по произвольным поверхностям, которые могут быть наклонены под любым углом и могут менять наклон в реальном времени (близко к тому что сделано в Ori).

Для достижения такого результата используется несколько техник. Для начала я решил проверить как скелет персонажа "дружит" с инверсивной кинематикой (inverse kinematics или просто IK). Я использовал плагин FinalIK и компонент Grounder. Тестовый прогон на качающемся кубе оказался вполне удачным:

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

  • нижняя нога неестественно вытягивалась, стараясь "дотянуться" до поверхности
  • стопы поворачивались под нездоровым углом
  • становилось заметно, что торс всегда в одном положении, нет переноса веса и контр-баланса
  • меч иногда зарывался в землю

Те же проблемы проявлялись и при беге:

Чтобы решить эти проблемы я сделал 2 дополнительные анимации бега: по склону вверх и по склону вниз. Затем, я добавил их в Animation Blend-Tree и начал смешивать их в зависимости от угла наклона поверхности. Вот что получилось:

То же самое я сделал для айдла:

King, Witch and Dragon. Devlog #4

Вот так выглядит двухуровневый Blend-Tree:

King, Witch and Dragon. Devlog #4

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

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

Бонус: Двойной прыжок

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

Напомню, что персонаж может осуществлять двойной прыжок с помощью крыльев летучей мыши:

King, Witch and Dragon. Devlog #4

Вот так выглядит анимация крыльев, замедленная в 2 раза:

А вот так она выглядит в игре, совмещённая с анимацией прыжка:

Что дальше?

В следущем девлоге я расскажу о процедурных анимациях способностей главного героя:

  • Движение по стенам и потолку с помощью паучьих лап, которые будут процедурно ставиться на поверхность с помощью инверсивной кинематики.
  • Использование щупалца в качестве крюка-кошки: процедурная генерация меша + анимация.
  • Анимация хвоста змеи, при движении в изогнутых тоннелях во время способности "рывок".

Интересно? Тогда подписывайтесь на меня в Instagram и Twitter, а также вступайте в группу VK, в которой я публикую апдейты и материалы по проекту, до того как они попадают сюда.

Спасибо за внимание!

294
40 комментариев