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.glbfox.glboak.glbpine.glbchest.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 + .jsonhero_Run.png + .jsonhero_Jump.png + .jsonhero_Hit.png + .jsonhero_Victory.png + .jsonfox_Walk.png + .jsonchest_Open.png + .jsonoak_Wind.png + .jsonpine_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):
npx skills add cloudai-x/threejs-skillsMCP 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:
claude mcp add godot -- npx @coding-solo/godot-mcpMCP 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.
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:
# 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

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:
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:
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; oclone()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(ouNode3D) 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 doAnimationPlayer(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

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:
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:
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_hno 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
- 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.
- 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.
- Dê números: velocidade, altura do pulo, tempo, quantidade de moedas. Fica fácil ajustar depois ("pulo 20% mais alto").
- Peça em passos e teste cada um. Um jogo inteiro de uma vez quebra em mais lugares e é mais difícil de consertar.
- 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.