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

У минулій статті ми говорили про елементі WebView android-додатків для реалізація «милиці» по запуску 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


Ну або...… якщо розробляєте гру для комп'ютера, можете вказати 60fps.


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 Studio
І позаминулий: Створення HTML5 гри в Intel XDK

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.