HTML5 для  мобильных  платформ

Александр  Норинчак CTO

TrueToken

FlashGAMM! Kyiv 2011

• Какая  стояла  цель  перед  нами?

• Сложности,  с  которыми  мы  столкнулись

• Пути  решения  

• Примеры  готовых  продуктов

О  чем  доклад

http://true-token.com

• Игра  на  HTML5 с  использованием  физики  (Box2D 1.4.3.1)

• Поддержка  множества  устройств  с  различным  разрешением  экрана

• FPS не  менее  24  на  устройствах  класса  IPhone 3G и  выше

• Поддержка  множества  ОС

Задачи

http://true-token.com

Низкая  производительность  процессоров  мобильных  

устройств

Проблемы?

http://true-token.com

Время,  затрачиваемое  на  различные  операции: - Игровая  логика  ~ 1% - Просчет  физики  ~ 9% - Рендеринг  ~ 90%

Кто  виноват?

http://true-token.com

«НЕТ»  масштабированию

Использование  browser scale или  canvas scale

Низкая  производительность  (2-4 fps)

• Пакеты  графики  для  каждого  разрешения

• Запрет user-scalable в  мобильном  браузере

Прирост  производительности   до  500%  

http://true-token.com

Обычное  решение

Наше  решение  

Результат

Разделение  сцены

Очистка  сцены  и  рендеринг  всех  спрайтов

Низкая  производительность  (2-4 fps)

Разделение  спрайтов  на  статичные  и  динамичные.  

Использование  не  одного,  а  минимум  2-х  canvas – для  статики  и  динамики.

Прирост  производительности   до  100%  

http://true-token.com

Обычное  решение

Наше  решение  

Результат

На  сцене  32  спрайта

28  статичных  на background canvas

4 динамичных  на foreground canvas

http://true-token.com

Разделение  сцены

Частичная  очистка сцены

Рендеринг  только  измененных  спрайтов

Прирост  производительности   до  100%  

http://true-token.com

Обычное  решение

Наше  решение  

Результат

Partial update

Partial update Статичная  сцена Сцена  изменяется Область  рендеринга

http://true-token.com

Использование  rotate canvas.

Производительность  неплохая,  но  можно  добиться  лучшей  

Прекэш поворотов  спрайтов

Прирост  производительности   до  20%

http://true-token.com

Обычное  решение

Наше  решение  

Результат

«НЕТ»  вращению  спрайтов

Использование  встроенных  средств  canvas.

Производительность  неплохая,  но  можно  добиться  лучшей  

Рендеринг  текста  спрайтами

Прирост  производительности  до  20%   в  отдельных  случаях  

http://true-token.com

Обычное  решение

Наше  решение  

Результат

«НЕТ»  шрифтам

• Рост  FPS с  3-4  до  20-26  на  устройствах  класса  IPone 3G • Возможность  полноценного  портирования практически  

любой  flash-игры  c использованием  физики  на  HTML5 для  мобильных  устройств.

• Полноценный  фреймворк в  ActionScript 2 style, поддерживающий  продемонстрированные  решения.

• Универсальный  редактор  уровней  для  игр  на  физике.

Портировано 16 игр

Разработано  4  новых  игры

Полученные  результаты  

http://true-token.com

Примеры  продуктов Dragon Physics

http://true-token.com

Примеры  продуктов Animal Connect

http://true-token.com

Примеры  продуктов Mad Shapes

http://true-token.com

Примеры  продуктов Skeleton Launcher

http://true-token.com

Звоните,  пишите  

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

Александр  Норинчак CTO True Token E-mail: dev@true-token.com Тел:   +38 (068) 354-56-00 Skype: alexander.norinchak

http://true-token.com