Производительность в браузерной игре, что использовать Canvas или DOM rendering?

Question

[Radiks Alijevs]

Решил сделать браузерную игру, с возможностью играть на мобильных устройствах и на плане проектирования столкнулся с вопросом, как же всё-таки сделать игру используя для отрисовки только canvas или canvas + html5, или html5.

Вопрос, что больше потребляет ресурсов ПК, моб. устройствах canvas или DOM rendering?

Answer 1

[dollar]

Тёплое и мягкое (Canvas vs HTML5) нельзя сравнивать.
Посмотрите, что такое Canvas и что такое HTML5, точные определения.

Подсказка

Canvas - это элемент HTML5.
То есть как бы нельзя использовать Canvas, не используя при этом HTML5.

Дополнено:
Элементы DOM достаточно медленные, потому что удобство поиска требует жертв.
Кроме того, в геймдеве есть понятие основного игрового цикла, в котором формируется новый кадр. При этом обычно весь кадр целиком перерисовывается заново. Это даёт очень большую гибкость в плане изменчивости вида объектов, различных эффектов и т.д.

Как следствие, конечно же Canvas лучше использовать. Состояние игры, соответственно, нужно хранить в переменных JavaScript, в объектах, и чем проще структура, тем быстрее перебор и отрисовка нового кадра.

Comments

[Radiks Alijevs]

Сделал дополнение к вопросу

[dollar]

Радик Алиев, тогда вы имели в виду не HTML5, а DOM. Хотя Canvas тоже как бы частью DOM является, но по крайней мере так более понятно звучит.

[Radiks Alijevs]

Спасибо, поправил вопрос. Да, имел ввиду Dom rendering без canvas или всё на canvas

[Radiks Alijevs]

А, что например, лучше рендерить в DOM, чем в canvas? Может есть какие-то исключения?

[dollar]

Радик Алиев, гипертекст, формы, в основном. Всё, что состоит из блоков. Скажем, меню игры или настроек игры.

[dollar]

Собственно, попробуйте лучше Unity. Не надо этого всего вам.

[Radiks Alijevs]

dollar, да рассматриваю этот вариант, но потребуется много времени на обучение, на что как и всегда нет времени, но вариант хороший, с большим выбором исходников

[dollar]

Радик Алиев, много времени не потребуется. Там всё просто.

Answer 2

[Станислав Силин]

WebGL?

Comments

[Radiks Alijevs]

WebGL работает с canvas

[Mikhail Osher]

Радик Алиев, CanvasRenderingContext2D и WebGLRenderingContext имеют разные интерфейсы.
Используйте какой-нибудь pixi/phaser. Для понимания не будет лишним почитать, собственно, про различия webgl (2d, 3d) и обычный 2d канвас и написать пару простых игр

[Radiks Alijevs]

Mikhail Osher, я как раз использую phaser 3, фреймворк сам выбирает когда может использовать WebGl, на основе возможностей ОС. Pixi, также можно использовать вместе с phaserю Есть написанные сцены на канвас с pahser. Вопрос возник из-за того, что многие элементы интерфейса легче сделать на html, чем на canvas, но вопрос производительности важнее.

[Mikhail Osher]

Радик Алиев, если они реально статические, то можете их спозиционировать и повесить "поверх" канваса. Вопрос - удобно ли Вам самому это потом поддерживать? А что, если появится завязка на внутриигровые события/состояние? Можно придумать ещё много кейсов, и ответы есть только у Вас.
Я бы предложил всё делать на phaser, ибо проще поддерживать одну инфраструктуру, вместо phaser + raw html/js

[Radiks Alijevs]

Mikhail Osher, согласен, ко всему как с html компилится всё это будет