Больше, чем «последовательность PNG»: как создавалась 2D-анимация для Tangle Tower

Рассказ разработчика игры.

Разработчик Том Виэн в треде в Твиттере рассказал о поэтапном создании анимации для Tangle Tower. Он кратко описал каждый шаг, который делают разработчики, чтобы персонажи в игре начали двигаться. Также Виэн поделился инструментами, которые команда применяет в рабочем процессе. Например, вся анимация рисуется во Flash. Мы выбрали из треда главное.

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

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

Затем эти статичные позы импортируются в Unity в формате PNG. После для каждого диалога подбирается набор поз, которые помогут правильно выразить персонажа. Герои немного покачиваются, когда произносят фразу — это добавляет динамики в разговор.

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

Когда черновой вариант готов и согласован, начинается работа над финальной версией каждой анимации.

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

Но есть проблема, которая связана с невозможностью проиграть Flash-анимацию внутри Unity. Чтобы справиться с этим, разработчики используют FlAn Exporter, который Виэн создал ещё в 2012 году.

FlAn Exporter разбивает изображение из Flash на разные части и сохраняет их в виде PNG. Также он сохраняет всю информацию, которая нужна для того, чтобы восстановить анимацию. По словам Виэна, так файлы занимают намного меньше места, чем обычные PNG. Unity позволяет расположить все элементы в едином пространстве максимально плотно друг к другу. Для этого разработчики используют инструмент TexturePacker.

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

Ниже представлена анимация с UV-данными. Когда вы видите мерцание, это значит, что происходит смена одной части персонажа на другую.

Затем разработчики накладывают элементы из набора, созданного ранее. При экспорте авторы могут вручную регулировать размер частей. Благодаря этому финальная анимация получается настолько качественной.

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

Несмотря на движения, персонажи всё ещё выглядят статично. Чтобы исправить это, разработчики применяют эффект boiling, который позволяет имитировать особенность классической анимации — в каждом новом кадре форма объектов немного отличается, из-за чего изображение «дрожит».

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

И разработчикам пришлось создавать таким способом все 385 разговоров в игре.

#анимация #опыт