Esta es una guía avanzada. Mostraremos cómo partir de una idea sencilla ("un corredor infinito que esquiva obstáculos de neón") para construir un juego 3D real que se ejecuta directamente en el lienzo de FilmMovie Studio dentro de un iframe en espacio aislado. El juego se crea como un único archivo HTML autónomo: Three.js gestiona la escena, la cámara y el renderizado, el motor de física Rapier impulsa el movimiento y las colisiones, y el posprocesado (bloom, mapeo tonal) pule el aspecto. La clave es el ritmo — la IA no envía todo el juego de golpe; lo ensambla en piezas pequeñas, así ves crecer el mundo y cada ronda sigue siendo rápida. Al final tienes un juego jugable que descargas como un solo .html y abres en cualquier navegador sin instalación.
Qué necesitarás
- Completada la guía «Primeros pasos» — sabes crear un proyecto y trabajar con el lienzo y el chat.
- Un proveedor de generación configurado en Ajustes (para posibles texturas, skybox y sonidos mediante generate_image / generate_audio).
- Una idea clara para un bucle de juego — un verbo, un objetivo y una condición de derrota (p. ej. «esquiva obstáculos, recoge cristales, un choque acaba la partida»).
Paso a paso
- 1
Lanza el skill /threejs-game
En tu proyecto abre el chat y elige el icono del skill, o simplemente escribe /threejs-game. Este skill es para 3D, Three.js y juegos premium — para los clásicos 2D (Snake, Pong, un quiz) usa /games en su lugar. Añade tu idea justo después del comando.
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoBuscar skills…TodosWorkflowsRápidosvideoShort DramaViral vertical mini-series, end to end.imageImage CreatorGenerate single images from a prompt.audioAudio StudioVoiceover, SFX and music tracks.copyApp BuilderMulti-screen apps with live preview.imageE-commerce DesignPro product shots for any platform.videoMusic VideoBeat-synced clips cut to your track.Consejo: Conviene indicar si apuntas a escritorio, táctil o ambos — moldea los controles y el HUD. - 2
Describe el bucle de juego en una frase
En el chat escribe el bucle como verbo + objetivo + presión + recompensa + derrota, p. ej. «Corredor infinito: corre hacia delante, esquiva obstáculos de neón, recoge cristales por puntos, un choque acaba la partida y reinicia». Si la petición es vaga, la IA pregunta una vez por género, dirección artística y dispositivo objetivo — responde y sigue construyendo.
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoSkills/threejs-game/short-drama/image-creator/audio-studio/app-builder/threejs-game Textura albedo cenital, repetible sin costuras, de exuberante hierba de pradera fantasy, cálido estilo de ilustración pintada a mano de cuento, verdes suaves y variados con diminutas flores silvestres,…
SkillsModelosEscribe / en cualquier momento para cambiar de skill
Consejo: Describe la intención, no el código. El skill lee el flujo por sí mismo y elige la geometría, la física y los efectos. - 3
Observa cómo aparece la tarjeta de juego (el shell)
El primer paso de la IA (create_game) abre una tarjeta de juego en el lienzo con solo un «shell» — el esqueleto: un lienzo a pantalla completa, el HUD, un overlay de inicio y el renderer/escena/cámara de Three.js. Three.js y Rapier se cargan desde una CDN mediante un importmap. El shell es deliberadamente pequeño para que la tarjeta no lo rechace.
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoArchivos
frame_1.png
frame_2.png
frame_3.png
frame_4.png
frame_5.png
frame_6.png60%promptframe_01.pngRemezclarframe_02.pngRemezclarframe_03.pngRemezclarframe_04.pngGenerando… 80%Remezclaroutput - 4
Deja crecer el juego pieza a pieza (append_game_code)
Ahora la IA llama a append_game_code muchas veces — un sistema por ronda: entrada del jugador, un cuerpo y un colisionador Rapier, el generador de obstáculos, el paso update(dt), el constructor del mundo, los materiales y los VFX. Un juego 3D premium tiene fácilmente 15–25 de estos. La tarjeta cobra vida tras cada pieza, ante ti.
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoArchivosframe_1.pngframe_2.pngframe_3.png60%promptframe_01.pngRemezclarframe_02.pngRemezclarframe_03.pngGenerando… 55%RemezclaroutputConsejo: Este ritmo es intencionado, no lentitud — cada ronda es rápida y ves cómo el mundo se acumula. - 5
Juégalo en línea en la tarjeta
Haz clic en el overlay de inicio de la tarjeta y juega el juego en línea en el iframe en espacio aislado — teclado y ratón en escritorio, o táctil en móvil. La física de Rapier gestiona saltos, choques y caídas; tras una derrota el juego debe reiniciarse limpio (sin entidades, temporizadores ni escuchadores residuales).
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoArchivosframe_1.pngframe_2.pngframe_3.pngframe_4.png60%promptframe_01.pngGenerando… 42%Remezclarframe_02.pngGenerando… 68%Remezclarframe_03.pngGenerando… 55%Remezclarframe_04.pngGenerando… 80%Remezclaroutput - 6
Añade texturas, un skybox y sonidos
Para un aspecto premium, haz que la IA genere al menos una textura protagonista o un skybox (generate_image) y los SFX clave — salto, recogida, choque — más una base musical (generate_audio). La ruta del archivo se inserta automáticamente directo en el HTML del juego, así una imagen se convierte en una textura real y un sonido en un SFX real, sin paso de subida.
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoArchivosframe_1.pngframe_2.pngframe_3.pngframe_4.png
frame_5.pngArrastra una imagen aquí o haz clic para subir
reference.pngConsejo: Genera cada asset solo una vez — la IA controla lo que ya existe en el lienzo y no lo repite. - 7
Itera por chat
Refinas el juego en lenguaje natural en el chat: «acelera los obstáculos», «añade un segundo tipo de obstáculo con telégrafo», «baja el bloom», «arregla el salto, se siente demasiado flotante». La IA completa con append_game_code o reescribe con update_game, y vuelves a jugar de inmediato. Cambia una cosa y prueba.
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoSkills/threejs-game/short-drama/image-creator/audio-studio/app-builder/threejs-game Textura albedo cenital, repetible sin costuras, de exuberante hierba de pradera fantasy, cálido estilo de ilustración pintada a mano de cuento, verdes suaves y variados con diminutas flores silvestres,…
SkillsModelosEscribe / en cualquier momento para cambiar de skill
- 8
Exporta el juego como un solo .html
Cuando estés satisfecho, pide la exportación — la IA llama a export_game_html y descargas un archivo .html autónomo. Se abre en cualquier navegador sin instalación y sin servidor, listo para compartir o subir a la web. Este es el paso final.
Film Movie StudioRenderizarFantasy RTS War GameNuevo proyectoArchivosframe_1.pngframe_2.pngframe_3.pngArrastra una imagen aquí o haz clic para subir
reference.pngConsejo: La exportación es el último paso. Para más cambios, ajusta el juego en el chat y exporta de nuevo.
Qué obtienes
De una sola frase tienes un juego 3D jugable que se ejecutó directamente en el lienzo: una escena de Three.js, movimiento y colisiones mediante la física de Rapier, un aspecto pulido con posprocesado y un HUD con estados de pausa, derrota y reinicio. Tras iterar en el chat lo exportaste como un solo .html autónomo que se abre en cualquier navegador sin instalación y sin servidor — listo para compartir o subir a la web.
Consejos de expertos
- Para los clásicos 2D (Snake, Pong, 2048, un quiz) usa /games — /threejs-game siempre paga el coste de una pipeline WebGL completa y encaja en 3D y juegos premium.
- No esperes modelos 3D ya hechos: las formas son geometría procedural de Three.js; generate_image da texturas, skybox, calcomanías e interfaz — no personajes con rig.
- Tras cada cambio, juega un bucle corto y ajusta un solo eje a la vez (velocidad, salto, número de obstáculos) para ver exactamente qué ayudó.
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