Todas las guías
  • Claude
  • three.js
  • Godot 4
  • Sprites 2D

Tu primer juego con IA: 2 minijuegos (3D y 2D) con Claude, Godot y three.js

Descarga personajes, animales y árboles listos, dáselos a Claude con un buen prompt y juega el resultado aquí mismo.

9 min de lectura

No necesitas modelar, animar ni programar todo desde cero. En esta guía descargas personajes, animales y árboles listos en Studio Tank, se los das a Claude con un buen prompt y terminas con dos minijuegos funcionando: uno 3D y uno 2D. Los dos de abajo son de verdad, hechos con estos mismos archivos. Pulsa Jugar para probarlos.

Qué necesitas

  • Una cuenta en Studio Tank (gratis). El plan gratis da 5 descargas al mes, suficiente para empezar; Pro libera descargas ilimitadas, objetos como el baúl y licencia comercial para vender el juego.
  • Claude, mejor Claude Code: crea los archivos, ejecuta el proyecto y arregla lo que se rompa. Claude en el navegador también sirve; entonces copias el código a tu proyecto.
  • Godot 4 (gratis, godotengine.org) o Node.js para three.js. Elige uno; la guía tiene prompts para los dos.

1. Descarga los assets en el estudio

Abre el estudio, arma (o sortea) el personaje y haz clic en Descargar. Para el juego 3D, elige GLB con las animaciones que usa el juego. Para el 2D, elige Sprites, 1 dirección (de lado), 128 px y 12 fps. Repite con el zorro (Animales), los árboles (Naturaleza) y el baúl (Objetos).

Juego 3D: archivos GLB (30 fps)

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

Clips: héroe Idle, Run, Jump, Hit y Victory; zorro Idle, Walk y Run; árboles Wind; baúl Open.

Juego 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 animación es una hoja PNG con un JSON de atlas (el formato que leen Phaser, Pixi y TexturePacker).

2. Prepara a Claude

Tres cosas mejoran mucho el resultado. Ninguna es obligatoria, pero todas valen el minuto que llevan.

Skill de three.js

Las skills son paquetes de instrucciones que Claude Code carga cuando aparece el tema. El paquete threejs-skills (código abierto, MIT) enseña la forma correcta de cargar GLB, reproducir animaciones, hacer sombras y mantener el juego ligero. Instálalo con el comando de abajo (o copia la carpeta skills/ del repositorio a .claude/skills):

Terminal
npx skills add cloudai-x/threejs-skills

MCP de Godot

Con godot-mcp (código abierto, MIT), Claude Code abre el editor, crea escenas y ejecuta el proyecto para ver los errores por su cuenta:

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

MCP de Studio Tank (opcional)

Con una clave de la API, Claude puede armar y descargar el personaje por ti: "crea un explorador con sombrero y expórtalo en GLB con Idle, Run y Jump". Animales, árboles y objetos se descargan en el estudio. Mira la documentación de la API y del MCP.

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

Un CLAUDE.md con los datos de los assets

Claude lee el CLAUDE.md de la raíz del proyecto en cada conversación. Pega esto y no tendrás que repetir escala, dirección y nombres de clip en cada pedido:

CLAUDE.md
# Assets de Studio Tank (léelo antes de tocar los modelos)
- Personajes chibi y vóxel: ~1,6 m de alto, 1 unidad = 1 metro, miran hacia +Z.
- Todos usan el MISMO esqueleto de 12 huesos (Root, Hips, Spine, Head, UpperArm_L/R, Hand_L/R,
  UpperLeg_L/R, Foot_L/R) y los mismos nombres de clip: cambiar hero.glb por otro personaje no cambia el código.
- Nombres de los clips = nombres del estudio (Idle, Walk, Run, Jump, Attack, Hit, Death, Victory, Dance...).
  Se reproducen una vez: Jump, Attack, Hit, Death, Victory. Los demás se repiten.
- Material: una textura-paleta pequeña (un color por zona). No la cambies; para recolorear, descarga de nuevo.
- Animales, árboles y objetos tienen esqueleto y clips propios (mira los nombres dentro del archivo).
- Sprites: un PNG + un JSON (formato "hash" de TexturePacker) por animación. De lado = mirando a la derecha.
  meta.fps es la velocidad y meta.loop dice si se repite. Los cuadros vienen en orden por nombre.

3. Minijuego 3D: Caza de monedas

Minijuego 3D: el explorador de Studio Tank corre en una isla con árboles, monedas y un zorro

WASD o flechas para moverte · espacio para saltar · en el móvil, arrastra el joystick

Junta las 10 monedas antes de que se acabe el tiempo, huye del zorro y abre el baúl. Este es el prompt para three.js:

Prompt · three.js
Crea un minijuego 3D en el navegador con three.js y Vite, llamado "Caza de monedas".

Assets (ya están en public/assets, descargados de Studio Tank):
- hero.glb: personaje chibi de ~1,6 m, mira hacia +Z, clips Idle, Run, Jump, Hit y Victory (30 fps)
- fox.glb: zorro, clips Idle, Walk y Run
- oak.glb y pine.glb: árboles, clip Wind (balanceo)
- chest.glb: baúl, clip Open
Todos usan 1 unidad = 1 metro y una textura-paleta (no cambies los materiales).

El juego:
1. Isla redonda (radio 15 m) rodeada de agua, con 14 árboles repartidos. Copia los árboles con
   SkeletonUtils.clone y reproduce Wind en cada uno, empezando en tiempos distintos. Mete cada modelo
   en un THREE.Group y posiciona el grupo (algunos clips animan la raíz del archivo).
2. El jugador se mueve con WASD/flechas (y un joystick táctil en el móvil) y salta con espacio. Gira el
   modelo hacia el movimiento con Math.atan2(x, z). Cambia Idle/Run/Jump con crossFade de 0,15 s;
   Jump y Hit se reproducen una vez (LoopOnce + clampWhenFinished).
3. 10 monedas doradas (un cilindro de three.js) girando. Con todas, aparece el baúl; al tocarlo se
   reproduce Open y el jugador celebra con Victory.
4. El zorro pasea (Walk) y persigue al jugador (Run) a menos de 7 m. Si lo toca, el jugador reproduce
   Hit, sale empujado y pierde una moneda, que vuelve a la isla.
5. 70 segundos para ganar. HUD en HTML con monedas y tiempo, y pantalla final con "Jugar otra vez".
6. Cámara en tercera persona, desde arriba y detrás, siguiendo suave. Sombras activadas.

Trabaja por pasos: primero la escena con el personaje caminando, luego monedas, zorro y fin del juego.
Ejecútalo con npm run dev y dime qué probar en cada paso.

Y el mismo juego en Godot 4:

Prompt · Godot 4 (3D)
Crea un minijuego 3D en Godot 4 (GDScript), llamado "Caza de monedas".

Assets en res://assets (GLB de Studio Tank, 1 unidad = 1 m, el modelo mira hacia +Z):
- hero.glb: Idle, Run, Jump, Hit, Victory
- fox.glb: Idle, Walk, Run
- oak.glb y pine.glb: Wind
- chest.glb: Open

1. Al importar, activa Loop en Idle, Run, Walk y Wind (Advanced Import Settings > Animation).
2. Escena principal: isla redonda (CSGCylinder3D verde, radio 15) sobre un plano de agua,
   DirectionalLight3D con sombras y WorldEnvironment con cielo claro. 14 árboles reproduciendo Wind.
3. Jugador: CharacterBody3D con cápsula y hero.glb como hijo. WASD/flechas mueven (relativo a la cámara),
   espacio salta. Usa el AnimationPlayer del GLB: play("Run"), play("Idle"), con blend de 0,15 s.
   El modelo mira hacia +Z: gira con atan2(dirección.x, dirección.z).
4. 10 monedas (Area3D con cilindro dorado) girando. Con todas, aparece el baúl; al llegar, se reproduce
   Open y el jugador reproduce Victory.
5. El zorro (CharacterBody3D) pasea con Walk y persigue al jugador con Run a menos de 7 m. Al tocarlo,
   el jugador reproduce Hit, sale empujado y pierde una moneda.
6. Temporizador de 70 s, HUD con Label (monedas y tiempo) y pantalla de victoria/derrota con botón
   "Jugar otra vez".

Crea los archivos .tscn y .gd y dime dónde conectar cada señal. Si el MCP de Godot está activo, crea las
escenas con él y ejecuta el proyecto para comprobar.

Consejos para los assets 3D

  • Varias copias del mismo modelo animado (los árboles): en three.js usa SkeletonUtils.clone; el clone() normal comparte el esqueleto y todas las copias se mueven juntas.
  • Posiciona un grupo, no el modelo: mete cada GLB dentro de un Group (o Node3D) y mueve el grupo. Algunos clips animan la raíz del archivo (el baúl al abrirse) y, sin el grupo, el modelo salta al origen.
  • Dirección: el modelo mira hacia +Z. Para girar hacia el movimiento: rotation.y = atan2(x, z).
  • Transiciones suaves: cambia de clip con crossFadeTo (three.js) o el blend del AnimationPlayer (Godot), de 0,1 a 0,2 s.
  • Godot: los clips del GLB importado no vienen con loop. Actívalo en caminar, correr y quieto al importar.
  • Escala correcta desde el inicio: 1 unidad = 1 metro. Si el personaje se ve pequeño, acerca la cámara en vez de agrandar el modelo.

4. Minijuego 2D: Salto del zorro

Minijuego 2D de plataformas con los sprites de Studio Tank: explorador, zorros, árboles y baúl

A/D o flechas para correr · espacio para saltar · pisa a los zorros

Corre hasta el baúl al final del nivel, recoge las monedas y pisa a los zorros (de lado hacen daño). En Godot 4:

Prompt · Godot 4 (2D)
Crea un juego de plataformas 2D en Godot 4 (GDScript), llamado "Salto del zorro".

Sprites en res://sprites (Studio Tank: de lado, mirando a la derecha, cuadros de 128 px, 12 fps).
Cada animación es un PNG + un JSON en formato "hash" (frames[nombre].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 y pine_Wind (árboles, cuadros de 256 px, 8 fps)

1. Escribe un script @tool que lea cada JSON y arme un SpriteFrames (.tres) con una animación por
   archivo: cuadros ordenados por nombre, velocidad = meta.fps, loop = meta.loop.
2. Jugador: CharacterBody2D + AnimatedSprite2D. Flechas/A-D corren (300 px/s), espacio salta, con
   "coyote time" de 0,1 s. Usa flip_h al ir a la izquierda. Los pies no tocan el borde inferior del
   cuadro: ajusta el offset del sprite para que los pies queden en el suelo.
3. Nivel de ~4.000 px: suelo con huecos y plataformas (TileMapLayer o StaticBody2D), árboles animados
   al fondo y un Parallax2D con colinas.
4. Monedas (Area2D) para recoger. Zorros que patrullan: saltar encima los elimina; tocarlos de lado
   quita una de 3 vidas (el jugador reproduce hero_Hit). Caer en un hueco también quita una vida.
5. Al final del nivel, el baúl: al tocarlo se reproduce chest_Open, el jugador reproduce hero_Victory y
   aparece la pantalla de victoria con las monedas recogidas.
Camera2D siguiendo al jugador, limitada al nivel.

¿Prefieres en el navegador, sin instalar nada? El mismo juego en canvas:

Prompt · navegador (canvas)
Crea el mismo juego de plataformas 2D ("Salto del zorro") en el navegador, en un único archivo HTML con
canvas y JavaScript puro, sin librerías. Los sprites están en ./sprites (mismos nombres y formato de arriba).

- Carga cada JSON con fetch y la imagen de meta.image; ordena los cuadros por nombre.
- Cuadro actual = floor(tiempo * meta.fps) (con loop) o el último cuadro (sin loop).
- Dibuja con drawImage; para mirar a la izquierda, usa scale(-1, 1).
- Busca la línea del pie de cada hoja (última fila con píxel opaco en el primer cuadro) y úsala para
  apoyar los personajes en el suelo.
- Mismas reglas: correr, saltar con coyote time, monedas, zorros (pisar elimina, de lado hace daño),
  3 vidas, huecos y el baúl al final. Canvas de 960x540 que se adapta al ancho de la pantalla.

Consejos para los sprites

  • Los cuadros vienen en orden por nombre (Run_side_000, Run_side_001...). Basta con ordenar por nombre.
  • Pies en el suelo: el dibujo no toca el borde inferior del cuadro. Mide una vez la última fila con píxel y úsala como offset.
  • De lado mira a la derecha. Para la izquierda, refleja (flip_h en Godot, scale(-1, 1) en canvas).
  • ¿Vista cenital o isométrica? Descarga 4 u 8 direcciones: cada fila de la hoja es una dirección, en el orden del JSON.
  • Pixel art nítido: sprites de 64 px con filtro "nearest" (Godot: Texture Filter Nearest) dan el aspecto retro.

5. Cómo escribir un prompt que funcione

  1. Di el juego en una frase antes de las reglas. "Plataformas de lado en el que se corre hasta un baúl" orienta todo lo demás.
  2. Lista los archivos con sus clips. Claude no abre el GLB para adivinar; con los nombres escribe el código correcto a la primera.
  3. Da números: velocidad, altura del salto, tiempo, cantidad de monedas. Así es fácil ajustar ("salto un 20% más alto").
  4. Pide por pasos y prueba cada uno. Un juego entero de una vez se rompe en más sitios y cuesta más arreglarlo.
  5. Muestra el error: pega el mensaje de la consola o una captura. "El zorro camina de espaldas" se arregla antes que "no funciona".

6. Del minijuego a tu propio juego

Todos los personajes chibi y vóxel de Studio Tank usan el mismo esqueleto y los mismos nombres de animación. Así que el paso más divertido es gratis: sortea otro personaje en el estudio, descárgalo y cambia el archivo. Pirata, robot o zombi, el código sigue igual. Después, pide a Claude una cosa nueva cada vez: un enemigo que dispara (clip Shoot), una casa para entrar, un mapa más grande con el Mundo del estudio.

Empieza por el personaje

Arma o sortea tu héroe en el estudio y descárgalo en GLB o sprites. Gratis para empezar.

Abrir el estudioAPI y MCP