Оптимизация HTML5 игр для Android

в 5:35, , рубрики: html, java, javascript, причем тут linux?, Разработка под android, создание игр под Android

Сегодня речь пойдет снова об этом же элементе, а так же немного об оптимизации самих игр в HTML5.

HTML часть

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

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


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

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

Не используйте setInterval / setTimeout / while (1) {}.

Для анимации в HTML5 был введен requestAnimationFrame, введен был специально для анимации, поэтому он для этого и оптимизирован. Обратите внимание, как ваш движок использует обновление кадров, учитывает ли он fps, и как обрабатывает deltaTime.

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

Android часть

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

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

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

android:hardwareAccelerated="true"

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

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

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

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

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

Мнение автора на счет всей этой идеи

Вообще, HTML5 для Android очень сырой, во всех смыслах, и если в браузерах его использование еще оправдано, то вот в мобильниках — нет. Для этого лучше всего использовать стандартные средства Android. Там так же есть CANVAS, Bitmap, Paint и куча методов для рисования, построить на их основе несложный класс и пользоваться им для рисования — очень просто, и (что важно) очень производительно. Кроме того, через WebView есть проблема работы со звуком. Ее там просто нет. То есть она есть, если вы откроете игру, как обычную страницу, к примеру, в браузере на каком-нибудь сайте, но через WebView ее нет.

Тема использования HTML5 в Android больше актуальна для простых приложений, в которых есть красивый интерфейс, который средствами Android не так-то и просто реализовать по сравнению с HTML/CSS, однако для игр его использовать еще рано, но, вполне реально.

Я уверен, что в будущем ситуация пересилит в сторону нормальной работы WebView, или предложит его альтернативу.

PS: ссылки на примеры приводить больше не буду, если они кому-то потребуются — пишите в ЛС. Так же есть большая база примеров использования движков в JS.

Автор: Skaner

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js