Як оптимізувати веб-додаток HTML5 Canvas та JavaScript для мобільних Safari?


17

Я створив гру HTML5 Canvas та JS, яка чудово працює на робочому столі чи ноутбуці в Chrome (30 кадрів в секунду), але на мобільному Safari я отримую лише 8 кадрів в секунду. Чи є прості поради чи підказки для збільшення частоти кадрів?

Відповіді:


14

На жаль, відповідь полягає в тому, щоб намалювати менше. Я знайшов вузьке місце з додатками на основі полотна (на будь-якій платформі, справді) - це час, який потрібно для фактичного малювання пікселів.

Ось кілька спробу:

  1. Використовуйте кілька шарів полотна. Намалюйте ваш фон одним шаром, малюючи об'єкти на іншому шарі (абсолютно розміщеному на верхньому шарі фону). (Примітка. Я не пробував цього на мобільному сафарі, але це може допомогти на інших платформах)

  2. Лише перемальовували спрайти, які змінилися. Це складно, але безумовно підвищує продуктивність. Ідея полягає у тому, щоб зберігати, чи потрібно спрайт переробляти чи перемальовувати лише спрайти, які потребують його разом із фоном позаду них. (Це також має потребу в каскаді до інших об'єктів, які можуть спрацьовувати спрайт.)

Справа в розробці на Chrome полягає в тому, що а) його JavaScript-двигун (V8) швидкий як пекло, і б) новітні версії (7,8,9) мають деяке прискорення графічного процесора, коли справа стосується рендерингу полотна. Це в поєднанні з тим, що обладнання для мобільних пристроїв просто не настільки потужне, як ваш робочий стіл / ноутбук, означає, що на мобільному сафарі буде практично важко дістатись десь поблизу однакової продуктивності.

Я думаю, що на даний момент найкращим підходом може бути орієнтація на гру на мобільному сафарі з самого початку та спробуй створити гру, яка не настільки інтенсивно перемальовується.


+1 Малюнок менше - це, безумовно, і, на жаль, дорога сюди, хоча, використовуючи друге полотно для фонового шару та брудний підпис, ви можете отримати до 50% більше продуктивності в деяких випадках.
Іво Ветцель

4

Це трохи зйомки, але чи може ваша гра працювати на спрайтах DIV із перетвореннями CSS? Я говорю це, тому що я отримую чудову ефективність із переміщенням речей на пристроях iOS з перетвореннями CSS та переходами.

Це, здається, належним чином прискорене обладнання, з химерним застереженням, що ви повинні використовувати 3D-форму для перетворень (тобто translate3D, а не перекладати) для прискорення, щоб почати. ​​Це дійсно дуже гладко, і реалізація браузера iOS підтримує Форма, де ви просто встановили 16-елементну поплавкову матрицю безпосередньо, що для мене дуже зручно.

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


Дуже цікава ідея. Сподіваємось, вони врешті-решт дозволяють прискорити полотно 2d, а також в якийсь момент.
Даніель Х Мур


3

усе @Gosub сказав:

подивіться, якою математикою ви займаєтесь, подивіться, чи все-таки можна використовувати більш ефективні алгоритми.

використовувати менші зображення. спробуйте зробити розміри зображень сили 2

подивіться, чи можна позбутися альфа-суміші на полотні чи не використовувати властивість непрозорості CSS.

будь ласка, опублікуйте свої результати. було б цікаво дізнатися, які речі найбільше допомогли.


3

Мені б не хотілося додати відповідь до старої теми - але я дивуюсь, що ніхто про це не згадував.

Коли ви пишете свої перші ігри, просто напишіть їх, як би ви очікували від них розумної роботи. Наведені вище методи - хороші вихідні точки для підвищення продуктивності - але справжньою хитрістю є профілер. Якщо ви профіліруєте свою програму в Chrome або Firefox (підказка: використовуйте безліч методів, щоб ви могли бачити точні вузькі місця; тому вам не доведеться переміщувати речі пізніше - ви все одно повинні це робити.), Ви отримуєте додаткову користь від бачення точні результати часу. У моєму випадку я бачив, як постійно перекроювати фон зайняло 80% часу браузера. Після того, як я перемістив це з шляху, я побачив інші дзвінки, що складають відповідно 40% і більше. Через годину-дві я побачив значне збільшення FPS.


1

Я також хотів би почути ваші результати. Я намагався зробити те саме. Я виявив, що робити багато математики добре, але як тільки ти покладеш полотно туди, воно почне розумово, і частота кадрів падає.

У мене було накладення переднього плану, яке відображало ефекти. Це було дуже якісне зображення, але альфа-матеріал настільки сповільнив його, що я повністю скинув його взамін більше кадрів в секунду.

Інша річ, яку я зробив, - це використовувати PHP, щоб відпрацювати деякі важкі математики. У мене були великі набори даних, але замість того, щоб JavaScript обчислював і показував дані, я вирішив дозволити PHP виконувати роботу і нехай JavaScript показує результати. Це не заощадило багато часу, оскільки JavaScript - це "sehr gut" з математикою.

Я вважаю, що весь ваш сайт знаходиться в HTML5, тому спробуйте пограти з фоновим працівником.

Сподіваюся, я допоміг і будь ласка, поділіться своїми результатами.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.