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

________ _______

____ ________ ______

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

Chief Technical Officer

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

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

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

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

О чем доклад

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 TokenE-mail: dev@true-token.comТел: +38 (068) 354-56-00Skype: alexander.norinchak

http://true-token.com