Плавный переход к 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, …), и перерасчет происходит только у экранных трансформаций

Решение

Спасибо за внимание