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

Сегодня речь пойдет снова об элементе 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 ее нет.