105. [game] Растеризация анимации. Использование библиотеки FPMovieClip

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/

Растеризация анимации – это перевод всех кадров анимации в набор растровых картинок. Зачем это нужно? Вы когда нибудь работали с гениальными flash-аниматорами, которые умеют рисовать красивую и эффектную анимацию(например анимацию игрового персонажа)? Так вот обычно такая анимация представляет собой бесконечное множество вложенных друг в друга MovieClip-ов. И управлять такой анимацией в коде ActionScript становится проблемно, а точнее нет возможности остановить-запустить, перейти на определенный кадр и т.д. Не давно была выпущена бета версия AIR 3.8 в которой появился новый метод stopAllMovieClips() у класса MovieClip, честно сказать толку от него мало, т.к. после такой остановки нет возможности восстановить проигрывание всех вложенных клипов. Есть и другая проблема – flash-аниматоры очень любят использовать различного рода фильтры, эффекты, векторную графику… А это все может привести к потере производительности Flash-приложения. Все эти проблемы решаются с помощью растеризации анимации. Ну и в догонку, если у вас создаётся большое количество копий игровых юнитов с анимацией – вы можете один раз растеризовать анимацию, и использовать одни и теже BitmapData-ы во всех юнитах.

Идея растеризации заключается в том, что необходимо сразу после создания объекта MovieClip, пройтись по всем кадрам и нарисовать каждый кадр на BitmapData. Очень важно чтобы смена кадров происходила по событию Event.ENTER_FRAME, потому что если вы будете делать gotoAndStop(), вы получите ошибку в случае если анимация содержит вложенные мувиклипы с анимацией, т.к. на них не распространяется действие метода gotoAndStop. Так же надо учесть тот факт, что на каждом кадре общий размер мувиклипа разный, и координата левой верхней точки тоже разная, если это не учитывать – вы получите BitmapData-ы которые могут не совпадать в анимации.

Рассмотрим пример анимации (исходники анимации в формате fla здесь):

Здесь должна быть флешка. Установите Flash Player

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

Растеризация

Для рестеризации анимации, вы можете воспользоваться библиотекой FPMovieClip.swc, которая включает несколько классов. Самый простой способ растеризации, это использовать класс FPMovieClip:

Конструктор класса FPMovieClip принимает параметры:

  1. animationClass:Class – ссылка на класс анимации из библиотеки
  2. properties:FPRasterizeProperties – свойства растеризации

Если у вас нету ссылки на класс, а есть уже созданная анимация, например при загрузке анимации на Timeline-е, вы можете воспользоваться методом rasterize:

Класс FPMovieClip имеет все методы и свойства управления анимацией стандартного класса MovieClip, полный список всех методов и свойств вы сможете найти в документации. После растеризации, вы получите анимацию из набор кадров:

Здесь должна быть флешка. Установите Flash Player

Как видите из примера, точка отсчета сохранилась в том же месте. Т.е. объект Bitmap внутри класса FPMovieClip смещается точно так же, как это было в исходной анимации. Если вы хотите чтобы объект Bitmap всегда лежал в точке 0×0, задайте объекту класса FPMovieClip значение false в свойстве offset.

Свойства растеризации

Как было сказано выше, конструктор класса FPMovieClip вторым параметр принимает объект класса FPRasterizeProperties. У этого объекта есть несколько свойств. Для начала проверим значение свойства debugColor – если задать значение больше 0, то все BitmapData-ы рисуются с заданным цветом. Формат параметра debugColor: 0xAARRGGBB, т.е. необходимо задать и прозрачность цвета:

Здесь должна быть флешка. Установите Flash Player


Как видите изображения получились разного размера, чтобы исправить это недоразумение задайте значение true в свойстве fixSize объекта FPRasterizeProperties:

И вы получите вот такую анимацию:

Здесь должна быть флешка. Установите Flash Player


Если вам не нравится что картинки получились слишком большими, из-за нескольких кадров анимации, вы можете воспользоваться свойством crop объекта FPRasterizeProperties, для обрезания картинок анимации:

Здесь должна быть флешка. Установите Flash Player


В следующей статей я расскажу вам как создать эффекты Отражения и Тени с помощью растеризованной анимации FPMovieClip.

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/

Да прeбудет с вами Flash.
Serious Sam

Эту статью прочитали 2292 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress: