Todos os guias
  • Claude
  • three.js
  • Godot 4
  • Sprites 2D

Seu primeiro jogo com IA: 2 mini jogos (3D e 2D) com Claude, Godot e three.js

Baixe personagens, bichos e árvores prontos, entregue ao Claude com um bom prompt e jogue o resultado aqui mesmo.

9 min de leitura

Você não precisa saber modelar, animar nem programar tudo do zero. Neste guia, você baixa personagens, bichos e árvores prontos no Studio Tank, entrega para o Claude com um bom prompt e sai com dois mini jogos funcionando: um 3D e um 2D. Os dois abaixo são de verdade, feitos com estes mesmos arquivos. Aperte Jogar para testar.

O que você vai precisar

  • Conta no Studio Tank (grátis). O plano grátis dá 5 downloads por mês, o bastante para começar; o Pro libera downloads ilimitados, objetos como o baú e licença comercial para vender o jogo.
  • Claude, de preferência o Claude Code: ele cria os arquivos, roda o projeto e corrige o que quebrar. O Claude do navegador também serve; aí você copia o código para o seu projeto.
  • Godot 4 (grátis, godotengine.org) ou Node.js para o three.js. Escolha um; o guia tem prompt para os dois.

1. Baixe os assets no estúdio

Abra o estúdio, monte (ou sorteie) o personagem e clique em Baixar. Para o jogo 3D, escolha GLB com as animações que o jogo usa. Para o 2D, escolha Sprites, 1 direção (de lado), 128 px e 12 fps. Repita para a raposa (Animais), as árvores (Natureza) e o baú (Objetos).

Jogo 3D: arquivos GLB (30 fps)

  • hero.glb
  • fox.glb
  • oak.glb
  • pine.glb
  • chest.glb

Clipes: herói Idle, Run, Jump, Hit e Victory; raposa Idle, Walk e Run; árvores Wind; baú Open.

Jogo 2D: sprites de lado (12 fps)

  • hero_Idle.png + .json
  • hero_Run.png + .json
  • hero_Jump.png + .json
  • hero_Hit.png + .json
  • hero_Victory.png + .json
  • fox_Walk.png + .json
  • chest_Open.png + .json
  • oak_Wind.png + .json
  • pine_Wind.png + .json

Cada animação é uma folha PNG com um JSON de atlas (o formato que Phaser, Pixi e TexturePacker leem).

2. Prepare o Claude

Três coisas deixam o resultado muito melhor. Nenhuma é obrigatória, mas todas valem o minuto que levam.

Skill de three.js

Skills são pacotes de instruções que o Claude Code carrega quando o assunto aparece. O pacote threejs-skills (código aberto, MIT) ensina o jeito certo de carregar GLB, tocar animações, fazer sombras e manter o jogo leve. Instale com o comando abaixo (ou copie a pasta skills/ do repositório para .claude/skills):

Terminal
npx skills add cloudai-x/threejs-skills

MCP do Godot

Com o godot-mcp (código aberto, MIT), o Claude Code abre o editor, cria cenas e roda o projeto para ver os erros sozinho:

Terminal
claude mcp add godot -- npx @coding-solo/godot-mcp

MCP do Studio Tank (opcional)

Se você tem uma chave da API, o Claude pode montar e baixar o personagem por você: "crie um explorador de chapéu e exporte em GLB com Idle, Run e Jump". Animais, árvores e objetos você baixa pelo estúdio. Veja a documentação da API e do MCP.

Terminal
claude mcp add --transport http studio-tank https://avatar.tankpvp.com/mcp \
  --header "Authorization: Bearer $STUDIO_TANK_KEY"

Um CLAUDE.md com os fatos dos assets

O Claude lê o CLAUDE.md da raiz do projeto em toda conversa. Cole isto nele e você não precisa repetir escala, direção e nomes de clipe em cada pedido:

CLAUDE.md
# Assets do Studio Tank (leia antes de mexer nos modelos)
- Personagens chibi e voxel: ~1,6 m de altura, 1 unidade = 1 metro, olham para +Z.
- Todos usam o MESMO esqueleto de 12 ossos (Root, Hips, Spine, Head, UpperArm_L/R, Hand_L/R,
  UpperLeg_L/R, Foot_L/R) e os mesmos nomes de clipe: trocar hero.glb por outro personagem não muda o código.
- Nomes dos clipes = nomes do estúdio (Idle, Walk, Run, Jump, Attack, Hit, Death, Victory, Dance...).
  Tocam uma vez: Jump, Attack, Hit, Death, Victory. Os outros repetem.
- Material: uma textura-paleta pequena (uma cor por zona). Não troque o material; para recolorir, baixe de novo.
- Animais, árvores e objetos têm esqueleto e clipes próprios (veja os nomes dentro do arquivo).
- Sprites: um PNG + um JSON (formato "hash" do TexturePacker) por animação. De lado = olhando para a direita.
  meta.fps é a velocidade e meta.loop diz se repete. Os quadros vêm em ordem pelo nome.

3. Mini jogo 3D: Caça às moedas

Mini jogo 3D: o explorador do Studio Tank corre numa ilha com árvores, moedas e uma raposa

WASD ou setas para andar · espaço para pular · no celular, arraste o joystick

Junte as 10 moedas antes de o tempo acabar, fuja da raposa e abra o baú. Este é o prompt para o three.js:

Prompt · three.js
Crie um mini jogo 3D no navegador com three.js e Vite, chamado "Caça às moedas".

Assets (já estão em public/assets, baixados do Studio Tank):
- hero.glb: personagem chibi de ~1,6 m, olha para +Z, clipes Idle, Run, Jump, Hit e Victory (30 fps)
- fox.glb: raposa, clipes Idle, Walk e Run
- oak.glb e pine.glb: árvores, clipe Wind (balanço)
- chest.glb: baú, clipe Open
Todos usam 1 unidade = 1 metro e uma textura-paleta (não troque os materiais).

O jogo:
1. Ilha redonda (raio 15 m) cercada de água, com 14 árvores espalhadas. Copie as árvores com
   SkeletonUtils.clone e toque Wind em cada uma, começando em tempos diferentes. Ponha cada modelo
   dentro de um THREE.Group e posicione o grupo (alguns clipes animam a raiz do arquivo).
2. O jogador anda com WASD/setas (e um joystick de toque no celular) e pula com espaço. Gire o modelo
   para a direção do movimento com Math.atan2(x, z). Troque Idle/Run/Jump com crossFade de 0,15 s;
   Jump e Hit tocam uma vez (LoopOnce + clampWhenFinished).
3. 10 moedas douradas (cilindro do próprio three.js) girando. Com todas, o baú aparece; encostar nele
   toca Open e o jogador comemora com Victory.
4. A raposa passeia (Walk) e corre atrás do jogador (Run) quando ele chega a 7 m. Se encostar, o jogador
   toca Hit, é empurrado e perde uma moeda, que volta para a ilha.
5. 70 segundos para vencer. HUD em HTML com moedas e tempo, e tela de fim com "Jogar de novo".
6. Câmera em terceira pessoa, de cima e de trás, seguindo suave. Sombras ligadas.

Trabalhe em passos: primeiro a cena com o personagem andando, depois moedas, raposa e fim de jogo.
Rode com npm run dev e me diga o que testar a cada passo.

E o mesmo jogo no Godot 4:

Prompt · Godot 4 (3D)
Crie um mini jogo 3D no Godot 4 (GDScript), chamado "Caça às moedas".

Assets em res://assets (GLB do Studio Tank, 1 unidade = 1 m, o modelo olha para +Z):
- hero.glb: Idle, Run, Jump, Hit, Victory
- fox.glb: Idle, Walk, Run
- oak.glb e pine.glb: Wind
- chest.glb: Open

1. Na importação, marque Loop em Idle, Run, Walk e Wind (Advanced Import Settings > Animation).
2. Cena principal: ilha redonda (CSGCylinder3D verde, raio 15) sobre um plano de água,
   DirectionalLight3D com sombra e WorldEnvironment com céu claro. 14 árvores espalhadas tocando Wind.
3. Jogador: CharacterBody3D com cápsula e o hero.glb como filho. WASD/setas movem (relativo à câmera),
   espaço pula. Use o AnimationPlayer do GLB: play("Run"), play("Idle"), com blend de 0,15 s.
   O modelo olha para +Z: gire com atan2(direção.x, direção.z).
4. 10 moedas (Area3D com cilindro dourado) girando. Com todas, o baú aparece; ao chegar nele, toca Open
   e o jogador toca Victory.
5. A raposa (CharacterBody3D) passeia com Walk e persegue o jogador com Run a menos de 7 m. Ao encostar,
   o jogador toca Hit, é empurrado e perde uma moeda.
6. Timer de 70 s, HUD com Label (moedas e tempo) e tela de vitória/derrota com botão "Jogar de novo".

Crie os arquivos .tscn e .gd e diga onde ligar cada sinal. Se o MCP do Godot estiver ligado, crie as cenas
por ele e rode o projeto para conferir.

Dicas para os assets 3D

  • Várias cópias do mesmo modelo animado (as árvores): no three.js use SkeletonUtils.clone; o clone() comum divide o esqueleto entre as cópias e todas se mexem juntas.
  • Posicione um grupo, não o modelo: ponha cada GLB dentro de um Group (ou Node3D) e mova o grupo. Alguns clipes animam a raiz do arquivo (o baú abrindo) e, sem o grupo, o modelo pula para a origem.
  • Direção: o modelo olha para +Z. Para virar na direção do movimento: rotation.y = atan2(x, z).
  • Transição suave: troque de clipe com crossFadeTo (three.js) ou o blend do AnimationPlayer (Godot), de 0,1 a 0,2 s.
  • Godot: GLB importado não vem com loop ligado. Marque Loop nos clipes de andar, correr e parado na importação.
  • Escala certa de cara: 1 unidade = 1 metro. Se o personagem parece pequeno, aproxime a câmera em vez de aumentar o modelo.

4. Mini jogo 2D: Pulo da raposa

Mini jogo 2D de plataforma com os sprites do Studio Tank: explorador, raposas, árvores e baú

A/D ou setas para correr · espaço para pular · pise nas raposas

Corra até o baú no fim da fase, pegue as moedas e pise nas raposas (de lado elas machucam). No Godot 4:

Prompt · Godot 4 (2D)
Crie um jogo de plataforma 2D no Godot 4 (GDScript), chamado "Pulo da raposa".

Sprites em res://sprites (Studio Tank: de lado, olhando para a direita, quadros de 128 px, 12 fps).
Cada animação é um PNG + um JSON no formato "hash" (frames[nome].frame = x, y, w, h; meta.fps; meta.loop):
- hero_Idle, hero_Run, hero_Jump, hero_Hit, hero_Victory
- fox_Walk, chest_Open
- oak_Wind e pine_Wind (árvores, quadros de 256 px, 8 fps)

1. Escreva um script @tool que lê cada JSON e monta um SpriteFrames (.tres) com uma animação por
   arquivo: quadros em ordem pelo nome, velocidade = meta.fps, loop = meta.loop.
2. Jogador: CharacterBody2D + AnimatedSprite2D. Setas/A-D correm (300 px/s), espaço pula, com
   "coyote time" de 0,1 s. Vire com flip_h ao ir para a esquerda. O pé não fica na borda do quadro:
   ajuste o offset do sprite para os pés encostarem no chão.
3. Fase de ~4.000 px: chão com buracos e plataformas (TileMapLayer ou StaticBody2D), árvores animadas
   no fundo e um Parallax2D com morros.
4. Moedas (Area2D) para coletar. Raposas patrulham: pular em cima elimina; encostar de lado tira uma
   de 3 vidas (o jogador toca hero_Hit). Cair no buraco também tira uma vida.
5. No fim da fase, o baú: ao encostar, toca chest_Open, o jogador toca hero_Victory e aparece a tela
   de vitória com as moedas pegas.
Camera2D seguindo o jogador, presa nos limites da fase.

Prefere no navegador, sem instalar nada? O mesmo jogo em canvas:

Prompt · navegador (canvas)
Crie o mesmo jogo de plataforma 2D ("Pulo da raposa") no navegador, num único arquivo HTML com canvas e
JavaScript puro, sem biblioteca. Os sprites estão em ./sprites (mesmos nomes e formato da lista acima).

- Carregue cada JSON com fetch e a imagem de meta.image; ordene os quadros pelo nome.
- Quadro atual = floor(tempo * meta.fps) (com loop) ou o último quadro (sem loop).
- Desenhe com drawImage; para olhar para a esquerda, use scale(-1, 1).
- Ache a linha do pé de cada folha (última linha com pixel opaco no primeiro quadro) e use para
  alinhar os bonecos no chão.
- Mesmas regras: correr, pular com coyote time, moedas, raposas (pisar elimina, de lado machuca),
  3 vidas, buracos e o baú no fim. Canvas 960x540 que se ajusta à largura da tela.

Dicas para os sprites

  • Os quadros vêm em ordem pelo nome (Run_side_000, Run_side_001...). Ordenar pelo nome basta.
  • Pé no chão: o desenho não encosta na borda de baixo do quadro. Meça uma vez a última linha com pixel e use como offset.
  • De lado olha para a direita. Para a esquerda, espelhe (flip_h no Godot, scale(-1, 1) no canvas).
  • Visão de cima ou isométrica? Baixe com 4 ou 8 direções: cada linha da folha é uma direção, na ordem do JSON.
  • Pixel art nítida: sprites de 64 px com filtro "nearest" (Godot: Texture Filter Nearest) dão o visual retrô.

5. Como escrever um prompt que funciona

  1. Diga o jogo em uma frase antes das regras. "Plataforma de lado em que se corre até um baú" orienta tudo o que vem depois.
  2. Liste os arquivos com os clipes. O Claude não abre o GLB para adivinhar; com os nomes, ele escreve o código certo de primeira.
  3. Dê números: velocidade, altura do pulo, tempo, quantidade de moedas. Fica fácil ajustar depois ("pulo 20% mais alto").
  4. Peça em passos e teste cada um. Um jogo inteiro de uma vez quebra em mais lugares e é mais difícil de consertar.
  5. Mostre o erro: cole a mensagem do console ou um print. "A raposa anda de costas" resolve mais rápido do que "não funciona".

6. Do mini jogo a um jogo seu

Todos os personagens chibi e voxel do Studio Tank usam o mesmo esqueleto e os mesmos nomes de animação. Então o passo mais divertido é de graça: sorteie outro personagem no estúdio, baixe e troque o arquivo. Pirata, robô ou zumbi, o código continua igual. Depois, peça ao Claude uma coisa nova de cada vez: um inimigo que atira (clipe Shoot), uma casa para entrar, um mapa maior com o Mundo do estúdio.

Comece pelo personagem

Monte ou sorteie o seu herói no estúdio e baixe em GLB ou sprites. Grátis para começar.

Abrir o estúdioAPI e MCP