Crea un juego jugable en el lienzo: de la idea a la exportación .html

El skill /games es un desarrollador de juegos integrado en FilmMovie Studio: describes una idea de juego y la app la construye como un documento HTML/JS autónomo que se ejecuta al instante en una tarjeta aislada en el lienzo. Funciona para juegos arcade (Snake, Pong, Breakout), puzles (2048, memoria, tres en raya), cuestionarios, plataformas y juegos de física (Phaser, Kaboom, Matter.js), y para 3D moderno con Three.js y física Rapier. Juegas al juego directamente en la tarjeta, lo refinas con más mensajes en el chat y, cuando estás satisfecho, lo exportas como archivo .html que se abre en cualquier navegador. Esta guía recorre todo el ciclo.

Qué necesitarás

FilmMovie Studio instalado (macOS o Windows).
Al menos un proveedor de generación configurado en Ajustes (una clave de kie.ai o deAPI) — solo necesario para gráficos o audio con IA; los juegos dibujados con código funcionan sin él.
Una idea para un juego — género y tema, p. ej. «Snake con temática espacial».

Paso a paso

1
Abre un proyecto en el Workspace
Inicia FilmMovie Studio, haz clic en «Nuevo proyecto» en el Launchpad, ponle nombre (p. ej. «Mi juego») y confirma. Se abre el Workspace con el lienzo a la izquierda y el chat a la derecha.
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
LaunchpadHubTodos los proyectos
Recientes
project 1project 2project 3
Ajustes
Film Movie Studio
Una nueva forma de crear medios con IA
Describe lo que quieres crear…
SkillsModelos
Escribe / para explorar skills de IA
Short DramaE-commerceMusic VideoGamesDocumentary
2
Elige el skill /games
En el chat, haz clic en el icono de skill y elige /games (o empieza tu mensaje con /games). Así le dices a la app que quieres crear un juego jugable, no un vídeo ni una imagen.
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
Buscar skills…
TodosWorkflowsRápidos
video
Short DramaViral vertical mini-series, end to end.
image
Image CreatorGenerate single images from a prompt.
audio
Audio StudioVoiceover, SFX and music tracks.
copy
App BuilderMulti-screen apps with live preview.
image
E-commerce DesignPro product shots for any platform.
video
Music VideoBeat-synced clips cut to your track.
Consejo: Si omites el género y solo dices «hazme un juego», la app pregunta una vez el tipo (arcade / puzle / cuestionario / plataformas). Cuando nombras el género, empieza enseguida.
3
Escribe tu idea de juego en el chat
Describe el juego en una o dos frases, p. ej. «Haz un juego Snake con temática espacial y conteo de puntuación». Bastan el género y el tema — no te preocupes del motor; lo elige la app (Canvas2D para los clásicos, Phaser/Kaboom para arcade y plataformas, Three.js para 3D).
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
Skills
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Cielo panorámico amplio de juego fantasy, cálida luz dorada del atardecer, nubes suaves y ondulantes iluminadas de lado, degradado suave de melocotón cálido y dorado en el horizonte hacia arriba…
SkillsModelos
Escribe / en cualquier momento para cambiar de skill
Consejo: Describe el juego, no el código. Un clásico sencillo aparece de una vez; uno más complejo (plataformas, 3D) se construye por partes, y ves cada sistema aparecer uno a uno.
4
Observa cómo aparece la tarjeta jugable en el lienzo
Cae una tarjeta de juego en el lienzo. La app coloca dentro un documento HTML/JS autónomo que se ejecuta al instante en un iframe aislado. En un juego complejo verás rellenarse partes etiquetadas — entrada, física, colisión, renderizado, puntuación.
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
Archivos
frame_1.pngframe_2.pngframe_3.png
Arrastra una imagen aquí o haz clic para subir
reference.png
Chat
Cielo panorámico amplio de juego fantasy, cálida luz dorada del atardecer, nubes suaves y ondulantes iluminadas de lado, degradado suave de melocotón cálido y dorado en el horizonte hacia arriba…
/games → working…
Describe lo que quieres crear…
SkillsModelos
5
Juega al juego directamente en la tarjeta
Haz clic en la tarjeta y juega de inmediato — los controles funcionan con teclado y táctil/ratón, y verás una pista de controles en pantalla, un HUD de puntuación y un estado de victoria/derrota con un botón Reiniciar.
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
Archivos
frame_1.pngframe_2.pngframe_3.pngframe_4.png
60%
prompt
frame_01.png
Generando… 42%
Remezclar
frame_02.png
Generando… 68%
Remezclar
frame_03.png
Generando… 55%
Remezclar
frame_04.png
Generando… 80%
Remezclar
output
Chat
Cielo panorámico amplio de juego fantasy, cálida luz dorada del atardecer, nubes suaves y ondulantes iluminadas de lado, degradado suave de melocotón cálido y dorado en el horizonte hacia arriba…
/games → working…
Describe lo que quieres crear…
SkillsModelos
Consejo: Arrastra la esquina de la tarjeta para agrandarla — el juego se reajusta al nuevo tamaño, así lo pruebas también a pantalla completa.
6
Itera escribiendo los cambios
¿Quieres cambios? Escríbelos en el chat: «acelera la serpiente», «añade un segundo nivel», «cambia los colores a neón» o «añade un sonido de recogida». La app edita el juego y la tarjeta se refresca. Itera en unas pocas pasadas concretas.
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
Skills
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Cielo panorámico amplio de juego fantasy, cálida luz dorada del atardecer, nubes suaves y ondulantes iluminadas de lado, degradado suave de melocotón cálido y dorado en el horizonte hacia arriba…
SkillsModelos
Escribe / en cualquier momento para cambiar de skill
7
(Opcional) Añade gráficos o audio con IA
Para un aspecto más rico, pide gráficos personalizados — p. ej. «añade una nave dibujada y un fondo espacial». La app pregunta primero si quieres la versión dibujada con código (instantánea) o una versión con IA (consume créditos), y luego incrusta los medios generados directamente en el HTML.
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
Archivos
frame_1.pngframe_2.pngframe_3.pngframe_4.pngframe_5.pngframe_6.png
60%
prompt
frame_01.png
Generando… 42%
Remezclar
frame_02.png
Generando… 68%
Remezclar
frame_03.png
Generando… 55%
Remezclar
frame_04.png
Generando… 80%
Remezclar
output
Chat
Cielo panorámico amplio de juego fantasy, cálida luz dorada del atardecer, nubes suaves y ondulantes iluminadas de lado, degradado suave de melocotón cálido y dorado en el horizonte hacia arriba…
/games → working…
Describe lo que quieres crear…
SkillsModelos
Consejo: Para arcade, puzle y cuestionarios bastan formas dibujadas con código, degradados y pitidos con Web Audio — instantáneos, gratis y mantienen el juego ligero.
8
Exporta el juego como archivo .html (clic derecho)
Cuando estés satisfecho, haz clic derecho en la tarjeta de juego y elige exportar (o escribe «exporta el juego»). Se abre un diálogo de guardado y la app exporta un único archivo .html autónomo con todos los medios incrustados.
Film Movie StudioRenderizar
3D Tactical Tower DefenseNuevo proyecto
Skills
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Cielo panorámico amplio de juego fantasy, cálida luz dorada del atardecer, nubes suaves y ondulantes iluminadas de lado, degradado suave de melocotón cálido y dorado en el horizonte hacia arriba…
SkillsModelos
Escribe / en cualquier momento para cambiar de skill
Consejo: La exportación es el paso final. Haz doble clic en el .html resultante en cualquier navegador, envíaselo a alguien o súbelo a la web — funciona sin internet y sin la app.

Qué obtienes

Tienes un juego terminado y realmente jugable: surgió de una frase, lo jugaste directamente en la tarjeta del lienzo, lo ajustaste por el chat y lo exportaste como un único archivo .html autónomo. Este mismo patrón — elige /games → describe el juego → juega en la tarjeta → itera en el chat → exporta — se aplica a arcade, puzle, cuestionario, plataformas y 3D moderno con Three.js.

Consejos de expertos

Para los clásicos 2D (Snake, Pong, 2048) la app se queda en Canvas2D sin dependencias — siempre carga y nunca falla; para arcade y plataformas recurre a Phaser o Kaboom, y para 3D a Three.js con física Rapier.
Pide cambios pequeños y concretos de uno en uno («un 20% más rápido», «añade un power-up») — las iteraciones cortas son más fiables que una gran reconstrucción.
El .html exportado es totalmente autónomo (medios incrustados como data-URI), así que basta con enviarlo o subirlo a la web y se juega en cualquier navegador, incluso sin conexión.

Pruébalo tú mismo

FilmMovie Studio es una app de escritorio que te acompaña desde la idea hasta la exportación final. Descárgala y empieza a crear.

Obtener FilmMovie Studio

Crea un juego jugable en el lienzo: de la idea a la exportación .html

Abre un proyecto en el Workspace

Film Movie Studio

Elige el skill /games

Escribe tu idea de juego en el chat

Observa cómo aparece la tarjeta jugable en el lienzo

Juega al juego directamente en la tarjeta

Itera escribiendo los cambios

(Opcional) Añade gráficos o audio con IA

Exporta el juego como archivo .html (clic derecho)

Tu primer proyecto: del Launchpad a la exportación final

Dirige un drama corto: de la idea a los episodios renderizados

Fotos de producto para e-commerce: principal, hero, detalle y lifestyle en minutos