# Cómo hacer un juego con IA: de Phaser a Godot

URL: https://agentvera.dev/es/blog/make-a-game-with-ai/ · Publicado: 2026-10-11

Hacer un juego con IA paso a paso: un primer juego de navegador en Phaser, cuándo pasar a Godot, el game loop, licencias de assets, game feel y publicar en itch.io.

**En resumen:**

- Para un primer juego, Phaser en el navegador es la opción más fácil; Godot encaja con juegos 2D o 3D más grandes, y Unity es lo más difícil de manejar con un agente porque las escenas viven en el editor.
- Guarda todos los números ajustables en un archivo de configuración y mueve las cosas según el tiempo transcurrido (dt), para poder afinar salto, velocidad y dificultad jugando tú mismo.
- Un agente puede escribir el código, pero no puede juzgar si el juego es divertido; haz playtest con alguien sin darle explicaciones y anota la fuente y la licencia de cada asset.

La forma más fácil de hacer un juego con IA es pedirle a un agente de código que escriba un pequeño juego de navegador con HTML canvas o Phaser, probar cada cambio en el navegador al momento y afinar tú mismo el «feel», porque es la parte que el agente no puede juzgar. Para proyectos 2D o 3D más grandes, Godot es un buen siguiente paso. Cuando termines, puedes subir el juego a itch.io y compartirlo en minutos.

Este artículo lleva un primer juego desde una carpeta vacía hasta una página publicada: qué herramienta elijo y por qué, el primer prompt que le doy al agente, el game loop, arte y sonido (incluidas las licencias), cómo afinar el game feel, el playtest e itch.io.

## Por qué los juegos encajan tan bien con el vibe coding

Los juegos son de las cosas más divertidas e instructivas que se pueden construir con [vibe coding](/es/glossary/vibe-coding/). Los resultados son inmediatos: cambias un número y el personaje salta más alto. Un juego pequeño son solo unos pocos archivos, así que el agente puede mantenerlo entero en contexto.

Hay una trampa, eso sí. «Funciona» y «es divertido de jugar» están muy lejos. El agente puede comprobar si el código funciona; no puede comprobar si el juego es divertido. Esa parte es tuya.

## Qué herramienta: canvas, Phaser, Godot o Unity

| Herramienta | Lenguaje | Buena para | Trabajar con un agente |
| --- | --- | --- | --- |
| HTML canvas | JavaScript | Juegos muy simples, aprender | Muy fácil; todo puede vivir en un solo archivo |
| Phaser | JavaScript / TypeScript | Juegos 2D de navegador | Fácil; física, escenas y animación integradas, muchos ejemplos |
| Godot | GDScript (o C#) | 2D y 3D más grandes, exportación a escritorio y web | Buena; las escenas son archivos de texto `.tscn` |
| Unity | C# | 3D grande, móvil, consolas | Buena para código, floja para escenas |

**Para un primer juego recomiendo Phaser.** El canvas puro también sirve, pero hacer que el agente escriba desde cero colisiones, animación de sprites y gestión de entrada lleva tiempo; Phaser te lo da hecho. Y todo es texto que corre en un navegador, así que no hay ningún editor que el agente no pueda ver.

**Pasa a Godot** cuando el juego crezca: muchas escenas, diseño de niveles complejo, 3D o una versión de escritorio. Los archivos de escena de Godot (`.tscn`) y los recursos (`.tres`) son texto legible, así que el agente puede editarlos. Aun así, yo monto las escenas en el editor y dejo el GDScript al agente; un pequeño error en un archivo de escena editado a mano puede impedir que el editor lo abra.

**Unity** es potente, pero la opción más incómoda de manejar con un agente. El agente escribe scripts de C# con soltura; las escenas, los prefabs y los ajustes del inspector viven en el editor. Si ya conoces Unity, úsalo; para un primer juego no es mi elección.

## Paso 1: Preparación

Lo que necesitas:

- **Node.js** y un gestor de paquetes
- **Un [agente de código](/es/glossary/coding-agent/)**: Claude Code, Codex, Gemini CLI, opencode o similar
- **Git**, para poder volver siempre a «ayer funcionaba»

Crea un proyecto con Vite y añade Phaser:

```bash
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
```

`npm run dev` imprime una dirección local; ábrela para ver el juego, y la página se recarga a medida que el agente edita archivos.

## Paso 2: El primer prompt

El primer prompt importa mucho en los juegos, porque «haz un juego» te da el juego que el agente se imagina. Mantén el alcance pequeño y concreto:

```text
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.
```

La regla más valiosa aquí es `config.ts`. Afinarás el feel jugando con los números de ese archivo; si están repartidos por el código, cada retoque significa volver al agente.

La regla de «rectángulos en lugar de arte» también importa. Primero acierta con la jugabilidad y después hazlo bonito. Un prototipo precioso que no es divertido es el peor resultado.

## Paso 3: Entender el game loop

En el corazón de todo juego hay un bucle: leer la entrada, actualizar el mundo, dibujar la pantalla, repetir, decenas de veces por segundo. Phaser lo ejecuta por ti y llama a `update(time, delta)` de tu escena en cada frame. Con canvas puro lo escribes tú:

```js
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)
```

El único concepto que debes conocer es `dt`: mueve las cosas según el tiempo transcurrido, no por frame. Los agentes a veces escriben `x += 5`, y entonces el juego va más rápido en una pantalla de alta frecuencia de refresco. Si no ves `dt` en el código de movimiento, pregúntale al agente por ello.

## Paso 4: Jugar, iterar, hacer commit

El ciclo:

1. Juega un minuto.
2. Describe lo que sentiste, de forma concreta: «El salto se queda demasiado tiempo en el aire; esquivar cactus es demasiado fácil».
3. Deja que el agente lo cambie y vuelve a jugar.
4. Haz commit de cada versión que se sienta bien.

Pega tal cual en el agente los errores de la consola del navegador (F12). Para problemas visuales, envía una captura de pantalla.

Una advertencia: no hagas crecer la lógica del juego con una sola petición enorme. «Añade power-ups, un jefe final y un sistema de niveles» enreda las tres cosas. Una mecánica cada vez.

## Paso 5: Game feel

Lo que hace que un juego se sienta bien no suelen ser las grandes funciones sino los pequeños detalles. Los agentes no los añadirán por iniciativa propia, pero los implementan bien si se lo pides:

- **Coyote time**: permite saltar un instante después de salir de una plataforma.
- **Jump buffering**: recuerda un salto pulsado justo antes de aterrizar.
- **Altura de salto variable**: recorta la velocidad ascendente al soltar el botón.
- **Screen shake y hit stop**: congela unos frames en el impacto.
- **Tweens**: la puntuación que «salta», un enemigo que se tambalea al desaparecer.
- **Sonido**: un sonido corto de salto cambia el feel más que cualquier cosa en pantalla.

Este es el tipo de prompt que uso:

```text
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.
```

Después juega tú mismo con los números de `config.ts`. Esta parte no se puede delegar en una IA; solo notas unos pocos milisegundos de diferencia mientras juegas.

## Paso 6: Arte, sonido y licencias

Cuando la jugabilidad esté bien, cambia los rectángulos por arte de verdad. Lo único con lo que hay que tener cuidado es la licencia.

**Packs ya hechos:**

- Muchos packs de fuentes como Kenney son CC0, utilizables incluso sin atribución.
- En OpenGameArt cada archivo tiene su propia licencia (CC0, CC‑BY, CC‑BY‑SA, GPL…). CC‑BY exige atribución; CC‑BY‑SA puede exigir que compartas las obras derivadas con la misma licencia. Lee la licencia de cada archivo.
- Los packs de assets de pago y gratuitos de itch.io traen cada uno su propia licencia; comprueba si se permite el uso comercial.

Mantén un `CREDITS.md` o una pantalla de créditos en el juego con la fuente y la licencia de cada asset.

**El arte generado por IA** es rápido y tentador, pero con algunas salvedades:

- El estatus de los derechos de autor del contenido generado por IA varía según el país y algunas cuestiones siguen sin resolverse.
- Cada herramienta de imágenes tiene sus propios términos de uso; comprueba el uso comercial.
- Algunas tiendas de juegos piden que declares el contenido generado por IA.
- También es técnicamente delicado: la coherencia de estilo, la disposición de las sprite sheets y los frames de animación a menudo necesitan limpieza manual.

Mi enfoque: packs de licencia abierta para el prototipo; para el lanzamiento, arte hecho por mí o cuya licencia conozca con seguridad.

Hay trabajo con assets que el agente hace bien: cargar una sprite sheet en Phaser, definir animaciones, conectar archivos de sonido. Dale los nombres de archivo y el tamaño de frame en lugar de dejar que lo adivine.

## Paso 7: Playtesting

Quien construyó el juego es su peor tester; ya sabe qué hacer. Con el agente pasa lo mismo. Qué hacer:

- Pasa el juego a alguien y **no expliques nada**. Observa en silencio dónde se atasca.
- Toma notas: dónde murió, dónde se aburrió, qué malinterpretó.
- Convierte esas notas en tareas para el agente: «Los jugadores siempre chocan con el primer cactus; que no haya cactus en los primeros 5 segundos».

Las piezas pequeñas de lógica del juego (puntuación, reglas de colisión) se pueden comprobar con tests unitarios; pídele al agente que los escriba. El feel solo se puede probar jugando.

## Paso 8: Publicar en itch.io

Subir un juego de navegador a itch.io lleva unos minutos:

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

Después crea un proyecto nuevo en itch.io, ponle el tipo HTML, sube el zip y márcalo como jugable en el navegador. Define el tamaño del viewport (800×400, por ejemplo) y el botón de pantalla completa. El zip necesita `index.html` en su raíz; con Vite puede que necesites `base: './'` en `vite.config.ts` para las rutas relativas, algo que el agente puede comprobar por ti.

En Godot, instala la plantilla de exportación Web, exporta a HTML5 y sube de la misma manera. Si vas a actualizar a menudo, la herramienta de línea de comandos `butler` de itch.io automatiza las subidas.

## Lo que los agentes suelen hacer mal en los juegos

- **No pueden ver el juego.** El agente escribe código pero no sabe qué hay en pantalla. Las capturas o una descripción de lo que ves son imprescindibles.
- **Números mágicos.** Los valores se reparten por el código. Repite la regla de `config.ts` con cada mecánica nueva.
- **Movimiento dependiente del frame.** Sin `dt`, el juego va a velocidades distintas en pantallas distintas.
- **APIs obsoletas.** Phaser y Godot cambiaron de API entre versiones mayores, y el agente puede escribir código para la antigua. Dile la versión: «Estamos en Godot 4, no escribas sintaxis de Godot 3».
- **Todo en un solo archivo.** A medida que el juego crece, pídele que separe escenas, entidades y ajustes en archivos distintos.
- **Ignorar el rendimiento.** Con cientos de balas o enemigos el juego se ralentiza. Pide object pooling.

## Seguridad

Un juego parece inofensivo, pero se aplican las mismas reglas:

- Si añades una tabla de clasificación o un backend multijugador, guarda las claves en `.env` y añade `.env` a `.gitignore`.
- Todo lo que hay en un juego de navegador puede leerlo el jugador; las claves secretas nunca van en el código del cliente.
- No pegues API keys en el chat; dile al agente qué variable de entorno leer.
- Lee los comandos que ejecuta el agente antes de aprobarlos, sobre todo instalaciones de paquetes y borrados.
- No te fíes de las puntuaciones enviadas desde el cliente; hacer trampas en una clasificación online es fácil.

## Hacerlo con AgentVera

Todo esto funciona con un terminal y un navegador. En proyectos de juegos me gusta ejecutar varios agentes en paralelo y ver el resultado en la misma ventana, y por eso uso [AgentVera](/es/features/workspace/):

- **Experimentos separados en worktrees separados.** Un agente trabaja el feel del salto en un [git worktree](/es/glossary/git-worktree/) mientras otro añade un nuevo tipo de enemigo en un segundo; descarta el experimento que no te guste. El [panel Git](/es/features/git-and-github/) muestra las ramas.
- **El navegador del agente.** Con el [navegador del agente](/es/features/agent-browser/), el agente puede abrir el juego mediante Playwright y hacer capturas mientras tú ves la pestaña en directo. Eso resuelve en parte lo de «el agente no puede ver el juego»; no resuelve el feel.
- **Terminal y editor.** `npm run dev` queda abierto en un panel y editas `config.ts` tú mismo en el [editor](/es/features/editor-and-terminal/).
- **Revisión y tokens.** La [revisión de código](/es/features/code-review/) comprueba cada turno antes de hacer merge, y el [uso de tokens](/es/features/token-savings/) se ve por panel.

AgentVera no es un motor de juegos; no sustituye al editor de Godot ni a itch.io.

## Lista de comprobación rápida

- [ ] El primer juego es pequeño: una mecánica, una pantalla
- [ ] Los números ajustables viven en `config.ts`
- [ ] El movimiento usa `dt`
- [ ] Primero jugabilidad con rectángulos, después arte
- [ ] Fuente y licencia de cada asset anotadas
- [ ] Al menos una persona lo jugó sin explicaciones
- [ ] El zip de itch.io tiene `index.html` en su raíz

## Para terminar

Hacer un juego con IA es uno de los usos más divertidos del vibe coding. Empieza pequeño con Phaser en el navegador, guarda los números en un solo archivo, acierta con la jugabilidad usando rectángulos, afina el feel con tus propias manos y vigila las licencias. El agente escribe el código; tú eres quien lo hace divertido. Para ejecutar experimentos con varios agentes, consulta [agentes de código en paralelo](/es/blog/parallel-coding-agents/); para elegir herramienta, consulta [las mejores herramientas CLI de código con IA](/es/blog/best-ai-coding-cli-tools/).

## Preguntas frecuentes

**¿Qué motor debo usar para hacer un juego con IA?** Para un primer juego, lo más fácil es HTML canvas o Phaser en el navegador: poca configuración, todo es un archivo de texto y ves el resultado al instante. Para juegos 2D o 3D más grandes, Godot es un buen siguiente paso, y como sus escenas y GDScript son texto plano, los agentes también pueden editarlos.

**¿Puede la IA hacer un juego entero por sí sola?** Puede escribir la mayor parte del código de un juego pequeño, pero no puede jugarlo ni juzgar cómo se siente. La altura del salto, la velocidad de los enemigos y el ajuste de dificultad salen de que tú juegues y vayas corrigiendo.

**¿Puedo usar arte generado por IA en mi juego?** Puedes, pero hay riesgos: el estatus de los derechos de autor puede ser incierto según el país, cada herramienta tiene sus propios términos de uso y algunas tiendas piden que declares el contenido generado por IA. Los packs de assets con licencia abierta, como los CC0, son un comienzo más seguro.

**¿La IA funciona bien con Unity?** Los agentes escriben bien los scripts de C# de Unity. Pero los archivos de escenas y prefabs de Unity son grandes y están atados al editor, así que buena parte del trabajo que no es código sigue haciéndose a mano en el editor.

**¿Dónde puedo publicar un juego de navegador que he hecho?** itch.io es lo más fácil: comprime el juego compilado con index.html en la raíz, súbelo y márcalo como jugable en el navegador. GitHub Pages o cualquier hosting estático también sirve.

---

**Sobre AgentVera.** AgentVera es una app de escritorio para macOS, Windows y Linux, desarrollada por Solviera Teknoloji. Ejecuta 18 agentes de programación con IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) en paralelo, por proyecto, en terminales reales con las instalaciones y sesiones de CLI del propio usuario. El plan gratuito tiene agentes ilimitados. Descargar: https://agentvera.dev/es/download/ · Precios: https://agentvera.dev/es/pricing/