Я створив гру HTML5 Canvas та JS, яка чудово працює на робочому столі чи ноутбуці в Chrome (30 кадрів в секунду), але на мобільному Safari я отримую лише 8 кадрів в секунду. Чи є прості поради чи підказки для збільшення частоти кадрів?
Я створив гру HTML5 Canvas та JS, яка чудово працює на робочому столі чи ноутбуці в Chrome (30 кадрів в секунду), але на мобільному Safari я отримую лише 8 кадрів в секунду. Чи є прості поради чи підказки для збільшення частоти кадрів?
Відповіді:
На жаль, відповідь полягає в тому, щоб намалювати менше. Я знайшов вузьке місце з додатками на основі полотна (на будь-якій платформі, справді) - це час, який потрібно для фактичного малювання пікселів.
Ось кілька спробу:
Використовуйте кілька шарів полотна. Намалюйте ваш фон одним шаром, малюючи об'єкти на іншому шарі (абсолютно розміщеному на верхньому шарі фону). (Примітка. Я не пробував цього на мобільному сафарі, але це може допомогти на інших платформах)
Лише перемальовували спрайти, які змінилися. Це складно, але безумовно підвищує продуктивність. Ідея полягає у тому, щоб зберігати, чи потрібно спрайт переробляти чи перемальовувати лише спрайти, які потребують його разом із фоном позаду них. (Це також має потребу в каскаді до інших об'єктів, які можуть спрацьовувати спрайт.)
Справа в розробці на Chrome полягає в тому, що а) його JavaScript-двигун (V8) швидкий як пекло, і б) новітні версії (7,8,9) мають деяке прискорення графічного процесора, коли справа стосується рендерингу полотна. Це в поєднанні з тим, що обладнання для мобільних пристроїв просто не настільки потужне, як ваш робочий стіл / ноутбук, означає, що на мобільному сафарі буде практично важко дістатись десь поблизу однакової продуктивності.
Я думаю, що на даний момент найкращим підходом може бути орієнтація на гру на мобільному сафарі з самого початку та спробуй створити гру, яка не настільки інтенсивно перемальовується.
Це трохи зйомки, але чи може ваша гра працювати на спрайтах DIV із перетвореннями CSS? Я говорю це, тому що я отримую чудову ефективність із переміщенням речей на пристроях iOS з перетвореннями CSS та переходами.
Це, здається, належним чином прискорене обладнання, з химерним застереженням, що ви повинні використовувати 3D-форму для перетворень (тобто translate3D, а не перекладати) для прискорення, щоб почати. Це дійсно дуже гладко, і реалізація браузера iOS підтримує Форма, де ви просто встановили 16-елементну поплавкову матрицю безпосередньо, що для мене дуже зручно.
Я настільки вражений тим, наскільки гладко це закінчується, що я мав намір спробувати простий ігровий проект, написаний таким чином.
У разі малювання рядків об'єднайте стільки команд lineTo перед викликом обведення.
Цей та деякі інші поради: http://dt.deviantart.com/blog/38471599/
усе @Gosub сказав:
подивіться, якою математикою ви займаєтесь, подивіться, чи все-таки можна використовувати більш ефективні алгоритми.
використовувати менші зображення. спробуйте зробити розміри зображень сили 2
подивіться, чи можна позбутися альфа-суміші на полотні чи не використовувати властивість непрозорості CSS.
будь ласка, опублікуйте свої результати. було б цікаво дізнатися, які речі найбільше допомогли.
Мені б не хотілося додати відповідь до старої теми - але я дивуюсь, що ніхто про це не згадував.
Коли ви пишете свої перші ігри, просто напишіть їх, як би ви очікували від них розумної роботи. Наведені вище методи - хороші вихідні точки для підвищення продуктивності - але справжньою хитрістю є профілер. Якщо ви профіліруєте свою програму в Chrome або Firefox (підказка: використовуйте безліч методів, щоб ви могли бачити точні вузькі місця; тому вам не доведеться переміщувати речі пізніше - ви все одно повинні це робити.), Ви отримуєте додаткову користь від бачення точні результати часу. У моєму випадку я бачив, як постійно перекроювати фон зайняло 80% часу браузера. Після того, як я перемістив це з шляху, я побачив інші дзвінки, що складають відповідно 40% і більше. Через годину-дві я побачив значне збільшення FPS.
Я також хотів би почути ваші результати. Я намагався зробити те саме. Я виявив, що робити багато математики добре, але як тільки ти покладеш полотно туди, воно почне розумово, і частота кадрів падає.
У мене було накладення переднього плану, яке відображало ефекти. Це було дуже якісне зображення, але альфа-матеріал настільки сповільнив його, що я повністю скинув його взамін більше кадрів в секунду.
Інша річ, яку я зробив, - це використовувати PHP, щоб відпрацювати деякі важкі математики. У мене були великі набори даних, але замість того, щоб JavaScript обчислював і показував дані, я вирішив дозволити PHP виконувати роботу і нехай JavaScript показує результати. Це не заощадило багато часу, оскільки JavaScript - це "sehr gut" з математикою.
Я вважаю, що весь ваш сайт знаходиться в HTML5, тому спробуйте пограти з фоновим працівником.
Сподіваюся, я допоміг і будь ласка, поділіться своїми результатами.