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

12

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

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

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

user1818924
источник
1
Почему именно у вас есть несколько холстов? Если это оптимизация, почему бы вам просто не протестировать с и без?
Денис Сегюре
1
Вы должны удалить «другой вопрос». И не
публикуйте

Ответы:

7

Эта страница содержит отличный список оптимизаций, которые можно сделать для 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
}
CuddleBunny
источник
2
Было бы хорошо, если бы вы могли сделать небольшой реферат из этих ссылок. В противном случае ваш ответ может стать недействительным, когда ссылки перестают работать ...
MartinTeeVarga
Спасибо, эти ссылки довольно хороши. Мне удалось просто перерисовать специальные грязные области, если объект движется, например.
user1818924
@ sm4 Хорошо, я кое-что добавлю.
CuddleBunny
2

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

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

Katana314
источник
Говорить нам, что выпущенная игра делает это интересно, но не говорит нам, хорошая ли это практика. Возможно, разработчики пожалели о решении? Кроме того, некоторые источники доказательств их использования было бы неплохо.
MichaelHouse