Desenvolvimento de Jogos para Navegador Web

Seleção de framework e princípios específicos do navegador. Para detalhes sobre a escolha da stack, veja game-development/engine-selection.

1. Seleção de Framework

Árvore de Decisão

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser 4
│   ├── Fast prototype / jam?      → Kaplay
│   ├── Raw rendering power?       → PixiJS 8
│   └── Tiny / no dependency?      → Raw Canvas / WebGL
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused?         → Three.js
│
├── Hybrid (DOM UI + canvas moments)
│   └── Custom shell + guest viewport
│       (Canvas/Kaplay/Phaser/Pixi inside a region/modal)
│
└── Narrative-first
    └── Ink (inkjs) or Twine export + DOM host

Comparação

Shell híbrida + convidado

Use quando o "chrome" (elementos externos ao jogo) for HTML (menus, inventários, texto, dashboards), mas as partes de jogabilidade precisarem de um canvas:

1. Monte o convidado em um contêiner; passe o contexto.
2. Execute um loop de jogo local no convidado.
3. Retorne resultados (pontuação, aprovação/reprovação); destrua o convidado (RAF, listeners, contexto GL conforme necessário).

Não permita que o convidado controle o roteamento global do aplicativo, a menos que o produto seja um jogo em tela cheia.

2. Adoção do WebGPU

Suporte do Navegador (2025)

Decisão

• Novos projetos com uso intensivo de GPU: Use WebGPU com fallback para WebGL
• Amplo suporte legado / 2D simples: Comece com WebGL ou Canvas 2D
• Detecção de funcionalidades: Verifique navigator.gpu

3. Princípios de Performance

Restrições do Navegador

Prioridade de Otimização

1. Compressão de assets - KTX2, Draco, WebP
2. Carregamento preguiçoso (Lazy loading) - Carregar sob demanda
3. Pool de objetos - Evitar GC (Garbage Collection)
4. Agrupamento de chamadas de desenho (Draw call batching) - Reduzir mudanças de estado
5. Web Workers - Descarregar computação pesada

4. Estratégia de Assets

5. PWA para Jogos

Benefícios: jogabilidade offline, instalação, tela cheia, notificações push opcionais. Requisitos: service worker, manifest de aplicativo web, HTTPS.

6. Manipulação de Áudio

• Criar/retomar AudioContext no primeiro clique/toque
• Preferir Web Audio API; agrupar fontes; pré-carregar SFX comuns
• Comprimir com WebM/Opus quando possível

7. Anti-Padrões

Lembre-se: O navegador é a plataforma mais acessível. Respeite suas limitações.

Quando Usar

Use ao construir jogos HTML5/WebGL/WebGPU, escolher um runtime de navegador ou conectar convidados híbridos DOM+canvas.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.