Sergey Zapatylak, Developer, Vizor Games

2. Плавный переход к HTML5
• 2 версии игры для тестирования пользователями
• Еженедельные апдейты в плановом порядке
• Возможность отключить HTML5 версию либо
ограничить ее использование

3. Варианты решения
• Переписать все с нуля
• Единовременная конвертация кода в язык, генерирующий и AS,
и JS код.
• Реализация Flash API на JavaScript и конвертера кода AS -> JS

4. Rendering
• StageXL (bunnymark: 150000)
• PIXI (bunnymark: 200000)
• IvanK Lib
• EaselJS
• и т.д.

5. PIXI
• Схожесть с Flash API
• Хороший бенчмарк
• Большое комьюнити
• WebGL + Canvas

6. Основные проблемы

7. Производительность клиента в
одинаковых условиях в зависимости от браузера
5
60
12
30
11
60
30
2220
40
0
10
20
30
40
50
60
70
Render time
(ms)
Fps Render time
(ms)
Fps
Chrome
Mozilla
Edge
PC1 PC2

8. 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;

9. RAM
Варианты решения:
Грузить ресурсы отдельным
запросом при попытке доступа к
ним в приложении либо сразу
(минус – изначальное
переполнение)
Грузить ресурсы в упакованном
виде сразу и распаковывать
при первой попытке доступа к
ним
IMG_0:
IMG_1:
IMG_2:
IMG_0:
IMG_1:
IMG_2: IMG_0

10. Текст
На примере Google Сhrome:
- BitmapFont
- Векторизация шрифта
- Иногда помогает увеличение
текста в 2 раза, отрисовка его на
HTMLCanvas и отрисовка на
результирующий HTMLCanvas с
масштабом 0.5

11. GPU
Выключение hardware antialiasing дает до 50% производительности, но
приводит к угловатости кривых (скругленный прямоугольник)
Решение: рисовать линию как множество прямоугольников с
градиентом по бокам

12. GPU
Минимизация количества объектов типа ShaderProgram либо
их прекомпиляция уменьшит заметные лаги в Mozilla
Размер ресурсов на GPU можно снизить, если первый
BitmapData.copyPixels в (0,0) из атласа заменить рамкой в
исходном атласе, если есть уверенность в том, что исходный
объект BitmapData не будет меняться

13. GPU
Единовременная загрузка множества картинок из Embed
ресурсов может быть организована динамическим атласом,
если отрисовка картинок происходит подряд
Для этого на этапе сборки проекта необходимо
сгенерировать прямоугольники – будущие места картинок в
этом атласе.

14. Модификация рендерера
При >5000 объектов в дисплей листе большой процент по
загруженности CPU занимает перерасчет результирующих
трансформаций и границ

15. Решение
• Введем понятие камеры
• Трехуровневый кэш границ и трансформаций (локальные, мировые и
экранные)
• Камера врезается в дисплей лист на объекте, относительно которого
происходят минимальные изменения трансформации объектов (x, y,
width, height, rotation, …), и перерасчет происходит только у
экранных трансформаций

16. Решение

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