Является ли использование нескольких объектов canvas хорошей практикой?

Мы разрабатываем игру «прыгай и беги» с HTML5 и JavaScript, и для этого нужно создать собственную игровую среду. Здесь у нас есть некоторые трудности, и мы хотели бы попросить у вас совета:

У нас есть объект "Stage", который представляет корень нашей игры и является глобальной оболочкой div. Этап может содержать несколько «сцен», которые также являются div-элементами. Мы реализуем сцену для игрового задания, для паузы и т. Д. И переключаемся между ними. Поэтому каждая сцена может содержать несколько «слоев», представляющих холст. Эти Слои содержат «ObjectEntities», которые представляют изображения или другие фигуры, такие как прямоугольники и т. Д. Каждый объект имеет собственный временный канал, чтобы иметь возможность рисовать изображения для одного объекта, тогда как другой содержит прямоугольник.

Мы устанавливаем activeScene в нашей сцене, поэтому, когда игра идет, рисуется только активная сцена. Вызов activeScene.draw(), вызывает все подслои для рисования, которые рисуют их сущности (вызов drawImage(entity.canvas)). Но разве это хорошая практика? Наличие нескольких холстов для рисования? Каждый игровой цикл, каждый слой-контекст очищается и рисуется снова. Например, у нас просто есть неподвижный фоновый слой ... разве не было бы более полезно нарисовать это один раз, а не очищать каждый раз и перерисовывать? Или мы должны использовать глобальный холст, например, в сцене и просто использовать этот холст для рисования? Но мы думали, что это будет дорого ...

Эта страница содержит отличный список оптимизаций, которые можно сделать для canvas. В разделе «Использование нескольких слоистых полотен для сложных сцен» описывается, почему во многих случаях на самом деле лучше иметь несколько объектов Canvas, поскольку вам не нужно перерисовывать большие дорогие объекты (фоновые изображения) так же часто, как более мелкие, быстро движущиеся объекты ( снаряды). Вот учебник, чтобы вы начали. В двух словах, просто создайте несколько полотен для вещей, которые требуют рисования по-разному, и выровняйте их с абсолютным позиционированием:

position:absolute;
left:0px;
top:0px;

Каждый объект холста может быть назван и наслоен с использованием z-index:

<canvas id="layer1" style="z-index: 1;" />
<canvas id="layer2" style="z-index: 2;" />

Наконец, обратимся к различным контекстам:

function draw1() {
    context1... // draw background
}

function draw2() {
    context2... // draw character
}

function draw3() {
    context3... // draw bullets
}

Contre Jour делает это, на самом деле. Я не знаю многих деталей, но вы можете найти больше технических примечаний от них. Если вы играете в их игру, я полагаю, что каждая земля, с которой взаимодействует ваш персонаж, - это полотна.

Кажется, было бы неплохо разделить ваши активные части игры на полотна. Например, если вы делали RTS, командная строка может иметь смысл быть отдельным холстом, чтобы перерисовывать только время от времени.