Como fazer um jogo com IA: do Phaser ao Godot

Guia passo a passo para fazer um jogo com IA: um primeiro jogo de navegador em Phaser, quando ir para o Godot, game loop, licenças de assets, game feel e itch.io.

Solviera Teknoloji 10 min de leitura

O jeito mais fácil de fazer um jogo com IA é pedir a um agente de código que escreva um pequeno jogo de navegador com HTML canvas ou Phaser, jogar cada mudança no navegador na hora e ajustar a “sensação” você mesmo, porque essa é a parte que o agente não consegue julgar. Para projetos 2D ou 3D maiores, o Godot é um bom próximo passo. Quando terminar, você pode colocar o jogo no itch.io e compartilhá-lo em minutos.

Este post leva um primeiro jogo de uma pasta vazia até uma página publicada: qual ferramenta eu escolho e por quê, o primeiro prompt que dou ao agente, o game loop, arte e som (incluindo licenças), ajuste do game feel, playtest e itch.io.

Por que jogos combinam tanto com vibe coding

Jogos estão entre as coisas mais divertidas e instrutivas de construir com vibe coding. O resultado é instantâneo: mude um número e o personagem pula mais alto. Um jogo pequeno tem poucos arquivos, então o agente consegue manter tudo no contexto.

Mas há uma armadilha. “Roda” e “é divertido de jogar” estão muito distantes. O agente consegue verificar se o código funciona; não consegue verificar se o jogo é divertido. Essa parte é sua.

Qual ferramenta: canvas, Phaser, Godot ou Unity

FerramentaLinguagemBom paraTrabalhando com um agente
HTML canvasJavaScriptJogos muito simples, aprendizadoMuito fácil; tudo pode ficar num arquivo só
PhaserJavaScript / TypeScriptJogos 2D de navegadorFácil; física, cenas e animação embutidas, muitos exemplos
GodotGDScript (ou C#)2D maiores, 3D, exportação para desktop e webBom; as cenas são arquivos de texto .tscn
UnityC#3D grandes, mobile, consolesBom para código, fraco para cenas

Para um primeiro jogo, recomendo o Phaser. Canvas puro também funciona, mas fazer o agente escrever colisão, animação de sprites e tratamento de entrada do zero leva tempo; o Phaser já traz isso. E tudo é arquivo de texto rodando num navegador, então não existe um editor que o agente não enxerga.

Vá para o Godot quando o jogo crescer: muitas cenas, level design complexo, 3D ou um build para desktop. Os arquivos de cena (.tscn) e de recursos (.tres) do Godot são texto legível, então o agente pode editá-los. Ainda assim, eu monto as cenas no editor e deixo o GDScript com o agente; um errinho num arquivo de cena editado à mão pode impedir o editor de abri-lo.

O Unity é poderoso, mas é a opção mais desajeitada de conduzir com um agente. O agente escreve scripts C# com tranquilidade; cenas, prefabs e configurações do inspector vivem no editor. Se você já conhece Unity, use; para um primeiro jogo, não é a minha escolha.

Passo 1: Configuração

O que você precisa:

  • Node.js e um gerenciador de pacotes
  • Um agente de código: Claude Code, Codex, Gemini CLI, opencode ou similar
  • Git, para sempre poder voltar ao “ontem funcionava”

Comece um projeto com Vite e adicione o Phaser:

npm create vite@latest cactus-run -- --template vanilla-ts
cd cactus-run
npm install
npm install phaser
git init && git add -A && git commit -m "initial scaffold"
npm run dev

O npm run dev mostra um endereço local; abra-o para ver o jogo, e a página recarrega conforme o agente edita os arquivos.

Passo 2: O primeiro prompt

O primeiro prompt importa muito em jogos, porque “faça um jogo” entrega o jogo que o agente imagina. Mantenha o escopo pequeno e concreto:

This is a Vite + TypeScript project with Phaser installed. We're
building a simple endless runner.

Game:
- The player runs left to right and jumps with space or a tap.
- Cacti come in from the right; touching one ends the game.
- Score increases over time and shows in the top right.
- On game over, show "Press space to restart".

Rules:
- Use coloured rectangles instead of art for now.
- Put every tunable number (gravity, jump velocity, game speed,
  cactus spacing) in a single object in src/config.ts.
- Use Arcade physics.
- The game is 800x400 and scales to fit the screen.
- npx tsc --noEmit must pass.
- When done, explain the file structure and the values in config.ts.

A regra mais valiosa aqui é o config.ts. Você vai ajustar a sensação brincando com os números desse arquivo; se eles estiverem espalhados pelo código, cada ajuste vira uma volta ao agente.

A regra de “retângulos em vez de arte” também importa. Acerte a jogabilidade primeiro e depois deixe bonito. Um protótipo lindo que não é divertido é o pior resultado.

Passo 3: Entenda o game loop

No coração de todo jogo existe um loop: ler a entrada, atualizar o mundo, desenhar a tela, repetir, dezenas de vezes por segundo. O Phaser roda isso para você e chama o update(time, delta) da sua cena a cada frame. Com canvas puro, você mesmo escreve:

let last = performance.now()

function loop(now) {
  const dt = (now - last) / 1000 // seconds since the last frame
  last = now
  update(dt)
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)

O único conceito que você precisa saber é o dt: mova as coisas com base no tempo decorrido, não por frame. Às vezes os agentes escrevem x += 5, e aí o jogo roda mais rápido numa tela com taxa de atualização alta. Se você não vê dt no código de movimento, pergunte ao agente.

Passo 4: Jogue, itere, faça commit

O ciclo:

  1. Jogue por um minuto.
  2. Descreva o que sentiu, de forma concreta: “O pulo fica tempo demais no ar; desviar dos cactos está fácil demais.”
  3. Deixe o agente mudar e jogue de novo.
  4. Faça commit de cada versão que está boa.

Cole os erros do console do navegador (F12) no agente literalmente. Para problemas visuais, mande uma captura de tela.

Um aviso: não faça a lógica do jogo crescer num pedido grande. “Adicione power-ups, uma luta contra chefe e um sistema de fases” embaralha os três. Uma mecânica por vez.

Passo 5: Game feel

O que faz um jogo ser gostoso de jogar geralmente não são grandes funcionalidades, e sim pequenos detalhes. Os agentes não os adicionam sem pedido, mas implementam bem quando você pede:

  • Coyote time: permitir um pulo por um breve instante depois de sair de uma plataforma.
  • Jump buffering: lembrar um pulo apertado logo antes de aterrissar.
  • Altura de pulo variável: cortar a velocidade de subida quando o botão é solto.
  • Screen shake e hit stop: congelar por alguns frames no impacto.
  • Tweens: a pontuação saltando, um inimigo tremendo ao sumir.
  • Som: um som curto de pulo muda a sensação mais do que qualquer coisa na tela.

Este é o tipo de prompt que eu uso:

Improve the jump feel:
- Add 100 ms of coyote time and a 100 ms jump buffer.
- If space is released early, halve the upward velocity.
- On collision, add an 80 ms hit stop and a light screen shake.
Put all durations in config.ts. Don't change any other behaviour.

Depois brinque você mesmo com os números do config.ts. Essa parte não dá para delegar a uma IA; você só sente alguns milissegundos de diferença jogando.

Passo 6: Arte, som e licenças

Quando a jogabilidade estiver boa, troque os retângulos por arte de verdade. O único cuidado é com o licenciamento.

Pacotes prontos:

  • Muitos pacotes de fontes como a Kenney são CC0, utilizáveis sem nem precisar de atribuição.
  • No OpenGameArt, cada arquivo tem sua própria licença (CC0, CC‑BY, CC‑BY‑SA, GPL…). CC‑BY exige atribuição; CC‑BY‑SA pode exigir que você compartilhe trabalhos derivados sob a mesma licença. Leia a licença de cada arquivo.
  • Pacotes de assets pagos e gratuitos no itch.io vêm cada um com sua licença; confira se o uso comercial é permitido.

Mantenha um CREDITS.md ou uma tela de créditos no jogo listando a origem e a licença de cada asset.

Arte gerada por IA é rápida e tentadora, mas tem algumas ressalvas:

  • A situação de direitos autorais de conteúdo gerado por IA varia por país, e algumas questões ainda não estão resolvidas.
  • Cada ferramenta de imagem tem seus próprios termos de uso; confira o uso comercial.
  • Algumas lojas de jogos pedem que você declare conteúdo gerado por IA.
  • Também é tecnicamente trabalhoso: consistência de estilo, layout da sprite sheet e frames de animação que combinem muitas vezes exigem limpeza manual.

Minha abordagem: pacotes com licença aberta para o protótipo; para o lançamento, arte feita por mim ou cuja licença eu conheço com certeza.

Existe trabalho com assets que o agente faz bem: carregar uma sprite sheet no Phaser, definir animações, ligar os arquivos de som. Passe os nomes dos arquivos e o tamanho dos frames em vez de deixá-lo adivinhar.

Passo 7: Playtest

Quem construiu o jogo é o pior testador dele; já sabe o que fazer. O mesmo vale para o agente. O que fazer:

  • Entregue o jogo a alguém e não explique nada. Observe em silêncio onde a pessoa trava.
  • Anote: onde morreu, onde ficou entediada, o que entendeu errado.
  • Transforme essas notas em tarefas para o agente: “Os jogadores sempre batem no primeiro cacto; nada de cactos nos primeiros 5 segundos.”

Pequenas partes da lógica do jogo (pontuação, regras de colisão) podem ser verificadas com testes unitários; peça ao agente para escrevê-los. A sensação, só jogando.

Passo 8: Publicando no itch.io

Colocar um jogo de navegador no itch.io leva poucos minutos:

npm run build
cd dist && zip -r ../cactus-run.zip . && cd ..

Depois crie um novo projeto no itch.io, defina o tipo como HTML, faça upload do zip e marque como jogável no navegador. Defina o tamanho da área de exibição (800×400, por exemplo) e o botão de tela cheia. O zip precisa ter o index.html na raiz; com Vite, talvez você precise de base: './' no vite.config.ts para caminhos relativos, o que o agente pode conferir para você.

No Godot, instale o template de exportação Web, exporte para HTML5 e faça upload do mesmo jeito. Se você for atualizar com frequência, a ferramenta de linha de comando butler do itch.io automatiza os uploads.

O que os agentes costumam errar em jogos

  • Eles não veem o jogo. O agente escreve código, mas não sabe o que aparece na tela. Capturas de tela ou uma descrição do que você vê são essenciais.
  • Números mágicos. Os valores acabam espalhados pelo código. Repita a regra do config.ts a cada mecânica nova.
  • Movimento dependente de frame. Sem dt, o jogo roda em velocidades diferentes em telas diferentes.
  • APIs desatualizadas. Phaser e Godot mudaram de API entre versões major, e o agente pode escrever código para a antiga. Diga a versão: “Estamos no Godot 4, não escreva sintaxe do Godot 3.”
  • Tudo num arquivo só. Conforme o jogo cresce, peça para separar cenas, entidades e configurações em arquivos diferentes.
  • Ignorar desempenho. Com centenas de balas ou inimigos, o jogo fica lento. Peça object pooling.

Segurança

Um jogo parece inofensivo, mas as mesmas regras valem:

  • Se você adicionar um placar ou um backend multiplayer, guarde as chaves no .env e coloque o .env no .gitignore.
  • Tudo num jogo de navegador pode ser lido pelo jogador; chaves secretas nunca vão no código do cliente.
  • Não cole chaves de API no chat; diga ao agente qual variável de ambiente ler.
  • Leia os comandos que o agente roda antes de aprová-los, principalmente instalações de pacotes e exclusões.
  • Não confie em pontuações enviadas pelo cliente; trapacear num placar online é fácil.

Fazendo isso com o AgentVera

Tudo isso funciona com um terminal e um navegador. Em projetos de jogos, eu gosto de rodar alguns agentes lado a lado e ver o resultado na mesma janela, e é por isso que uso o AgentVera:

  • Experimentos separados em worktrees separados. Um agente trabalha na sensação do pulo num git worktree enquanto outro adiciona um novo tipo de inimigo em outro; descarte o experimento de que não gostar. O painel Git mostra as branches.
  • O navegador do agente. Com o navegador do agente, o agente pode abrir o jogo via Playwright e tirar capturas de tela enquanto você acompanha a aba ao vivo. Isso resolve em parte o “o agente não vê o jogo”; não resolve a sensação.
  • Terminal e editor. O npm run dev fica aberto num painel e você edita o config.ts você mesmo no editor.
  • Revisão e tokens. O code review verifica cada turno antes do merge, e o uso de tokens fica visível por painel.

O AgentVera não é uma engine de jogos; não substitui o editor do Godot nem o itch.io.

Checklist rápido

  • O primeiro jogo é pequeno: uma mecânica, uma tela
  • Os números ajustáveis ficam no config.ts
  • O movimento usa dt
  • Jogabilidade com retângulos primeiro, arte depois
  • Origem e licença de cada asset anotadas
  • Pelo menos uma pessoa jogou sem explicação
  • O zip do itch.io tem o index.html na raiz

Concluindo

Fazer um jogo com IA é um dos usos mais divertidos do vibe coding. Comece pequeno com Phaser no navegador, mantenha os números num arquivo só, acerte a jogabilidade com retângulos, ajuste a sensação com as próprias mãos e fique de olho nas licenças. O agente escreve o código; quem torna o jogo divertido é você. Para rodar experimentos com vários agentes, veja agentes de código em paralelo; para escolher uma ferramenta, veja as melhores ferramentas de CLI para programar com IA.

Perguntas frequentes

Qual engine devo usar para fazer um jogo com IA?

Para um primeiro jogo, HTML canvas ou Phaser no navegador é o mais fácil: pouca configuração, tudo é arquivo de texto e você vê o resultado na hora. Para jogos 2D ou 3D maiores, o Godot é um bom próximo passo, e como as cenas e o GDScript são texto puro, os agentes também conseguem editá-los.

A IA consegue fazer um jogo inteiro sozinha?

Ela consegue escrever a maior parte do código de um jogo pequeno, mas não consegue jogar e julgar a sensação. Altura do pulo, velocidade dos inimigos e ajuste de dificuldade vêm de você jogando e ajustando.

Posso usar arte gerada por IA no meu jogo?

Pode, mas há riscos: a situação de direitos autorais pode ser incerta dependendo do país, cada ferramenta tem seus próprios termos de uso e algumas lojas pedem que você declare conteúdo gerado por IA. Pacotes de assets com licença aberta, como os CC0, são um começo mais seguro.

A IA funciona bem com o Unity?

Os agentes escrevem bem os scripts C# do Unity. Já os arquivos de cena e de prefab do Unity são grandes e presos ao editor, então boa parte do trabalho fora do código ainda precisa ser feita à mão no editor.

Onde posso publicar um jogo de navegador que eu fiz?

O itch.io é o mais fácil: compacte o jogo gerado em zip com o index.html na raiz, faça upload e marque como jogável no navegador. GitHub Pages ou qualquer hospedagem estática também funcionam.

Reúna seus agentes em uma só mesa.

Baixe o AgentVera de graça; as CLIs que você já instalou estão prontas para usar.

Mais artigos