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

Сегодня речь пойдет снова об элементе CANVAS, а так же немного об оптимизации самих игр в 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.
Метки:
Поделиться публикацией
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 4
  • +1
    Вроде бы не так давно прошел массовый апдейт WebView в Android, который теперь стал на движке Chromium. От старого он отличается особым умом и производительностью. Есть ли смысл ориентироваться на старый WebView?

    Насчет translate и translate3d не уверен. Раньше везде для анимации рекомендовалось использовать translate3d вместо translate. Но теперь многие последние браузеры включают акселерацию для многих элементов автоматически. Поэтому при описании трюков полезно всегда указывать область применения: платформы и версии браузеров.
    • +1
      Если игра не из серии крестики нолики, а что нибудь вроде clicker hero, где вес уже не так бросается в глаза, то самая первая и главная оптимизация HTML5 для андроида это использовать crosswalk вместо стандартного webview

      Игра будет весить на 20 метров больше, зато работать будет сильно быстрее на всех андроидах до 5 версии, ну а начиная с 5 обновление webview идет отдельным от ОС компонентом

      И кстати, разрабатывать HTML5 приложения под андроид удобнее в данном случае будет в Visual Studio, чем всё вручную делать в Android Studio
      • 0
        >>Кроме того, через WebView есть проблема работы со звуком. Ее там просто нет.

        Не совсем понял. Не будет звука в html5-приложениях для Android?
        • +1
          Теперь уже будет =)

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.