L'utilisation de plusieurs objets canvas est-elle une bonne pratique?

Nous développons un jeu de saut et d'exécution avec HTML5 et JavaScript et devons créer un propre cadre de jeu pour cela. Nous avons ici quelques difficultés et souhaitons vous demander quelques conseils:

Nous avons un objet "Stage", qui représente la racine de notre jeu et est un div-wrapper global. La scène peut contenir plusieurs «scènes», qui sont également des éléments div. Nous implémenterions une scène pour la tâche de lecture, pour la pause, etc. et basculer entre eux. Chaque scène peut donc contenir plusieurs "Layers", représentant une toile. Ces couches contiennent des "ObjectEntities", qui représentent des images ou d'autres formes comme des rectangles, etc. Chaque Objectentity a ses propres temporairesCanvas, pour pouvoir dessiner des images pour une entité, tandis qu'une autre contient un rectangle.

Nous définissons une scène active dans notre scène, donc lorsque le jeu est joué, seule la scène active est dessinée. Appel activeScene.draw(), appelle toutes les sous-couches à dessiner, qui dessinent leurs entités (appel drawImage(entity.canvas)). Mais est-ce une sorte de bonne pratique? Vous avez plusieurs toiles à dessiner? Chaque boucle de jeu, chaque contexte de couche est effacé et dessiné à nouveau. Par exemple, nous avons juste un calque d'arrière-plan,… ne serait-il pas plus utile de le dessiner une fois et de ne pas l'effacer à chaque fois et de le redessiner? Ou devrions-nous utiliser un canevas global par exemple dans la scène et simplement utiliser ce canevas pour dessiner? Mais nous pensions que ce serait trop cher ...

Cette page contient une excellente liste d'optimisations pouvant être apportées au canevas. Dans la section intitulée "Utiliser plusieurs toiles en couches pour des scènes complexes", il explique pourquoi avoir plusieurs objets canevas est en fait mieux dans de nombreux cas, car vous n'avez pas à redessiner de gros objets coûteux (images d'arrière-plan) aussi souvent que des objets plus petits et à mouvement rapide ( projectiles). Voici un tutoriel pour vous aider à démarrer. En un mot, créez simplement un certain nombre de toiles pour des choses qui nécessitent un dessin différent et alignez-les avec un positionnement absolu:

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

Chaque objet canevas peut être nommé et superposé à l'aide de z-index:

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

Enfin, dessinez dans les différents contextes:

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

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

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

Contre Jour le fait, en fait. Je ne connais pas beaucoup de détails, mais vous pourrez peut-être en trouver plus de notes techniques. Si vous jouez à leur jeu, je crois que chacune des masses terrestres avec lesquelles votre personnage interagit sont des toiles.

Il semble que ce soit une bonne idée de séparer vos parties actives du jeu dans des toiles. Par exemple, si vous créez un RTS, la barre de commandes peut être utile pour être un canevas séparé à redessiner uniquement de temps en temps.