Dibuja un juego en un papel y juégalo en el navegador: del boceto a la app sin programar
Tienes una idea en una servilleta y cero ganas de aprender a programar. Con un boceto, Canvas y un prompt bien escrito, la tienes funcionando en unos minutos.
Todos hemos dibujado alguna vez la idea de un juego, de una calculadora rara o de una pantalla de app en la parte de atrás de un folio. Y todos hemos hecho lo mismo después: guardarlo en un cajón, porque pasar de ahí a algo que funcione exigía saber programar o pagar a alguien que supiera.
Eso ha cambiado bastante. Puedes subir una foto de tu boceto a Gemini, pedirle que lo construya en Canvas y jugar al resultado en la propia vista previa, sin instalar nada. Yo lo he enfocado con un juego de plataformas, pero los pasos sirven para cualquier cosa que seas capaz de dibujar.
Qué necesitas y cuánto cuesta
Lo único que usas es la app de Gemini, que incluye Canvas. El modelo que hace esto bien, Gemini 4 Argon, es de pago en la app. Hace falta un plan Google AI Pro (desde 19,99 dólares al mes) o Ultra (desde 99,99 dólares al mes), y la versión gratuita no lo incluye. También puedes hacerlo con la versión gratuita, pero el model de Gemini que trae inferior a 4 Argon, dará unos resultados un poquito peores.
Canvas viene incluido dentro de Gemini. Por lo que he visto, no hay que pagar nada aparte por él.
Paso 1: elige el modelo y sube el nivel de razonamiento
Abre la app de Gemini y, en el selector de modelo (está donde siempre), elige Gemini 4 Argon. Verás tres niveles de razonamiento: bajo, medio y alto. Para convertir un dibujo en un juego con reglas, yo pondría alto. Tarda algo más, pero un juego tiene muchas piezas que encajar y con poco razonamiento es fácil que se deje cosas por el camino.
Paso 2: sube el boceto (y no pidas "un juego" a secas)
Haz una foto al dibujo, con buena luz y sin sombras encima, y adjúntala al chat. Casi todo el mundo cae en una trampa: si tu petición es muy corta, del estilo "conviértelo en un juego jugable", Gemini puede interpretar que quieres una imagen y devolverte un dibujo bonito generado con su creador de imágenes. Muy mono, pero no es lo que buscabas.
Así que deja claro dónde se construye y qué formato quieres.
Paso 3: pídele que lo construya en Canvas
Dile expresamente que use Canvas, que no genere imágenes, que no te dé un archivo para descargar y que el código vaya completo, sin huecos. Y describe el juego con objetivo y controles. Este es el prompt que usé como base:
Constrúyelo en Canvas como una aplicación interactiva que se ejecute aquí mismo, en la vista previa. No generes una imagen y no me des un archivo para descargar. Incluye todo el código, sin partes pendientes ni marcadores de relleno. Usa JavaScript puro y ninguna librería.
Objetivo: haz un juego de plataformas 3D sencillo basado en el boceto adjunto. El jugador corre y salta entre varias plataformas flotantes, recoge las monedas y evita el foso de pinchos. Si se cae o toca los pinchos, el nivel se reinicia.
Controles: flechas o WASD para moverse y barra espaciadora para saltar.
Fíjate en que hay tres partes bien separadas: dónde y cómo se construye, qué es el juego y cómo se controla. Si cambias el tema, mantén esa estructura y cambia solo lo del medio.
Paso 4: juega en la vista previa y ve retocando
Cuando termina, el juego se ejecuta en la propia vista previa de Canvas. En mi caso, siguió el boceto bastante bien: plataformas donde las había dibujado, monedas, pinchos, y podías saltar de una a otra hasta llegar al final del nivel.
Si algo no te convence, no empieces de cero. Díselo con frases concretas, como "el salto es demasiado alto, redúcelo" o "las monedas son muy pequeñas". Si el resultado es un lío, pídele una versión más simple y ve añadiendo piezas poco a poco. Funciona mejor que intentar clavarlo todo de golpe.
Paso 5: guarda tu forma de pedirlo como Skill
Si vas a repetirlo, entra en los ajustes de Gemini y busca la pestaña Skills. Son instrucciones guardadas que Gemini sigue siempre, así que puedes meter ahí tu bloque de "constrúyelo en Canvas, sin imágenes, sin descargas, con todo el código" y empezar cada proyecto con la parte pesada ya escrita. Una cautela: las páginas oficiales que he consultado no confirman que Skills esté disponible en todas las cuentas ni en todas las regiones, así que si no te aparece la pestaña, copia el bloque en un documento y pégalo a mano.
Ajustes que marcan la diferencia
Cuenta cómo se maneja: ratón, teclado, toques en pantalla. En las pruebas, Gemini siguió bien instrucciones largas con ese detalle, así que no te cortes.
Limita la tecnología ("JavaScript puro, sin librerías") para que todo viva en un solo bloque y funcione en la vista previa sin instalar nada.
Para encargos rápidos, como convertir un puñado de textos en una presentación, el chat normal fue mucho más ágil que dejarlo trabajando largo rato. Lo hice con varios archivos de texto, un documento Word y una imagen y tardó cerca de un minuto, aunque en otra tarea se alargó media hora sin resultado, y puede que fuera cosa mía.
Si quieres que las presentaciones o diseños no salgan sosos, dale una referencia de estilo: una presentación de ejemplo adjunta a una Skill hace que los siguientes trabajos copien tu estética.
Más ideas, aparte de los juegos
El truco no es el juego, es que cualquier cosa que puedas dibujar o subir como imagen se puede convertir en algo con lo que interactuar. Algunas aplicaciones que he visto o probado:
En una inmobiliaria, subes un plano y obtienes una casa por la que el cliente puede "pasear" en pantalla.
En construcción, un modelo de cuánto peso aguanta cada zona de un tejado, con números que puedes cambiar.
Para organizar un evento, le pides que busque locales y los compare en una hoja de cálculo de Google, cinco lado a lado.
En la oficina, le pasas textos, un Word y una imagen y te devuelve una presentación limpia.
Si creas música, puedes pedir una app de estudio con controles al estilo de GarageBand.
Lo que conviene tener claro antes de lanzarte
Primero, es de pago: sin plan Pro o Ultra no tienes Argon en la app, y ahí está el mayor obstáculo. Segundo, lo que sale es un prototipo jugable, no un producto terminado: el nivel es sencillo, habrá cosas por pulir y no vas a publicar el resultado en una tienda de aplicaciones sin más trabajo. Y tercero, la calidad depende mucho de cuánto cuentes: un boceto confuso con una petición de una línea te dará un resultado confuso.
Aun así, para validar una idea, enseñársela a alguien o simplemente ver cómo se movería, pasar de un folio a algo que se juega en cinco minutos me parece una pasada.
Mi propuesta para hoy: coge ahora mismo un papel, dibuja la idea más tonta que tengas y súbela con el prompt de arriba cambiando solo el bloque del medio. Y cuéntame en comentarios qué has dibujado, que me da mucha curiosidad ver qué sale.
Comentarios
Aún no hay comentarios. ¡Sé el primero en comentar!