Картинки обгоняют вектор!
27.05.2008, автор Stormit, рубрики: Flash игры, Все остальноеСегодня можно найти большое количество флеш-игр в которых векторная графика по максимуму заменена растровой. Как и зачем это делается рассказывает товарищ Котов:
Привет всем!
Я сейчас попробую рассказать про оптимизацию анимации путем преобразования ее в PNG sequence (набор PNG картинок).
Зачем это надо? Все просто :). Когда много символов с одинаковым содержанием проигрываются одновременно (а в динамичных играх такое часто бывает), мы наблюдаем серьезную загрузку процессора.
На примере данной флэшки на Athlon 1.9 загрузка процессора была 100%, на Intel Core2Duo 3.0 - 24%. После превращения всей повторяющейся анимации в последовательность картинок - 60% и 12% соответственно (24 framerate).
Это все может быть терпимо для некоторых моментов анимации в мультах, но если у нас игра, то тормозами компа можно свести на нет весь геймплэй и физику (кстати, наблюдается пониженная производительность флэшки при запуске ее из браузера).
Вот вам простой и проверенный способ, как быстро сделать из векторной анимации, анимацию из последовательности картинок:
- Создаем новый проект и копируем туда наш символ с анимацией.
- Смотрим сколько в символе кадров и делаем наш символ не MovieClip а Graphic. В параметрах Graphic указываем “Play once”. Делаем наш новоиспеченный график такой же длинны по кадрам как и внутри (тоесть если наша анимация внутри составляет 15 кадров, то и снаружи должна иметь такую же длину). В итоге у нас на главной сцене график длинною в собственную анимацию (Почему на главной сцене? Потому что именно с нее идет все импортирование во вне, будь то картинка, анимация, или как в нашем случае - последовательность картинок).
- Заходим внутрь нашего графика и выделяем все содержимое через “edit multiple frames” при “onion all”, затем ставим положение всему выделенному по x:0, y:0 - это нужно для того чтобы точно без лишнего спозиционировать график относительно размера флешки.
- Смотрим размер графика (он соответствует размеру самого большого кадра, из которого состоит анимация) и устанавливаем такой же размер самой флэшке (Modify > Document). Затем даем положение графику _x:0, _y:0 и у нас все должно стать точнехонько в центр. Это значит что ничего лишнего в картинку у нас не превратится :).
- Затем выберем в меню File > Export > ExportMovie > PNG sequence. Создаем любую папку (так удобнее) и указываем имя первой картинки в последовательности, всем последующим будут присвоены номера в прогрессии (*0001). Параметры экспорта крутим в зависимости от задач (соотношение размер/качество), в большинстве случаев подходят стандартные.
- Затем в нужном проекте ( куда нам надо вставить оптимизированную анимацию ) создаем пустой MovieClip, в нем выбираем первый кадр и лезем в меню - Import>Import to Stage (Ctrl+R), находим нашу папку и выбираем первую картинку (*0001), Flash спрашивает приблизительно следующее - “Эта картинка является частью последовательности, хотите ли вы импортировать всю последовательность?” жмем - “Да, конечно” и у нас в символе появляется нужное количество кадров, и все они, как один, состоят из картинок
Есть конечно и минусы у такого подхода. Размер файла может вырасти в несколько раз, но сегодня у многих игроманов анлимы и поэтому это не так критично. Еще не рекомендуется потом сжимать полученный символ, так как будут видны пиксели и прочие искажения (рекомендуется делать последовательность в самом конце работы над проектом, когда все размеры известны на верняка).
Удачи!
Интересно на 52%
Интересно посмотреть результаты загрузки процессора на других конфигурациях.
хм..полезная инфа, спасибо)
А какой у тебя результат? поделись…
У меня pentiumМ 1.6Gh в ффоксе 2.0.0.14 плейер 10 - вектор 14 фпс, растр 19 фпс. Но хочу сказать еще такую вещь, делать игрухи на мощных компах - это плохо, они не у всех есть, и поэтому у тех у кого не мощный комп - игра будет жутко тормозить не смотря на то что это вектор или растр, а в остально согласен с автором - способ действительно полезный. Я в своей практике обычно только бэкграунды так выгоняю - вектор действительно тормозит, но тут вопрос только в числе точек выводимых на экран. если с умом оптимизировать то можно и в векторе выжать хороший фпс.
Статья полезная, раньше никогда не задумывался об этом, да и не знал. Спасибо
А использование cacheAsBitmap не даст такого же эффекта?
Кстати, а как во флеше считать фпс?
>>А использование cacheAsBitmap не даст такого же эффекта
По моему это только для статики катит, а так, как только будет переход в следующий кадр, картинка каждый раз будет заново расчитываться.
>>Кстати, а как во флеше считать фпс?
Я так определяю:
var timeArr = new Array(); function calcFPS() { var now = getTimer(); timeArr.push(now); var frames = timeArr.length; if (frames > 30) {//считаю за последнюю секунду timeArr.shift(); } var allSec:Number = (now - timeArr[0]) / 1000; var fps:Number = Math.round(frames / allSec); fpsField.text = fps; } onEnterFrame = calcFPS;>Я так определяю:
Жаль что это AS2, а не 3.
>как только будет переход в следующий кадр, картинка каждый раз будет заново расчитываться.
Так-то оно так, но ведь можно каждому кадру анимации проставить cacheAsBitmap. Правда это жутко гиморно, но вдруг кто пробовал.
>>Так-то оно так, но ведь можно каждому кадру анимации проставить cacheAsBitmap
Так я об этом и говорю: перешли в новый кадр, создали из вектора растр (закэшировали), а потом переходим в другой кадр и эти объекты (из предыдущего кадра) больше не существуют (удаляются они и все что с ними связано). И так все время. Выигрыш только там, где объект присутствует более одного кадра
Понятно. Спасиб.
с чем связано падение фпс в браузере? ( у меня 24 фпс и в первом и во втором случае)
to Denai
У тебя все ок - в этой флэшке выставлен 24 framerate. Эффект будет заметен на более медленной машине.