2. • Какая стояла цель перед нами?
• Сложности, с которыми мы столкнулись
• Пути решения
• Примеры готовых продуктов
О чем доклад
http://true-token.com
3. • Игра на HTML5 с использованием
физики (Box2D 1.4.3.1)
• Поддержка множества устройств с
различным разрешением экрана
• FPS не менее 24 на устройствах
класса IPhone 3G и выше
• Поддержка множества ОС
Задачи
http://true-token.com
5. Время, затрачиваемое на различные
операции:
- Игровая логика ~ 1%
- Просчет физики ~ 9%
- Рендеринг ~ 90%
Кто виноват?
http://true-token.com
6. «НЕТ» масштабированию
Использование browser scale или canvas scale
Низкая производительность (2-4 fps)
• Пакеты графики для каждого разрешения
• Запрет user-scalable в мобильном
браузере
Прирост производительности
до 500%
http://true-token.com
Обычное
решение
Наше
решение
Результат
7. Разделение сцены
Очистка сцены и рендеринг всех спрайтов
Низкая производительность (2-4 fps)
Разделение спрайтов на статичные и
динамичные.
Использование не одного, а минимум 2-х
canvas – для статики и динамики.
Прирост производительности
до 100%
http://true-token.com
Обычное
решение
Наше
решение
Результат
8. На сцене 32 спрайта
28 статичных на
background canvas
4 динамичных на
foreground canvas
http://true-token.com
Разделение сцены
9. Частичная очистка сцены
Рендеринг только измененных спрайтов
Прирост производительности
до 100%
http://true-token.com
Обычное
решение
Наше
решение
Результат
Partial update
11. Использование rotate canvas.
Производительность неплохая, но можно
добиться лучшей
Прекэш поворотов спрайтов
Прирост производительности
до 20%
http://true-token.com
Обычное
решение
Наше
решение
Результат
«НЕТ» вращению спрайтов
12. Использование встроенных средств canvas.
Производительность неплохая, но можно
добиться лучшей
Рендеринг текста спрайтами
Прирост производительности до 20%
в отдельных случаях
http://true-token.com
Обычное
решение
Наше
решение
Результат
«НЕТ» шрифтам
13. • Рост FPS с 3-4 до 20-26 на устройствах класса IPone 3G
• Возможность полноценного портирования практически
любой flash-игры c использованием физики на HTML5 для
мобильных устройств.
• Полноценный фреймворк в ActionScript 2 style,
поддерживающий продемонстрированные решения.
• Универсальный редактор уровней для игр на физике.
Портировано 16 игр
Разработано 4 новых игры
Полученные результаты
http://true-token.com