Оптимизация HTML5 игр для Android24.08.2015 13:18

В прошлой статье мы говорили об элементе WebView андроид-приложений для реализация «костыля» по запуску HTML5 приложений на движке J2ds (Canvas API).
Сегодня речь пойдет снова об этом же элементе, а так же немного об оптимизации самих игр в HTML5.
HTML часть
В современных браузерах для отрисовки в canvas используются мощи видеокарты, но, не всегда по умолчанию они включены. Можно залезть в настройки браузера и проверить. Для того, чтобы элемент вызывал такую обработку, можно в HTML добавить элементы 3D трансформации объекта. Окей, лезем в исходники J2ds, и видим там строчки:

 canvas.style.WebkitTransform= 'translate3d(0,0,0)';
 ... много подобных параметров
 canvas.style.transform= 'translate3d(0,0,0)';

Ладно, допустим, включает.
Я рассматриваю все с точки зрения разработки с использованием фреймворка, вы же можете работать с чем-то другим, но, обратите внимание на эти нехитрые параметры, если ваш движок их не задает, то вы можете присвоить их элементу canvas через CSS, как классом, так и инлайн методом, ну или через JS.

Оптимизируйте ваш JS код. Избегайте частого обращения к DOM вашего приложения. Опять же, используя J2ds обращений к DOM нет вообще, и это, пожалуй, один из минусов движка, ибо он вообще отключает DOM при инициализации игровой сцены. Перенимает все обработчики и блокирует даже такие функции, как скроллинг страницы.

createScene(); // После вызова этой функции отключается скролл, элемент канвас становится единственным активным объектом

initInput(); // после вызова этой команды отключается обработка всех событий, на них реагирует только движок

pauseGame(); // Возвращает все обратно

stopGame(); // Аналогично, возвращает все обратно, но уничтожает все данные, что накопились за игру

Не используйте setInterval / setTimeout / while (1) {}
Для анимации в HTML5 был введен requestAnimationFrame, введен был специально для анимации, поэтому он для этого и оптимизирован. Обратите внимание, как ваш движок использует обновление кадров, учитывает ли он fps, и как обрабатывает deltaTime.

deltaTime — это временной фактор, который является переменной величиной времени, прошедшего с последнего кадра. Опять же, так как стандартный WebView в Android не слишком быстр (в отличии от WebView+ от Chromium), то ограничивать FPS в игре лучше в пределах 25 — 40 кадров в секунду.

startGame(GameState, 25); // стартует игровую сцену в игровом состоянии GamState с 25 fps

Android часть
Так же, в прошлой статье я уделял внимание созданию обертки для вашей игры в Android Studio, и, не отходя от этого подхода, рассмотрим вариант создания именно такого приложения.

Тут с оптимизацией все немного проще, в алгоритмы лезть не нужно, да и работа сводится к тому, что просто добавляем некоторые параметры для Android-приложения.

В манифест игры нужно добавить следующий флаг:

android:hardwareAccelerated="true"

Это подключит видеокарту для обработки всего происходящего на экране, но, прежде чем включить ее в релиз, сперва хорошо протестируйте, для некоторых приложений может сделать только хуже.

Следующее, что можно сделать — это отключить акселерацию в элементе WebView:

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Чтобы работало корректно, нужно в список импортов добавить View.

Такие вот несложные средства оптимизации я накопал. На этом пока все.

Прошлая статья: Создание HTML5 игры в Android Studio
И позапрошлая: Создание HTML5 игры в Intel XDK

© Habrahabr.ru