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

12

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 ...

user1818924
fonte
11
Por que exatamente você tem várias telas? Se é uma otimização, por que você não apenas testa com e sem?
Denys Séguret
11
Você deve remover a "outra pergunta". E não postá-lo novamente, a menos que você quer que ele se colocar "em espera" :)
MartinTeeVarga

Respostas:

7

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
}
CuddleBunny
fonte
2
Seria bom se você pudesse fazer um pequeno resumo a partir desses links. Caso contrário, sua resposta pode se tornar inválida quando as ligações parar de trabalhar ...
MartinTeeVarga
Obrigado, esses links são muito bons. Eu consegui apenas redesenhar áreas sujas especiais, se um objeto se mover, por exemplo.
User1818924
@ sm4 Bom ponto, vou acrescentar algo.
CuddleBunny
2

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.

Katana314
fonte
Nos dizer que um jogo lançado faz isso é interessante, mas não nos diz se é uma boa prática. Talvez os desenvolvedores lamentaram a decisão? Além disso, algumas fontes para evidência de seu uso seriam boas.
MichaelHouse