Создание анимации к игре WitchCraft

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

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

01 clouds

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

Мы не использовали никаких игровых движков, писали игру с нуля, подключив для работы с графикой XNA Framework, на котором можно реализовать поддержку спрайтовой анимации. Поэтому мне в срочном порядке необходимо было научится создавать спрайты и так называемые Sprite Sheets. Что такое Sprite Sheets и как их оптимизировать очень наглядно показано в этом видео:

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

  • Илья рисует в Photoshop'е предмет, персонажа или элемент интерфейса, который нужно за анимировать и передает исходный файл .PSD мне.
  • В исходном файле Photoshop я разделяю подвижные элементы на слои, группирую их, настраиваю связи между ними, расставляю Anchor points ("якорные" точки) и т.п.
  • Экспортирую получившийся .PSD файл в After Effects (программу для создания спецэффектов и анимации)
  • Там происходит магия =)
  • Получившийся результат покадрово экспортируется в виде последовательности PNG картинок в free-версию программы Texture Packer, которая помогает создавать достаточно компактные Sprite Sheets.
  • В Texture Packer генерируем специальный XML документ, в котором содержатся координаты каждого кадра и их последовательность. И с помощью программы Notepad++ вносим некоторые изменения в разметку этого XML-документа, чтобы его смог прочитать наш движок.
  • Получившийся результат отдаем Антону, чтобы включить анимацию в игру.

02 soft

Вот видео (от разработчиков Texture Packer), которым не могу не поделится - в нем рассказывается, как такой метод создания спрайтовой анимации оптимизирует работу графической подсистемы:

Создание анимации в After Effects это очень большая тема для статьи и тут все зависит от того, что хочется сделать. В интернете полно уроков на русском и английском языке, которые рассказывают, как делать тот или иной вид анимации. Я лишь поделюсь теми ресурсами, которые оказались полезными для меня и на которых я нашел информацию, как сделать тот или иной эффект:

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

03 magic 03 kolba 03 fireplace

В WitchCraft есть замечательный режим, который называется Жукобойня. В этом режиме нужно на время давить жуков или других магических тварей.  

Для каждого эпизода (а у нас их пока что 5) было нарисовано по 5 разных существ - итого получается 25. При чем это были не только жуки, у которых 6 лап, были "8 лапые" пауки, комары, мухи с крыльями и обычные мышки. И все они двигаются по-разному - нет одной модели их передвижения. Их приходилось анимировать покадрово и вручную.

05 frog  05 muha  05 mouse 02  05 komar 
 05 guk  05 mouse 01  05 mega bug  05 muha 02

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

spell 01
   Магический град   
spell 04
     Двойной урон    
spell 05
        Ускорение        
 spell 06
Заморозка
 spell 07
Неуязвимость
 spell 08
Землетрясение

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

07 coin   07 cloud

Также на пути у Рудгрид могут встретится не только грозные облака и деревья, но и птицы:

08 bird

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

09 witch small metla 09 witch metla 09 witch top 10 witch stupa

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

Яндекс.Метрика