Moving from Flash to HTML5 – converting large projects
-
Upload
devgamm-conference -
Category
Software
-
view
69 -
download
4
Transcript of Moving from Flash to HTML5 – converting large projects
Плавный переход к HTML5
• 2 версии игры для тестирования пользователями
• Еженедельные апдейты в плановом порядке
• Возможность отключить HTML5 версию либо ограничить ее использование
Варианты решения
• Переписать все с нуля
• Единовременная конвертация кода в язык, генерирующий и AS, и JS код.
• Реализация Flash API на JavaScript и конвертера кода AS -> JS
Rendering
• StageXL (bunnymark: 150000)
• PIXI (bunnymark: 200000)
• IvanK Lib• EaselJS• и т.д.
PIXI
• Схожесть с Flash API
• Хороший бенчмарк
• Большое комьюнити
• WebGL + Canvas
Основные проблемы
Производительность клиента водинаковых условиях в зависимости от браузера
Render time (ms)
Fps Render time (ms)
Fps0
10
20
30
40
50
60
70
5
60
12
30
11
60
302220
40ChromeMozillaEdge
PC1 PC2
RAM
Основная проблема – загрузка swf пакета ресурсов с множеством [Embed]
[Embed(source = “img/0.png")] public var IMG_0:Class;[Embed(source = "img/1.png")] public var IMG_1:Class;[Embed(source = "img/2.png")] public var IMG_2:Class;
RAM
Варианты решения:Грузить ресурсы
отдельным запросом при попытке доступа к ним в приложении либо сразу (минус – изначальное переполнение)
Грузить ресурсы в упакованном виде сразу и распаковывать при первой попытке доступа к ним
IMG_0:
IMG_1:
IMG_2:
IMG_0:
IMG_1:
IMG_2: IMG_0
Текст
На примере Google Сhrome:- BitmapFont- Векторизация шрифта- Иногда помогает увеличение текста в 2 раза, отрисовка его на HTMLCanvas и отрисовка на результирующий HTMLCanvas с масштабом 0.5
GPU
Выключение hardware antialiasing дает до 50% производительности, но приводит к угловатости
кривых (скругленный прямоугольник)
Решение: рисовать линию как множество прямоугольников с градиентом по бокам
GPU
Минимизация количества объектов типа ShaderProgram либо их прекомпиляция уменьшит заметные лаги в Mozilla
Размер ресурсов на GPU можно снизить, если первый BitmapData.copyPixels в (0,0) из атласа заменить рамкой в исходном атласе, если есть уверенность в том, что исходный объект BitmapData не будет меняться
GPU
Единовременная загрузка множества картинок из Embed ресурсов может быть организована динамическим атласом, если отрисовка картинок происходит подряд
Для этого на этапе сборки проекта необходимо сгенерировать прямоугольники – будущие места картинок в этом атласе.
Модификация рендерера
При >5000 объектов в дисплей листе большой процент по загруженности CPU занимает перерасчет результирующих трансформаций и границ
Решение
• Введем понятие камеры
• Трехуровневый кэш границ и трансформаций (локальные, мировые и экранные)
• Камера врезается в дисплей лист на объекте, относительно которого происходят минимальные изменения трансформации объектов (x, y, width, height, rotation, …), и перерасчет происходит только у экранных трансформаций
Решение
Спасибо за внимание