Usar vários objetos de tela é uma boa prática?

Estamos desenvolvendo um jogo de salto e corrida com HTML5 e JavaScript e precisamos criar uma estrutura de jogo própria para isso. Aqui temos algumas dificuldades e gostaria de pedir alguns conselhos:

Temos um objeto "Stage", que representa a raiz do nosso jogo e é um empacotador div global. O palco pode conter várias "cenas", que também são elementos div. Implementaríamos uma cena para a tarefa de reprodução, pausa, etc. e alternaríamos entre elas. Cada cena pode, portanto, conter várias "Camadas", representando uma tela. Essas camadas contêm "ObjectEntities", que representam imagens ou outras formas, como retângulos, etc. Cada Objectentity possui suas próprias telas temporárias, para poder desenhar imagens para uma entidade, enquanto outra contém um retângulo.

Definimos uma cena ativa em nosso Palco; portanto, quando o jogo é jogado, apenas a cena ativa é desenhada. Chamando activeScene.draw(), chama todas as subcamadas para desenhar, que desenham suas entidades (chamando drawImage(entity.canvas)). Mas isso é algum tipo de boa prática? Tendo várias telas para desenhar? Cada loop de jogo, todo contexto de camada é limpo e desenhado novamente. Por exemplo, temos apenas uma camada de fundo ainda ... não seria mais útil desenhar isso uma vez e não limpá-lo todas as vezes e redesenhar? Ou devemos usar uma tela global, por exemplo, no Palco e apenas usar essa tela para desenhar? Mas nós pensamos que isso seria muito caro ...

Esta página contém uma excelente lista de otimizações que podem ser feitas na tela. Na seção "Usar várias telas em camadas para cenas complexas", descreve por que ter vários objetos de tela é realmente melhor em muitos casos, porque você não precisa redesenhar grandes objetos caros (imagens de plano de fundo) com a mesma frequência que objetos pequenos e rápidos ( projéteis). Aqui está um tutorial para você começar. Em poucas palavras, basta criar várias telas para itens que exigem desenho diferente e alinhá-las com posicionamento absoluto:

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

Cada objeto de tela pode ser nomeado e em camadas usando o z-index:

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

Por fim, desenhe para os diferentes contextos:

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

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

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

Contre Jour faz isso, de fato. Não conheço muitos detalhes, mas você pode encontrar mais notas técnicas com eles. Se você jogar o jogo deles, acredito que cada uma das massas terrestres com as quais seu personagem interage são telas.

Parece uma boa idéia separar suas partes ativas do jogo em telas. Por exemplo, se você estava criando um RTS, a barra de comando pode fazer sentido ser uma tela separada para redesenhar apenas de vez em quando.