L'uso di più oggetti canvas è una buona pratica?

Stiamo sviluppando un gioco Jump and Run con HTML5 e JavaScript e per questo dobbiamo creare un framework di gioco personalizzato. Qui abbiamo alcune difficoltà e vorremmo chiederti un consiglio:

Abbiamo un oggetto "Stage", che rappresenta la radice del nostro gioco ed è un div-wrapper globale. Lo stage può contenere più "Scene", che sono anche div-elementi. Vorremmo implementare una scena per l'attività di gioco, per la pausa, ecc. E passare da una all'altra. Ogni scena può quindi contenere più "Livelli", che rappresentano una tela. Questi Layer contengono "ObjectEntities", che rappresentano immagini o altre forme come rettangoli, ecc. Ogni Objectentity ha i propri TemporaryCanvas, per poter disegnare immagini per un'entità, mentre un'altra contiene un rettangolo.

Abbiamo impostato una scena attiva nel nostro stage, quindi quando si gioca, viene disegnata solo la scena attiva. Chiamare activeScene.draw(), chiama tutti i sublayers per disegnare, che disegnano le loro entità (call drawImage(entity.canvas)). Ma è una specie di buona pratica? Hai più tele da disegnare? Ogni ciclo di gioco ogni contesto di livello viene cancellato e disegnato di nuovo. Ad esempio, abbiamo solo un livello di sfondo ancora, ... non sarebbe più utile disegnarlo una volta e non cancellarlo ogni volta e ridisegnarlo? O dovremmo usare una tela globale per esempio nello stage e usare questa tela solo per disegnare? Ma abbiamo pensato che sarebbe stato costoso ...

Questa pagina contiene un eccellente elenco di ottimizzazioni che possono essere apportate alla tela. Nella sezione "Usa più tele a strati per scene complesse" descrive perché avere più oggetti di tela è in realtà migliore in molti casi perché non è necessario ridisegnare oggetti costosi di grandi dimensioni (immagini di sfondo) con la stessa frequenza di quelli più piccoli e veloci ( proiettili). Ecco un tutorial per iniziare. In poche parole, crea semplicemente un numero di tele per cose che richiedono un disegno diverso e allineale con un posizionamento assoluto:

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

Ogni oggetto canvas può essere nominato e stratificato usando z-index:

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

Infine, disegna nei diversi contesti:

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

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

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

Contre Jour fa questo, in effetti. Non conosco molti dettagli, ma potresti essere in grado di trovare più note tecniche da loro. Se giochi, credo che ognuna delle terre di massa con cui il tuo personaggio interagisce siano tele.

Sembra essere una buona idea separare le tue parti attive del gioco in tele. Ad esempio, se stavi realizzando un RTS, la barra dei comandi potrebbe avere senso essere una tela separata da ridisegnare solo una volta ogni tanto.