HTML5
для  мобильных  платформ
Александр  Норинчак
CTO
TrueToken
FlashGAMM! Kyiv 2011
• Какая  стояла  цель  перед  нами?
• Сложности,  с  которыми  мы  столкнулись
• Пути  решения  
• Примеры  готовых  проду...
• Игра  на  HTML5 с  использованием  
физики  (Box2D 1.4.3.1)
• Поддержка  множества  устройств  с  
различным  разрешение...
Низкая  производительность  
процессоров  мобильных  
устройств
Проблемы?
http://true-token.com
Время,  затрачиваемое  на  различные  
операции:
- Игровая  логика  ~ 1%
- Просчет  физики  ~ 9%
- Рендеринг  ~ 90%
Кто  в...
«НЕТ»  масштабированию
Использование  browser scale или  canvas scale
Низкая  производительность  (2-4 fps)
• Пакеты  граф...
Разделение  сцены
Очистка  сцены  и  рендеринг  всех  спрайтов
Низкая  производительность  (2-4 fps)
Разделение  спрайтов ...
На  сцене  32  спрайта
28  статичных  на
background canvas
4 динамичных  на
foreground canvas
http://true-token.com
Раздел...
Частичная  очистка сцены
Рендеринг  только  измененных  спрайтов
Прирост  производительности  
до  100%  
http://true-toke...
Partial update
Статичная  сцена Сцена  изменяется Область  рендеринга
http://true-token.com
Использование  rotate canvas.
Производительность  неплохая,  но  можно  
добиться  лучшей  
Прекэш поворотов  спрайтов
Пр...
Использование  встроенных  средств  canvas.
Производительность  неплохая,  но  можно  
добиться  лучшей  
Рендеринг  текс...
• Рост  FPS с  3-4  до  20-26  на  устройствах  класса  IPone 3G
• Возможность  полноценного  портирования практически  
л...
Примеры  продуктов
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) ...
Upcoming SlideShare
Loading in...5
×

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

169

Published on

Our CTO Alexander Norinchak talking about html5 for mobile platforms, common problems & solutions.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
169
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5 для  мобильных  платформ Александр  Норинчак CTO TrueToken FlashGAMM! Kyiv 2011
  2. 2. • Какая  стояла  цель  перед  нами? • Сложности,  с  которыми  мы  столкнулись • Пути  решения   • Примеры  готовых  продуктов О  чем  доклад http://true-token.com
  3. 3. • Игра  на  HTML5 с  использованием   физики  (Box2D 1.4.3.1) • Поддержка  множества  устройств  с   различным  разрешением  экрана • FPS не  менее  24  на  устройствах   класса  IPhone 3G и  выше • Поддержка  множества  ОС Задачи http://true-token.com
  4. 4. Низкая  производительность   процессоров  мобильных   устройств Проблемы? http://true-token.com
  5. 5. Время,  затрачиваемое  на  различные   операции: - Игровая  логика  ~ 1% - Просчет  физики  ~ 9% - Рендеринг  ~ 90% Кто  виноват? http://true-token.com
  6. 6. «НЕТ»  масштабированию Использование  browser scale или  canvas scale Низкая  производительность  (2-4 fps) • Пакеты  графики  для  каждого  разрешения • Запрет user-scalable в  мобильном   браузере Прирост  производительности   до  500%   http://true-token.com Обычное   решение Наше   решение   Результат
  7. 7. Разделение  сцены Очистка  сцены  и  рендеринг  всех  спрайтов Низкая  производительность  (2-4 fps) Разделение  спрайтов  на  статичные  и   динамичные.   Использование  не  одного,  а  минимум  2-х   canvas – для  статики  и  динамики. Прирост  производительности   до  100%   http://true-token.com Обычное   решение Наше   решение   Результат
  8. 8. На  сцене  32  спрайта 28  статичных  на background canvas 4 динамичных  на foreground canvas http://true-token.com Разделение  сцены
  9. 9. Частичная  очистка сцены Рендеринг  только  измененных  спрайтов Прирост  производительности   до  100%   http://true-token.com Обычное   решение Наше   решение   Результат Partial update
  10. 10. Partial update Статичная  сцена Сцена  изменяется Область  рендеринга http://true-token.com
  11. 11. Использование  rotate canvas. Производительность  неплохая,  но  можно   добиться  лучшей   Прекэш поворотов  спрайтов Прирост  производительности   до  20% http://true-token.com Обычное   решение Наше   решение   Результат «НЕТ»  вращению  спрайтов
  12. 12. Использование  встроенных  средств  canvas. Производительность  неплохая,  но  можно   добиться  лучшей   Рендеринг  текста  спрайтами Прирост  производительности  до  20%   в  отдельных  случаях   http://true-token.com Обычное   решение Наше   решение   Результат «НЕТ»  шрифтам
  13. 13. • Рост  FPS с  3-4  до  20-26  на  устройствах  класса  IPone 3G • Возможность  полноценного  портирования практически   любой  flash-игры  c использованием  физики  на  HTML5 для   мобильных  устройств. • Полноценный  фреймворк в  ActionScript 2 style, поддерживающий  продемонстрированные  решения. • Универсальный  редактор  уровней  для  игр  на  физике. Портировано 16 игр Разработано  4  новых  игры Полученные  результаты   http://true-token.com
  14. 14. Примеры  продуктов Dragon Physics http://true-token.com
  15. 15. Примеры  продуктов Animal Connect http://true-token.com
  16. 16. Примеры  продуктов Mad Shapes http://true-token.com
  17. 17. Примеры  продуктов Skeleton Launcher http://true-token.com
  18. 18. Звоните,  пишите   Спасибо  за  внимание! Александр  Норинчак CTO True Token E-mail: dev@true-token.com Тел:   +38 (068) 354-56-00 Skype: alexander.norinchak http://true-token.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×