Полотно чи не полотно при створенні браузерних ігор?

Передумови: Я маю обширний досвід розвитку, але останній раз, коли я кодував гру, був багато років тому. Мої навички JavaScript досить обмежені, і я маю намір вдосконалити їх, побудувавши просту гру - Tetris, Pac-man або щось такого рівня складності.

Питання: Мені здається, що я повинен зробити фундаментальний вибір - чи слід робити <canvas>елемент чи ні.

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

Без полотна я міг би зберігати свої об’єкти на дереві DOM, як звичайна веб-сторінка, лише досить складна, з багатьма елементами, що перекриваються.

Чи один підхід кращий за інший? Вони взаємовиключні? Як мені знати, що вибрати?

Полотно та DOM не є взаємовиключними, хоча вони досить окремі. Хорошим підходом було б зробити основну ігрову зону (наприклад, падаючі шматки в тетрісі) за допомогою Canvas, і виконати всі інтерфейси (наприклад, показ балів) з елементами DOM, які перекривають елемент полотна.

Однак, такий підхід насправді не потрібен для такої примітивної гри, як Tetris. Полотно корисне для більш досконалих графічних ефектів, але якщо вони не потрібні, дотримування DOM надасть вам ширшу сумісність; не всі браузери підтримують HTML5 Canvas.

Про DOM
DOM досить добре працює для 2D-школи для старих шкіл, це означає, що не застосовується обертання зображення чи масштабування. Насправді є інструменти для обох цих завдань, але ви не можете розраховувати на їхню ефективність.

Для гри ви повинні якомога менше покладатися на механізм компонування браузера, це означає використовувати position:absoluteдля розміщення об'єктів. Постарайтеся, наскільки це можливо, не створювати та знищувати об'єкти DOM весь час, якщо вам потрібна велика кількість змінних об'єктів, можливо, ви хочете встановити пул непрацюючих елементів DOM display:none, готових до відновлення при необхідності.

DOM vs canvas
З часткою ринку IE8 зменшення полотна стає все більш привабливим варіантом, для більшості ігор це, мабуть, прекрасний вибір. Але для деяких завдань DOM - це простіший інструмент для використання, ви можете використовувати деякий документообіг, якщо потрібно, ви можете вловлювати кліки безпосередньо виведеним об’єктом, легко інтегрувати смуги прокрутки.

Важко покрити різницю в продуктивності, це залежить від роботи і буде різко відрізнятися від браузера до браузера.

Повністю залежить від типу гри, хоча полотно підходить "більшості" з них.

Управління DOM стає жахливим в певний момент, чим більше елементів ви отримуєте повільніше, тим більше елементів ви рухаєтеся НАДНІШКО МІЖ.

Управління замовленням на завантаження активів за допомогою елементів IMG - це ... нетривалість (перехоплення помилок у навмисно порушених протоколах на тегах зображення: D).

Хоча для ігор з переважно статичними зображеннями та низьким рахунком ефектів я все одно хотів би з DOM. Все інше, полотно - це перший вибір (вкажіть і натисніть на речі, хоча хіт-карти - це інша історія).

Полотно настільки швидко в ці дні (навіть на iPhone), навряд чи є причина, щоб не використовувати його.

Якщо ви робите гру в HTML5, полотно набагато краще. Ось чому:

1. Швидкість - Подумайте про полотно як про зображення. Ви малюєте до зображення, а потім він забуває, що ви намалювали. Це різко підвищує продуктивність порівняно з DOM або SVG. Програми DOM та SVG - це те, щоб вони відстежували кожен об'єкт, який ви розміщуєте на екрані. Це означає, що якщо у вас є великий рівень з багатьма об'єктами на екрані, особливо за межами екрану або прихованими, вони малюються і відстежуються в будь-якому разі.
2. Особливості малювання - Хоча елементи DOM мають потужні перетворення CSS3, це ніщо в порівнянні з характеристиками полотна. Полотно може малювати будь-який об’єкт, мати потужну градієнтну підтримку, плагіни для відображення об’єктів у 3D, фільтрах тощо.
3. Підтримка - Коли ви використовуєте DOM, коли ви хочете використовувати експериментальні функції, такі як перетворення або анімації, ви повинні використовувати префікси -moz-, -webkit-, -o- і -ms- у CSS. На полотні вам не потрібно про це турбуватися. Просто малюйте однією функцією, і ви закінчили. Ще одна перевага, пов’язана з підтримкою, - це спосіб відображення програми. Як розробник веб-сайту, відсутність стандартизації DOM між веб-переглядачами викликає у мене гайки. Фони, градієнти, перетворення тощо відображаються по-різному між браузерами, незважаючи на докладні специфікації W3C. На полотні я наткнувся лише на одну річ, яка може бути різною - фони. Коли відображається плитковий фон, деякі веб-переглядачі візьмуть "tile-x" як центр плитки в 0px на осі x, а інші вважають це лише плиткою плитки вниз.
4. Бібліотеки та документація - Є TONS чудових бібліотек з документами для виготовлення ігор з полотном. Деякі бібліотеки: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs тощо. Я міг би перерахувати тонну більше, але немає сенсу.

Внизу - Анімація - Хоча є багато чудових бібліотек для анімації, я люблю анімації CSS3. Їх так легко створювати, маніпулювати та спрацьовувати. Існують різні хаки, щоб змусити анімацію CSS3 працювати з об’єктами з полотном, але я підозрюю, що більшість людей вважають за краще не використовувати цей метод.

Успіхів у вашій грі, і я сподіваюся побачити, що ви робите!

Якщо ви розглядаєте націлювання на мобільні браузери, зокрема Android, і гра містить будь-яку рухому графіку, уникайте DOM-анімації. Фондовий браузер в Android марний, навіть якщо це веб-кайт. Перед початком роботи перегляньте цю тему випуску Android: "Жахлива візуалізація анімації CSS3 та Javascript у браузері та веб-перегляді" .

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

Проста відповідь: WebGL із резервним полотном.

Нюансований відповідь: Якщо у вашій грі багато тексту, накладіть текстовий шар HTML. Pixi.js - це загартований на бойовій основі дисплей з деякими корисними додатками, який добре працює для цього.

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

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

У мене є приклад із реального світу: Коли я створив реалізацію гри «Життя життя Конвея», я почав із таблиці 500х500, змінюючи колір фону клітинок. У цій версії a Glider не працював зі швидкістю більше 30 кадрів в секунду, більше шаблонів призводило до ледве більше 1. У моїй полотняній версії цієї гри тепер можна плавно запускати набагато більші малюнки (населення 1000 і більше) ~ 30 кадрів в секунду.

Також це має стосуватися SVG (масштабований вектор) графіка), хоча я ніколи цього не пробував на практиці.

Редагувати : я мушу визнати, що мій приклад не дуже хороший (тому що таблиці = погані). Але головне все-таки вірно: маніпуляція DOM - це для документів. Браузер повинен шукати CSS та виділяти більше пам’яті, коли ви працюєте над елементами. Насправді немає сенсу бути швидшим, ніж полотно.