Во время создания нашей игры на флэше (осторожно — вконтакт!), в определенный момент мы столкнулись с проблемой производительности.
FPS начал падать даже на весьма производительных системах… Проблема была типична для всех флэш-игр — большое количество векторной графики. Как вы понимаете, векторная графика — это весьма ресурсоемкая штука. Ведь при рендере плееру приходится заново рассчитывать разнообразные хитрые кривые и т.п., что явно проигрывает по скорости работе с растровой графикой. При чем — проигрывает на порядок (а то и несколько порядков).
По старой доброй традиции в зубы был взят Google и начался поиск решения…
Штатное решение
Первое, на что вы наткнетесь — это на «cache as bitmap». Давайте сначала разберемся с этой опцией.
Включить эту опцию необходимо для каждого клипа отдельно. Делается это либо в самом Флэше — выбрав клип, на панели «Properties» установкой одноименной галочки. Либо же динамично — в коде AS3 установкой свойства MovieClip'а «cacheAsBitmap» в «true».
Включением этого режима мы говорим флэшу, чтобы он сохранил наш векторный MovieClip в памяти как растровое изображение и дальше при необходимости его вывести на экран — выводил его уже как растр, что дает ощутимый прирост производительности.
Возникает вопрос — так почему тогда этот метод не включен по умолчанию?
Тут все просто. Дело в том, что если закэшированный клип изменится (анимирован), либо же вы захотите его повернуть/масштабировать/изменить прозрачность — для этого флэшу придется снова обратиться к векторному «исходнику» клипа, чтобы закэшировать уже обновленный образ. Таким образом, если мы имеем клип, который меняется каждый кадр — то плееру придется постоянно перекэшировать его, что наоборот, — приведет к падению производительности.
Если коротко, то «cache as bitmap» можно смело включать для всех статичных movie clip'ов. Если же, например, у вас в игре есть фон, который состоит из статичной подложки и анимированных клипов (например, шевелящиеся растения, наложенные на статичный лесной пейзаж), — то вам следует отделить статичную часть в отдельный мувик и выставит для него кэширование.
Итак, что хорошего/плохого в этом методе:
+ Включить метод до безобразия просто. Кроме того, пользователь не обнаружит никакой разницы в просмотре (микро-нюансы могут возникнуть только при использовании нецелых координат клипа).
+ Метод идеально подходит для статичных мувиклипов любой сложности (с любым количеством градиентов, кривых и т.п.)
— Метод не следует применять для анимированных, вращающихся, клипов, а также клипов с меняющейся прозрачностью. Естественно, никаких графических артефактов вы не получите — все по-прежнему будет красиво. Но производительность вы можете наоборот — потерять.
— Метод отъедает какое-то количество памяти (ну, без этого — никуда… должен же плеер где-то хранить растеризованное изображение).
— По свидетельствам некоторых разработчиков, с большими клипами (10000 х 10000) могут все равно возникать подтормаживания.
Решение для анимированных клипов.
Оказывается, для анимированных клипов также есть решение. Суть этого решения в том, чтобы взять анимированный клип и заблаговременно растеризовть все его кадры и хранить их как bitmapData. А затем уже оперировать с клипом-растровой копией оригинала.
Скажете, что это сложно? На самом деле, велосипед уже изобрели до нас. Можно воспользоваться готовым решением, выложенным в блоге Touch My Pixel. Там же есть онлайн-пример, который позволит вам оценить производительность метода.
Разница в использовании и не использовании кэширования анимации весьма существенна:
Плюсы и минусы этого метода:
+ Метод подходит для анимированных клипов и позволяет изрядно поднять производительность.
— Решение не «из коробки», т.е. придется «прикручивать» сторонний код.
— Метод требует предварительного рендеринга всей анимации (т.е. небольшая задержка перед запуском флэшки).
Результат.
Наша графика представляет собой нечто такое:
(чудище по центру создано пользователем, так что за его «красивость» не бейте :)
В результате включения штатного «cache as bitmap» для статики, FPS, который падал аж до 12, поднялся до штатных 30.
Сейчас думаем, как бы грамотно применить кэширование для анимированной графики.
Заключение.
Надеюсь, данная статья поможет вам повысить производительность ваших флэшек!
Полезные материалы по теме:
- Статья Антона Карлова про производительность анимации — здесь как раз описаны эксперименты с вышеуказанным классом для растеризации анимированных клипов
- Why cacheAsBitmap is bad — еще одна статья про cacheAsBitmap и собственноручную растеризацию.
