Использование GAF для анимации

В этой статье я бы хотел поделиться с вами опытом по использованию такого инструмента как GAF, так как именно наличие данного инструмента позволило нам не ограничивать себя рамками обычных «спрайтовых» анимаций, и создавать для проекта полноценные анимации в любых требуемых количествах, не боясь в итоге получить огромное кол-во атласов и 5fps на выходе, но обо всем по порядку.

Предыстория

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

В целом сам Flash был для нас неплохим выбором, так как все анимировалось именно в нем и мы могли сразу использовать всю подготовленную графику и анимации, без каких либо конвертаций и экспорта. Однако после того как было собрано несколько первых уровней, стали заметны явные проседания fps, даже при том что сами уровни были достаточно простыми относительно тех, которые планировалось ввести в дальнейшем. К счастью мы очень быстро осознали ошибку, стало очевидно, что добиться высокой производительности используя векторную графику и рендер без GPU — невозможно, а потому было решено использовать фреймворк Starling.

Для теста и сравнения результатов, мы решили пересобрать на нем наш первый уровень. Но при переходе на Starling мы естественно теряли возможность напрямую использовать векторные Flash анимации, и сразу встал вопрос: Как эти анимации экспортировать? Первым ответом на это стало использование экспорта в стандартные спрайтовые анимации, однако как выяснилось, для нас это совершенно не подходит…

Проблемы спрайтовых анимаций

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


Если в вашем проекте анимаций не много, они компактные и короткие, то никаких проблем не возникает, однако в нашем проекте анимации было ОЧЕНЬ много, и порой не просто что-то вроде «ходьба-персонажа в 40 кадров», а целые анимированные сценки шириной во весь экран и длительностью по 200 кадров, а то и больше! Только представьте, 200 кадров анимации, где каждый кадр имеет размер, к примеру, 1920*600… В итоге после того как мы экспортировали таким образом всего несколько анимаций из первого уровня, стало очевидно что нам нужен какой-то другой способ, так-как объем занимаемого места этими анимациями, выходил за всякие допустимые рамки. Реальный пример, анимация «бездействие-главного-героя», 440 кадров, размер каждого кадра 70px*140px, общий объем занимаемого места 3.5Mb, и это всего лишь одна «базовая» анимация!

Знакомство с GAF

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

Достаточно непродолжительный серфинг в сети привел меня на сайт инструмента GAF, я пробежался по мануалам, взглянул на примеры и мне стало ясно — это то, что нам надо! Конвертация анимаций через GAF предлагала вполне логичное решение проблем, вместо того чтобы сохранять каждый кадр в виде отдельной картинки, GAF сохранял лишь один атлас с изображением каждого используемого в анимации элемента, а саму анимацию сохранял в отдельном файле собственного формата, в котором хранилось описание всех трансформаций, этих элементов. Я побежал загружать GAF-Converter…

Использование GAF

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

После этого полученный zip архив можно было использовать в проекте, с помощью библиотеки GAF для Starling(также есть библиотеки для unity, cocos2d, stagexl) не составляло трудностей создать и отобразить необходимую анимацию, так как предоставляемое API было хорошо документировано и во многом совпадало с «родным» MovieClip используемым во Flash. Однако несмотря на то что действия по экспорту были очень простыми, хоть и несколько более сложными чем обычный экспорт в последовательность картинок, результат был виден мгновенно.

Во-первых объем занимаемого места экспортированной анимации с помощью GAF ни шел ни в какое сравнение с местом занимаемым покадровым экспортом, например, если анимация «бездействие-главного-героя» раньше занимала 3.5Mb места, то экспортированная с помощью GAF она занимала всего 100Kb, то есть в 35 раз(!!!) меньше места!

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

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

Пример бандла, в одном атласе уместилось 42 анимации


Таким образом GAF предоставляет огромные преимущества, основные их которых это — экономия места, высокая производительность, простота использования и отлично документированное API.

Итоги

После того как первый уровень нашей игры был пересобран с использованием связки Starling + GAF, проблемы с производительностью не просто бесследно исчезли, но и был очевиден заметный запас на будущее. Использование же GAF, позволило нам разместить огромное количество анимаций, в разумных пределах, мы больше могли не бояться, что нам не хватит места, или что анимация слишком большая, так как GAF отлично справлялся даже с огромными анимациями длительность более 3000 кадров. GAF это идеальное решение если вы создаете анимацию во flash/animate.

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



Сайт GAF Media

Чтобы посмотреть gaf в деле поиграйте в демку нашего квеста

Играть онлайн в Shapik:the quest demo

Скачать в Shapik:the quest demo(win)