Предыстория: У меня обширный опыт разработки, но в последний раз я кодировал игру много лет назад. Мои навыки в Javascript весьма ограничены, и я намерен улучшить их, создав простую игру - тетрис, Pac-man или что-то такого уровня сложности.
Вопрос: Мне кажется, что фундаментальный выбор, который мне нужно сделать, заключается в том, должен ли я сделать <canvas>
элемент или нет.
С холстом у меня есть основные инструменты для рендеринга точек, линий и более сложных вещей. Предположительно, есть или будут различные структуры, чтобы помочь с этим.
Без холста я мог бы хранить свои объекты в DOM-дереве, как обычную веб-страницу, только довольно сложную, со многими перекрывающимися элементами.
Один подход лучше другого? Они взаимоисключающие? Как я знаю, что выбрать?
источник
О DOM
DOM работает довольно хорошо для старой школы 2D, что означает отсутствие поворота или масштабирования изображения. На самом деле есть инструменты для обеих этих работ, но вы не можете рассчитывать на их хорошие результаты.
Для игры вы должны как можно меньше полагаться на движок макета браузера, что означает использование
position:absolute
для размещения объектов. Старайтесь, насколько это возможно, не создавать и не уничтожать объекты DOM все время, если вам нужно очень изменяемое количество объектов, вам может потребоваться установить пул свободных элементов DOMdisplay:none
, готовых к восстановлению при необходимости.DOM vs canvas
С рыночной долей IE8 сокращение холста становится все более привлекательным вариантом, для большинства игр это, вероятно, хороший выбор. Но для некоторых задач DOM является более простым инструментом, вы можете использовать поток документов, если это необходимо, вы можете ловить клики непосредственно по визуализированному объекту, легко интегрировать полосы прокрутки.
Трудно покрыть разницу в производительности, это зависит от работы и сильно варьируется от браузера к браузеру.
источник
position:absolute
, это хороший момент.Полностью зависит от типа игры, хотя холст подходит «большинству» из них.
Управление DOM в какой-то момент становится ужасным, чем больше элементов вы получаете, тем медленнее, тем больше элементов вы перемещаете ОЧЕНЬ МЕДЛЕННО.
Управление порядком загрузки активов с помощью элементов IMG ... не тривиально (перехватывать ошибки на намеренно нарушенных протоколах в тегах изображения: D).
Хотя, для игр с в основном статичными изображениями и малым количеством эффектов, я все равно выбрал бы DOM. Все остальное, холст - это первый выбор (указывать и щелкать, хотя хитмапы - это отдельная история).
В наши дни Canvas настолько быстр (даже на iPhone), что вряд ли есть причина не использовать его.
источник
Если вы делаете игру на HTML5, холст намного лучше. Вот почему:
Обратная сторона - анимация - хотя есть много отличных библиотек для анимации, я люблю анимацию 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 и выделять больше памяти при работе с элементами. Это не имеет смысла быть быстрее, чем холст.
источник