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

727 views

Published on

Создания высокопроизводительных игр для мобильных платформ на HTML5 – это просто. Маленькие секреты и хитрости, позволяющие добиться максимальной производительности от мобильных браузеров на реальных примерах.

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

  • Be the first to like this

No Downloads
Views
Total views
727
On SlideShare
0
From Embeds
0
Number of Embeds
286
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5для мобильных платформ Александр ________
  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. Partial updateОбычное Частичная очистка сценырешение Наше Рендеринг только измененных спрайтоврешение Прирост производительностиРезультат до 100% http://true-token.com
  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• Возможность полноценного 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 TokenE-mail: dev@true-token.comТел: +38 (068) 354-56-00Skype: alexander.norinchak http://true-token.com

×