Сегодня речь пойдет снова об элементе CANVAS, а так же немного об оптимизации самих игр в HTML5.
В современных браузерах для отрисовки в canvas используются мощи видеокарты, но, не всегда по умолчанию они включены. Можно залезть в настройки браузера и проверить. Для того, чтобы элемент вызывал такую обработку, можно в HTML добавить элементы 3D трансформации объекта. Отличным способом ускорения может (но не факт) послужить такая вот модификация канваса:
Я рассматриваю все с точки зрения разработки с использованием какого-нибудь фреймворка, вы же можете работать с чем-то другим, но, обратите внимание на эти нехитрые параметры, если ваш движок их не задает, то вы можете присвоить их элементу canvas через CSS, как классом, так и инлайн методом, ну или через JS.
Оптимизируйте ваш JS код. Избегайте частого обращения к DOM вашего приложения. Опять же, используя движок, обращений к DOM не должно быть вообще.
Не используйте setInterval / setTimeout / while (1) {}.
Для анимации в HTML5 был введен requestAnimationFrame, введен был специально для анимации, поэтому он для этого и оптимизирован. Обратите внимание, как ваш движок использует обновление кадров, учитывает ли он fps, и как обрабатывает deltaTime.
deltaTime — это временной фактор, который является переменной величиной времени, прошедшего с последнего кадра. Опять же, так как стандартный WebView в Android не слишком быстр (в отличии от WebView+ от Chromium), то ограничивать FPS в игре лучше в пределах 25 — 40 кадров в секунду принудительно. Игра будет работать стабильно, и для мобильной игры вполне нормально.
Так же, в прошлой статье (которая была удалена из-за рекламы, а именно — ссылки на тестовое приложение) я уделял внимание созданию обертки для вашей игры в Android Studio, и, не отходя от этого подхода, рассмотрим вариант создания именно такого приложения.
Тут с оптимизацией все немного проще, в алгоритмы лезть не нужно, да и работа сводится к тому, что просто добавляем некоторые параметры для Android-приложения.
В манифест игры нужно добавить следующий флаг:
Это подключит видеокарту (если есть) для обработки всего происходящего на экране, но, прежде чем включить ее в релиз, сперва хорошо протестируйте, для некоторых приложений может сделать только хуже, если железо не подходящее.
Следующее, что можно сделать — это отключить акселерацию в самом элементе WebView:
Чтобы работало корректно, нужно в список импортов добавить View.
Такие вот несложные средства оптимизации я накопал. На этом пока все.
PS: ссылки на примеры приводить больше не буду, если они кому-то потребуются — пишите в ЛС. Так же есть большая база примеров использования движков в JS.
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, или предложит его альтернативу.
Тема использования HTML5 в Android больше актуальна для простых приложений, в которых есть красивый интерфейс, который средствами Android не так-то и просто реализовать по сравнению с HTML/CSS, однако для игр его использовать еще рано, но, вполне реально.
Я уверен, что в будущем ситуация пересилит в сторону нормальной работы WebView, или предложит его альтернативу.
PS: ссылки на примеры приводить больше не буду, если они кому-то потребуются — пишите в ЛС. Так же есть большая база примеров использования движков в JS.
