Phaser ou DOM puro? Como escolher

Quem vai fazer o primeiro jogo para navegador esbarra cedo nesta dúvida. De um lado, o Phaser, o framework de jogos 2D em JavaScript criado por Richard Davey e mantido como código aberto. Do outro, nada: só a plataforma web. As duas escolhas são boas, para jogos diferentes.

O que o Phaser entrega

O Phaser desenha em WebGL, com Canvas como alternativa, e traz pronto o que quase todo jogo 2D precisa: carregamento de recursos, sprites e animações, cenas, câmera, entrada unificada, áudio e física. A física Arcade resolve colisões simples entre retângulos e círculos com custo baixo, e o Matter.js está integrado para simulações mais elaboradas. O gerenciador de escala ajusta o jogo a qualquer tamanho de tela.

Uma cena mínima tem esta forma:

class Arena extends Phaser.Scene {
  preload() {
    this.load.image('tita', 'tita.png');
  }
  create() {
    this.titas = this.physics.add.group();
    this.input.on('pointerdown', (p) => {
      this.raio(p.x, p.y);
    });
  }
  update(time, delta) {
    // movimento e regras a cada quadro
  }
}

Não é brinquedo: a primeira versão de Vampire Survivors, feita para navegador, foi construída com Phaser antes de o jogo ser portado para outro motor.

O que o DOM entrega

HTML e CSS são um motor de interface excelente. Texto, botões, menus, layout responsivo e acessibilidade já vêm resolvidos. Para jogos de cartas, quebra-cabeças, jogos de palavras, incrementais e arcades com poucos objetos, isso cobre quase tudo. O custo inicial é zero: nenhum pacote para baixar, nenhuma etapa de build.

Três perguntas

Quantas coisas se movem ao mesmo tempo?

Até algumas dezenas de elementos, o DOM dá conta com folga. Centenas de projéteis, partículas ou inimigos pedem renderização em lote, e aí o Phaser ganha.

Você precisa de física ou de mapas?

Plataforma com colisão, tilemaps, câmera que segue o personagem: tudo isso existe pronto no Phaser. Escrever na mão é possível, mas raramente é o melhor uso do seu tempo.

Quanto do jogo é interface?

Se a maior parte da tela é texto, botões e painéis, o DOM é o caminho natural. Em um motor baseado em Canvas, cada botão e cada quebra de linha é trabalho seu.

Dá para misturar

Uma solução comum é usar o Phaser só para a área de ação e montar menus e HUD em HTML por cima. Você fica com o melhor dos dois, ao preço de manter duas camadas em sincronia.

Nossa escolha

O OLYMPUS: 300 tem poucos objetos, nenhuma física além de andar em linha reta e muita interface. Pelas três perguntas, DOM. O relato completo está em Como fizemos OLYMPUS: 300 sem Canvas.

Phaser ou DOM puro? Como escolher a base de um jogo pequeno