De las imágenes a un juego jugable — Sin escribir una sola línea de código
¿Qué pasaría si pudieras señalar cualquier video y decir “convierte esto en un juego”? Este flujo de trabajo hace exactamente eso. El agente multimodal de Eigent observa imágenes de la Gala del Festival de Primavera de 2026 — una espectacular actuación de artes marciales de robots — extrae los personajes, movimientos y estilo visual, y luego entrega ese análisis estructurado a un agente de desarrollo que construye un juego completo en Three.js en torno a él. Todo el proceso se ejecuta desde un solo prompt y un solo archivo de video.
El flujo de trabajo de dos agentes
Este flujo de trabajo requiere dos agentes especializados que trabajan en secuencia:
- Agente multimodal — gestiona Análisis de imágenes, Procesamiento de video, Procesamiento de audio y Generación de imágenes. Observa el video y produce datos estructurados sobre lo que ve.
- Agente de desarrollo — gestiona Terminal y shell, Despliegue web y Captura de pantalla. Toma el análisis estructurado y construye el juego.
La idea clave es la transferencia: el agente de desarrollo no recibe el video en bruto — recibe un documento de texto estructurado que describe personajes, movimientos, colores, entorno y temas. Este paso de traducción es lo que hace que el resultado del juego sea fiel en lugar de genérico.
Adjunta el video y escribe el prompt
Adjunta Martial Arts.mp4 y describe lo que quieres:
Analiza el archivo de video adjunto para comprender la actuación de los robots, los personajes, los movimientos, el estilo visual y el entorno de la Gala del Festival de Primavera de 2026; luego crea un juego HTML 3D interactivo completo de un solo archivo usando Three.js que recree fielmente los elementos, personajes y acciones clave del video con mecánicas de juego atractivas, controles intuitivos y efectos visuales festivos.
Se generan dos tareas de inmediato — la segunda queda bloqueada hasta que la primera se complete.
Tarea 1 — El agente multimodal observa el video
El agente multimodal procesa Martial Arts.mp4 fotograma a fotograma usando el Video Downloader Toolkit para extraer capturas de pantalla de momentos clave. Luego analiza esos fotogramas y produce un análisis escrito completo guardado como martial_arts_video_analysis.txt:
- Personajes y robots: Apariencia física, proporciones, esquema de colores (dorado y rojo), número de intérpretes
- Movimientos y acciones: Técnicas específicas de artes marciales observadas — golpes de puño, patadas, ataques con bastón, secuencias coreografiadas
- Estilo visual: Iluminación del escenario, paleta de colores, estilo de decoración festiva, profundidad y escala del espacio de la actuación
- Entorno y fondo: Ambiente del escenario, diseño del telón de fondo, elementos atmosféricos
- Elementos festivos: Decoraciones específicas del Año Nuevo Chino, motivos simbólicos, efectos usados en la actuación
Este documento se convierte en el brief creativo — una descripción estructurada que el agente de desarrollo puede ejecutar con precisión.
Tarea 2 — El agente de desarrollo construye el juego
Con el análisis en mano, el agente de desarrollo lee las notas del Note Taking Toolkit y crea spring_festival_martial_arts_game.html — un único archivo autocontenido con todo el HTML, CSS y JavaScript incrustado.
El juego implementa fielmente todo lo que el agente multimodal identificó:
- Personajes robots 3D renderizados en Three.js con el esquema de colores dorado/rojo del video
- Animaciones de artes marciales que replican los golpes, patadas y ataques con bastón observados
- Entorno de escenario que coincide con el entorno visual de la actuación de la Gala del Festival de Primavera
- Efectos de partículas festivos — faroles, chispas, decoraciones de CNY
- Varios modos de juego: Modo de actuación, Modo de combate, Práctica libre
El juego terminado
Abrir spring_festival_martial_arts_game.html en un navegador ofrece una experiencia completa:
- Pantalla de título: Gala del Festival de Primavera 2026 — Actuación de Artes Marciales — Año del Caballo
- Controles: W/S/A/D para moverse · J Golpe/Golpear · K Patada · L Ataque con bastón · Espacio Movimiento especial · Ratón para la cámara · Desplazar para acercar/alejar
- HUD: Contador de puntuación (527 mostrado en la demo), contador de combo, indicador de modo
- Visual: Personajes robots 3D en dorado/rojo, fondo festivo del escenario, efectos de partículas
Tokens totales utilizados: aproximadamente 467,000 — lo que refleja la profundidad del análisis de video y la generación del juego en Three.js combinados.
Por qué video-a-juego es una nueva categoría de flujo de trabajo
Este flujo establece algo novedoso: usar la comprensión de video como herramienta de especificación de diseño. En lugar de escribir un documento de diseño de juego, grabas o encuentras imágenes de la estética, los personajes y las interacciones que quieres — y dejas que el agente multimodal lo traduzca en especificaciones listas para implementar.
Las aplicaciones van mucho más allá de los juegos. El mismo flujo de video a análisis estructurado a código funciona para recreación de mockups de interfaz, diseño de sistemas de animación, generación de demos interactivas y cualquier contexto en el que el video capture mejor la intención que el texto.
Qué probar después
Analiza un video de unboxing de un producto y genera un visor interactivo 3D del producto que recree el objeto a partir de las imágenes.
Mira un video de cocina y genera una app interactiva de receta paso a paso que coincida con el estilo visual del video.
Analiza un reel de momentos destacados deportivos y genera un minijuego basado en el deporte mostrado.
Toma el juego del Festival de Primavera y añade un modo multijugador en el que dos jugadores compitan como robots distintos de la actuación.
Consejos para obtener mejores resultados
-
Usa material de origen de alta calidad. La extracción de escenas del agente multimodal es más precisa con video claro y bien iluminado. Las imágenes de actuación con personajes y movimientos definidos — como este video de la Gala — producen un análisis más rico que el contenido de cortes rápidos o baja resolución.
-
Pide revisar el análisis antes de construir. Añadir “muéstrame el documento de análisis del video antes de crear el juego” te da un punto de control para verificar que el agente entendió el video correctamente antes de comprometerse con la construcción.
-
Solicita un solo archivo. Especificar “juego HTML 3D interactivo de un solo archivo” garantiza que todo esté autocontenido e inmediatamente compartible sin un paso de compilación ni servidor.
