Para tela, ou não tela, ao criar jogos baseados em navegador?

Antecedentes: Tenho extenso histórico de desenvolvimento, mas a última vez que codifiquei um jogo foi há muitos anos. Minhas habilidades em Javascript são bastante limitadas, e pretendo aprimorá-las criando um jogo simples - Tetris, Pac-man ou algo desse nível de complexidade.

Pergunta: Parece-me que uma escolha fundamental que preciso fazer é se devo renderizar um <canvas>elemento ou não.

Com uma tela, tenho ferramentas básicas para renderizar pontos, linhas e coisas mais complexas. Presumivelmente, existem, ou existirão, também várias estruturas para ajudar nisso.

Sem uma tela, eu poderia manter meus objetos na árvore DOM, como uma página da Web normal, apenas bastante complexa, com muitos elementos sobrepostos.

Uma abordagem é melhor que a outra? Eles são mutuamente exclusivos? Como sei qual escolher?

Canvas e DOM não são mutuamente exclusivos, embora sejam bastante separados. Uma boa abordagem seria renderizar a área principal do jogo (por exemplo, as peças que caem no Tetris) usando o Canvas e fazer toda a interface do usuário (por exemplo, exibição de pontuação) com elementos DOM que se sobrepõem ao elemento da tela.

Dito isto, essa abordagem não é realmente necessária para um jogo primitivo como o Tetris. O Canvas é útil para efeitos gráficos mais avançados, mas se não forem necessários, a adesão ao DOM fornecerá uma compatibilidade mais ampla; nem todos os navegadores são compatíveis com o HTML5 Canvas.

Sobre o DOM O
DOM funciona muito bem para o 2D da velha escola, o que significa não usar rotação ou escala de imagem. Na verdade, existem ferramentas para esses dois trabalhos, mas você não pode contar com um bom desempenho.

Para um jogo, você deve confiar no mecanismo de layout do navegador o mínimo possível, o que significa usar position:absolutepara colocar objetos. Tente, na medida do possível, não criar e destruir objetos DOM o tempo todo, se precisar de um número altamente variável de objetos, convém definir um conjunto de elementos DOM inativos display:none, prontos para serem revividos quando necessário.

DOM vs canvas
Com a participação de mercado do IE8, a tela cada vez menor está se tornando uma opção cada vez mais atraente, para a maioria dos jogos é provavelmente uma boa escolha. Mas, para alguns trabalhos, o DOM é a ferramenta mais fácil de usar, você pode usar algum fluxo de documento, se necessário, capturar cliques diretamente pelo objeto renderizado, é fácil integrar barras de rolagem.

É difícil cobrir a diferença de desempenho, depende do trabalho e varia muito de navegador para navegador.

Depende completamente do tipo de jogo, embora a tela se encaixe na "maioria" deles.

O gerenciamento do DOM fica horrível em um determinado ponto, quanto mais elementos você fica mais lento, mais elementos você se move O EXTREMAMENTE MAIS LENTO.

O gerenciamento da ordem de carregamento de ativos com elementos IMG é ... não trival (erros de interceptação em protocolos quebrados propositadamente nas tags de imagem: D).

Embora, para jogos com imagens principalmente estáticas e baixa contagem de efeitos, eu ainda usaria o DOM. Tudo o resto, a tela é a primeira escolha (aponte e clique nas coisas, embora os hitmaps sejam uma história diferente).

Hoje em dia, a tela é tão rápida (mesmo no iPhone) que quase não há razão para não usá-la.

Se você está criando um jogo em HTML5, a tela é muito melhor. Aqui está o porquê:

1. Velocidade - pense na tela como uma imagem. Você desenha a imagem e depois esquece o que desenhou. Isso aumenta drasticamente o desempenho, comparado ao DOM ou SVG. O que os aplicativos DOM e SVG fazem é acompanhar todos os objetos que você coloca na tela. Isso significa que, se você tiver um nível grande com muitos objetos na tela, especialmente fora da tela ou ocultos, eles serão desenhados e rastreados de qualquer maneira.
2. Recursos de desenho - Embora os elementos DOM tenham poderosas transformações CSS3, isso não é nada comparado aos recursos da tela. A tela pode desenhar qualquer objeto, ter poderoso suporte ao gradiente, plugins para exibir objetos em 3D, filtros, etc.
3. Suporte - Ao usar o DOM, quando você deseja usar recursos experimentais como transformações ou animações, é necessário usar os prefixos -moz-, -webkit-, -o- e -ms- no CSS. Na tela, você não precisa se preocupar com isso. Apenas desenhe com uma função e pronto. Outra vantagem da tela relacionada ao suporte é como o aplicativo é exibido. Como desenvolvedor de sites, a falta de padronização do DOM entre os navegadores me deixa maluco. Planos de fundo, gradientes, transformações etc. são exibidos de maneira diferente entre os navegadores, apesar das especificações detalhadas do W3C. Na tela, eu encontrei apenas uma coisa que pode ser diferente - planos de fundo. Ao exibir um plano de fundo lado a lado, alguns navegadores terão "tile-x" como centro do bloco em 0px no eixo x, enquanto outros o consideram apenas como lado a lado.
4. Bibliotecas e documentação - Existem toneladas de ótimas bibliotecas em documentações para criar jogos com a tela. Algumas bibliotecas: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs, etc. Eu poderia listar muito mais, mas Não há sentido.

Desvantagem - Animação - Embora existam muitas ótimas bibliotecas para animação, eu amo animações CSS3. É tão fácil criar, manipular e acionar. Existem vários hacks para fazer com que as animações CSS3 funcionem com objetos com a tela, mas suspeito que a maioria das pessoas prefere não usar esse método.

Boa sorte com o seu jogo, e espero ver o que você faz!

Se você considerar segmentar navegadores móveis, em particular o Android, e o jogo contiver gráficos em movimento, evite a animação do DOM. O navegador de ações no Android é inútil, mesmo que seja o kit da web. Confira este tópico de problemas do Android antes de começar: "Renderização terrível de animações CSS3 e Javascript no navegador e no WebView" .

A tela em si pode não ser mais rápida, mas há estruturas para chamar a aceleração de hardware para animações de tela, por exemplo, CocoonJS . Há um link para um vídeo no site, mostrando os ganhos de desempenho que você pode obter usando a estrutura (mas não tenho permissão para postar mais de dois links, por algum motivo).

Resposta simples: WebGL com fallback de tela.

Resposta sutil: se o seu jogo tiver muito texto, sobreponha uma camada de texto HTML. O Pixi.js é uma estrutura de exibição reforçada para a batalha, com alguns extras úteis que funcionam bem para isso.

Lembre-se de que DOM significa modelo de objeto de documento . Você vai querer usá-lo para criar jogos apenas em situações muito raras e preferir telas na maioria dos casos.

Mesmo que seu jogo tenha pequenos requisitos gráficos, fazê-lo no DOM terá um desempenho ruim; qualquer coisa além de Tetris provavelmente funcionará mal.

Tenho um exemplo do mundo real: quando criei uma implementação do Jogo da Vida de Conway, comecei com uma tabela de 500 x 500, alterando a cor de fundo das células. Nesta versão, um planador não estava rodando a mais de 30 qps, padrões maiores resultaram em pouco mais de 1. Na minha versão canvas deste jogo, agora é possível executar padrões muito maiores (população de 1000 ou mais) sem problemas em ~ 30 qps.

Além disso, esse também deve ser o caso do SVG (Scalable Vector Graphics), embora eu nunca tenha tentado isso na prática.

Edit : Eu tenho que admitir que o meu exemplo não é muito bom (porque tabelas = ruim). Mas o ponto principal ainda é verdadeiro: a manipulação do DOM é para documentos. O navegador precisa procurar CSS e alocar mais memória quando você trabalha em elementos. Realmente não faz sentido ser mais rápido que a tela.