Сказ о том, как делать не стоит. Или, как я дважды сгорал на работе

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

Но, именно данный заказ натолкнул меня на мысль, что подобным опытом стоит поделиться. Дабы, не знакомые со сферой, знали, как работает внутренняя кухня, а коллеги, как делать не стоит и почему. К тому же, перспектива Top-Down специфическая и материалов по ней практически не существует. Когда я начинал работу, никакого опыта с top-down перспективой, кроме игровой, у меня не было, что подогревало интерес.

Надеюсь, данное чтиво окажется, если и не интересным, то, по крайней мере, познавательным.


Promo-art для проекта
Promo-art для проекта

Проект выполнен в жанре: Top Down Stealth - Action (уникальная смесь из серий Splinter Cell и Hotline Miami).

Движок: Love2D
Арт/Дизайн/Анимации выполнены в: Adobe Photoshop ( :) )
Художественное направление: Pixel art

Проект находится в Steam, и ознакомится с ним можно по данной ссылке: Intravenous

Скриншот из ранних версий
Скриншот из ранних версий
Скриншот из демо-версии
Скриншот из демо-версии

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

Я изготовил для проекта UI (редизайн/арт), эффекты, персонажей, анимации, тайлсеты, объекты, портреты, promo-art.
В общем, практически всё, что вы увидите в игре. Но в данной статье, речь пойдёт именно про анимации, т.к. они стали "камнем преткновения" всей разработки.


Немного о перспективе

Enter The Gungeon - хороший пример перспективы 3/4
Enter The Gungeon - хороший пример перспективы 3/4

Существует распространённое заблуждение, что "top-down" - это любой угол поворота камеры, в том числе несколько видов изометрии и, так называемая, перспектива 3/4.

Скетчи персонажей для освоения top-down перспективы
Скетчи персонажей для освоения top-down перспективы

Связано это с тем, что у ряда перспектив, не существует какого-то объединяющего понятия/термина отличного от "вида сверху" т.е. "Top-Down".
Отсюда и возникающие недопонимания при обсуждении того или иного проекта.

"Top-Down" (топ-даун) - это перспектива, камера в которой привязана исключительно над головой персонажа.
Примеры: GTA 1/2, Darkwood, Hotline Miami


Анимации

Скетчи персонажей в пикселях
Скетчи персонажей в пикселях

Техническое задание (оно же: Т/З) включало в себя создание довольно внушительного числа анимаций для нескольких персонажей (с рядом исключений). В следствие чего, мне было необходимо придумать способ, как упростить этот процесс на большинстве этапов разработки.

Первые потуги анимации в top-down перспективе
Первые потуги анимации в top-down перспективе

Список анимаций для всех персонажей включал в себя:

  • 5 видов основного оружия (Дробовик, Обрез, MP5, UZI, AK103, M4);

  • 5 видов второстепенного (Glock19, HS2000, P89, SW457, VP9);

  • 5 видов уникальных приспособлений (Тазер, Переносной ЭМИ глушитель, Светошумовая граната, Осколочная граната, Пустые магазины);

  • Ближний бой на всех видах оружия, в том числе и рукопашный;

  • Выбивание двери;

  • Idle анимации;

  • Анимации смерти;

  • Подбор и взаимодействие с предметами;

Наброски анимаций
Наброски анимаций

Уникальные для персонажа игрока:

  • Перенос тел;

  • Оглушение или добивание персонажей;

  • Использование отмычки;

  • Лаз через 2 вида препятствий;

  • Движение ползком;

  • Бег;

Обрез. Умелый.
Обрез. Умелый.

Помимо этого, существует 3 степени умения обращения с оружием (что увеличило список анимаций втрое!), которые мы условно назвали:

- Умелый; (персонаж игрока, профессиональные военные)
- Не умелый; (киллеры, наёмники)
- Абсолютно не умелый; (гангстеры, шпана)

Обрез. Неумелый.
Обрез. Неумелый.

Все 3 степени отличаются геймплейно:

- точностью при стрельбе;
- скоростью перезарядки;
- скоростью реакции на события;

Что отражается визуально, через:
- наличие лишних телодвижений при перезарядке;
- положение персонажа (стойку);

Обрез. Абсолютно неумелый.
Обрез. Абсолютно неумелый.

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

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

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


Шаблон

Анимация падения и подъёма
Анимация падения и подъёма

Шаблон персонажа включал в себя:

- Голову;
- Тело;
- Руки;
- Оружие;
- Дополнительные слои (ладони/детали);
-
Ноги/нижняя половина тела (отдельно);

Из которых покадрово собирался цикл анимации.


Экспорт

Существует 2 пути экспорта шаблонных анимаций.

Способ 1:

  • Все части шаблона - отделены (слоями);

  • Оружие легко заменяется (если позволяет анимация);

  • Одежда кладётся поверх слоёв в игре;

Pixel art со скелетной анимацией
Pixel art со скелетной анимацией

+ Упор делается на сборку составляющих внутри движка игры;
+ Гибкость, возможность осуществлять исправления, буквально, на лету;
- Требователен к инструментарию движка;

Не совсем корректный, но отличный пример: Garage: Bad Trip.
(На самом деле, она известна своей скелетной анимацией скрещенной с Pixel-art графикой, и даже существует статья на эту тему, но я её не нашёл) ("Пес-песа" - тебя помнят!)
Нашли их презентацию на эту тему!

Способ 2:

  • Все части шаблона склеены (монолитный слой);

  • Оружие заменяется исключительно в исходнике (PSD/GIF файле);

  • Одежда склеивается вместе с частями шаблона;

Spritesheet персонажа из Hotline Miami
Spritesheet персонажа из Hotline Miami

+ Упор делается на финализацию работ перед отправкой;
+ Лёгкий импорт в движок игры;
- Многократно возрастающий объём работы;
- РУТИНА;
- Не подходит проектам, в которых используется большой размер спрайтов;

Отличный пример: Hotline Miami

Как вы уже понимаете, нами был выбран 2 вариант. Почему?
На это повлиял целый ряд причин:

  • Отсутствие инструментария для анимации (игра разрабатывалась на Love2D);

  • Необходимость разгрузки программиста от лишней работы (переизбыток задач);

  • Тримминг текстур (упаковка кадров анимации в spritesheets);

  • Малый размер спрайтов;

А теперь поподробнее.

  • Заказчику было необходимо добиться максимальной производительности, чтобы проект смог быть запущен на устройстве любой мощности;

  • Разработка инструментария для анимаций не рассматривалась вовсе, т.к. эти силы разумно было бросить на встроенный level-editor (редактор уровней) и проработку ИИ (искусственного интеллекта) врагов;

Продолжение в части 2.