Для холста или не для холста при создании игр на основе браузера?

Предыстория: У меня обширный опыт разработки, но в последний раз я кодировал игру много лет назад. Мои навыки в Javascript весьма ограничены, и я намерен улучшить их, создав простую игру - тетрис, Pac-man или что-то такого уровня сложности.

Вопрос: Мне кажется, что фундаментальный выбор, который мне нужно сделать, заключается в том, должен ли я сделать <canvas>элемент или нет.

С холстом у меня есть основные инструменты для рендеринга точек, линий и более сложных вещей. Предположительно, есть или будут различные структуры, чтобы помочь с этим.

Без холста я мог бы хранить свои объекты в DOM-дереве, как обычную веб-страницу, только довольно сложную, со многими перекрывающимися элементами.

Один подход лучше другого? Они взаимоисключающие? Как я знаю, что выбрать?

Canvas и DOM не являются взаимоисключающими, хотя они довольно разные. Один хороший подход заключается в том, чтобы визуализировать основную игровую область (например, падающие фигуры в тетрисе), используя Canvas, и выполнять весь пользовательский интерфейс (например, отображение счета) с элементами DOM, которые перекрывают элемент canvas.

Тем не менее, такой подход не является действительно необходимым для примитивной игры, как тетрис. Canvas полезен для более сложных графических эффектов, но если они не требуются, то использование DOM даст вам более широкую совместимость; не все браузеры поддерживают HTML5 Canvas.

О DOM
DOM работает довольно хорошо для старой школы 2D, что означает отсутствие поворота или масштабирования изображения. На самом деле есть инструменты для обеих этих работ, но вы не можете рассчитывать на их хорошие результаты.

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

DOM vs canvas
С рыночной долей IE8 сокращение холста становится все более привлекательным вариантом, для большинства игр это, вероятно, хороший выбор. Но для некоторых задач DOM является более простым инструментом, вы можете использовать поток документов, если это необходимо, вы можете ловить клики непосредственно по визуализированному объекту, легко интегрировать полосы прокрутки.

Трудно покрыть разницу в производительности, это зависит от работы и сильно варьируется от браузера к браузеру.

Полностью зависит от типа игры, хотя холст подходит «большинству» из них.

Управление DOM в какой-то момент становится ужасным, чем больше элементов вы получаете, тем медленнее, тем больше элементов вы перемещаете ОЧЕНЬ МЕДЛЕННО.

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

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

В наши дни Canvas настолько быстр (даже на iPhone), что вряд ли есть причина не использовать его.

Если вы делаете игру на HTML5, холст намного лучше. Вот почему:

1. Скорость - Думайте о холсте как об изображении. Вы рисуете изображение, а потом оно забывает, что вы нарисовали. Это значительно повышает производительность по сравнению с DOM или SVG. Приложения DOM и SVG отслеживают каждый объект, который вы размещаете на экране. Это означает, что если у вас большой уровень со многими объектами на экране, особенно за кадром или скрытыми, они в любом случае отрисовываются и отслеживаются.
2. Функции рисования. Хотя элементы DOM имеют мощные преобразования CSS3, это ничто по сравнению с функциями холста. На холсте можно рисовать любые объекты, иметь мощную поддержку градиента, плагины для отображения объектов в 3D, фильтры и т. Д.
3. Поддержка - при использовании DOM, когда вы хотите использовать экспериментальные функции, такие как преобразования или анимации, вы должны использовать префиксы -moz-, -webkit-, -o- и -ms- в CSS. На холсте вам не нужно беспокоиться об этом. Просто нарисуйте с одной функцией, и все готово. Еще одно преимущество холста, связанное с поддержкой, заключается в том, как отображается ваше приложение. Как разработчик веб-сайтов, отсутствие стандартизации DOM между браузерами сводит меня с ума. Фоны, градиенты, преобразования и т. Д. По-разному отображаются в разных браузерах, несмотря на подробные спецификации W3C. На холсте я сталкиваюсь только с одной вещью, которая может отличаться - фоном. При отображении мозаичного фона некоторые браузеры будут использовать плитку «x» как центр плитки в 0px по оси x, а другие - просто как плитку вниз.
4. Библиотеки и документация - есть множество замечательных библиотек по документации для создания игр с холстом. Некоторые библиотеки: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs и т. Д. Я мог бы перечислить еще больше, но нет никакого смысла.

Обратная сторона - анимация - хотя есть много отличных библиотек для анимации, я люблю анимацию CSS3. Их так легко создавать, манипулировать и запускать. Существуют различные способы заставить CSS3-анимацию работать с объектами с canvas, но я подозреваю, что большинство людей предпочитают не использовать этот метод.

Удачи в вашей игре, и я надеюсь увидеть, что вы делаете!

Если вы рассматриваете таргетинг на мобильные браузеры, в частности на Android, и игра содержит движущуюся графику, избегайте анимации DOM. Стандартный браузер в Android бесполезен, хотя он и является webkit. Перед тем, как начать, ознакомьтесь с этой темой для Android: «Ужасное отображение CSS3 и Javascript-анимации в браузере и WebView» .

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

Простой ответ: WebGL с откатом на холст.

Нюансированный ответ: если в вашей игре много текста, наложите текстовый слой HTML. Pixi.js битвы закаленного дисплея рамка с некоторыми полезными статистами , который работает хорошо для этого.

Помните, DOM обозначает объектную модель документа . Вы захотите использовать его для создания игр только в очень редких ситуациях и в большинстве случаев предпочитаете холст.

Даже если ваша игра имеет небольшие графические требования, выполнение этого в DOM будет иметь плохую производительность; что-нибудь большее, чем тетрис, вероятно, будет работать плохо.

У меня есть пример из реального мира: когда я создавал реализацию «Игры жизни» Конвея, я начинал с таблицы 500x500, меняя цвет фона ячеек. В этой версии планер не работал со скоростью более 30 кадров в секунду, более крупные паттерны давали чуть больше 1. В моей версии холста этой игры теперь можно плавно запускать гораздо большие скороговорки (население 1000 и более) на ~ 30 кадров в секунду.

Кроме того, это также относится к SVG (масштабируемая векторная графика), хотя я никогда не пробовал этого на практике.

Изменить : я должен признать, что мой пример не очень хороший (потому что таблицы = плохо). Но главное все еще верно: манипулирование DOM для документов. Браузер должен искать CSS и выделять больше памяти при работе с элементами. Это не имеет смысла быть быстрее, чем холст.