HeyMark
Guías

Cómo crear un juego con GPT Astra y Paint

4 min de lectura

En esta guía aprenderás a pedirle a Astra que dibuje un personaje en Paint y lo convierta en un juego de esquí. Bajarás una montaña, esquivarás obstáculos y harás mortales desde las rampas.

Antes de empezar

En Windows usaremos Paint. En Mac puedes dibujar en Piskel, un editor de pixel art en el navegador. Abre la app de escritorio de ChatGPT, entra a Codex y selecciona Astra, si está disponible en tu cuenta. Necesitas una sesión que pueda controlar el editor de dibujo, guardar archivos y ejecutar comandos. El chat web común no tiene ese acceso a tu computador.

Abre una carpeta para este proyecto y concede los permisos que necesite. También puedes usar Codex desde una terminal con Astra en medium; para dibujar, la sesión necesita control del mouse y teclado, por ejemplo mediante Python y pyautogui. La primera vez puede tardar en descargar las herramientas para crear el juego y su aplicación: .exe en Windows o .app en Mac.

Del dibujo al juego

  1. Dibuja tu esquiador

    Envía este primer mensaje. La IA dibujará al mismo personaje en tres poses: de pie, agachado y en el aire. También le pedirás una vista previa para comprobar cómo se mueve.

    1. El personaje y sus movimientos
    Vamos a crear un pequeño juego de esquí. Primero crea una carpeta nueva llamada ski-rush dentro de la carpeta que tengo abierta y trabaja ahí. Si ya existe, usa un nombre nuevo sin reemplazar nada. Si no hay una carpeta seleccionada, pídeme que abra una. Crea dentro las subcarpetas assets y originals.
    
    Detecta mi sistema operativo. En Windows abre Microsoft Paint; en Mac abre el editor de Piskel en https://www.piskelapp.com/. Usa las herramientas de dibujo del editor con el mouse para dibujar una personita 2D de perfil, mirando hacia la derecha: casco, gafas, chaqueta roja, pantalón oscuro y esquís. Usa pixel art 2D de RPG retro de 16 bits: cabeza grande, cuerpo pequeño, silueta marcada, contorno oscuro de un píxel, paleta reducida y colores planos con una sombra sencilla. Píxeles cuadrados y bordes nítidos, sin suavizado ni degradados. Inspírate en las proporciones de personajes RPG de 16 × 16, pero usa un lienzo de 32 × 32 por pose para que quepan los esquís. Diseña un esquiador original de perfil. Quiero ver cómo lo dibujas a mano con las herramientas del editor, usando zoom y la cuadrícula; no generes el personaje con código ni pegues una imagen ya hecha. Comprueba primero cómo puedes controlar la aplicación. Si esta sesión no tiene una herramienta directa de escritorio, puedes usar automatización de mouse y teclado con Python y pyautogui; comprueba si están disponibles y dime si falta instalar algo. Si no tienes ninguna forma de controlar el editor, avísame antes de continuar.
    
    Dibuja tres poses del mismo personaje: de pie deslizándose, agachado y saltando con las rodillas recogidas. Mantén los colores y las proporciones entre las poses. Guárdalas como PNG en assets, con los nombres ski-standing.png, ski-crouch.png y ski-jump.png. Puedes dibujarlas en una misma lámina y recortarlas después. Conserva el dibujo original del editor en originals y prepara copias con fondo transparente, lienzos del mismo tamaño y un punto de apoyo consistente en los esquís.
    
    Crea una pequeña vista previa local en HTML y JavaScript que use esos dibujos: deslizamiento suave, transición al agacharse y un salto con despegue y aterrizaje. El movimiento se anima en la vista previa a partir de las poses. Ábrela y comprueba que el personaje no se corta ni cambia de tamaño al moverse. Al terminar, muéstrame las tres poses y dónde las guardaste. Todavía no construyas el juego.

    Resultado

    Deslizándose
    Deslizándose
    Agachado
    Agachado
    Saltando
    Saltando
    Las tres poses que dibujó Astra en Paint durante nuestra prueba.

    Comprueba que las tres poses se reconozcan y que el fondo no tape lo que hay detrás. Si quieres cambiar el dibujo, hazlo antes de seguir.

  2. Convierte el dibujo en un juego

    En la misma conversación y carpeta, envía el segundo mensaje. Usará el personaje que acaba de dibujar para construir el juego y dejarlo en tu escritorio.

    2. El juego de esquí
    Ahora convierte el personaje que dibujaste en un juego llamado Ski Rush. Trabaja en esta misma carpeta y reutiliza los PNG de assets y sus animaciones.
    
    Construye un juego 2D de vista lateral con HTML, CSS y JavaScript usando Canvas. El esquiador baja automáticamente una montaña nevada hacia la derecha y la cámara lo acompaña. Quiero montañas al fondo, nieve al deslizarse, rampas y una interfaz pequeña con distancia y puntos.
    
    Controles: Espacio o flecha arriba para saltar desde el suelo; mantener flecha abajo para agacharse y soltarla para levantarse. En el aire, mantener flecha izquierda gira hacia atrás y flecha derecha hacia delante. Las rampas deben impulsarlo lo suficiente para hacer mortales. Al soltar las flechas, conserva el ángulo alcanzado para que haya que preparar el aterrizaje.
    
    Pon rocas que haya que saltar y ramas elevadas por las que se pase agachado. Ajusta la colisión a cada pose: agacharse debe servir de verdad. Deja espacio para reaccionar y aterrizar; evita combinaciones imposibles. Sube la dificultad poco a poco. Un mortal completo suma puntos solo al aterrizar sobre los esquís, alineados con la pendiente; caer de cabeza o chocar termina la partida. Incluye pantalla de inicio con los controles, pausa con P, pausa al perder el foco y reinicio con R o un botón.
    
    Primero abre y prueba el juego: salto, agacharse bajo ramas, impulso de rampas, mortales en ambas direcciones, colisiones y reinicio. Corrige lo que falle. Usa tiempo transcurrido para que la velocidad no dependa de los FPS.
    
    Después detecta el sistema operativo y la arquitectura de este computador. Empaqueta el juego con Electron: en Windows, un .exe portable; en Mac, una aplicación .app para Apple Silicon o Intel, según corresponda. Genera y prueba la aplicación en el sistema donde estoy trabajando. Incluye todos los dibujos y recursos para jugar sin internet y sin tener Node instalado. Conserva el código JavaScript y las instrucciones para volver a generar el ejecutable. Detecta la ubicación real del escritorio y deja ahí Ski Rush.exe en Windows o Ski Rush.app en Mac, sin reemplazar archivos existentes. Abre esa aplicación y comprueba que funciona fuera del entorno de desarrollo. Si falta una herramienta o un permiso, dime qué necesitas; si no puedes completar alguna prueba o generar la aplicación para mi sistema, indícalo. Al terminar, muéstrame dónde está el juego.

    Resultado

    Primera versión de Ski Rush: el esquiador baja la montaña hacia una roca.
    El juego después del segundo prompt, antes de añadir los pinos.

    Espera a que termine de construirlo y probarlo. Estos mensajes pueden dar lugar a preguntas o correcciones durante el proceso.

  3. Dibuja los pinos nevados

    Con el juego funcionando, envía el tercer mensaje en la misma conversación. Cambiará los árboles del fondo por pinos dibujados con el mismo estilo del personaje.

    3. Los pinos de la montaña
    Dale el último toque a Ski Rush: reemplaza los pinos triangulares del fondo por un asset de pino de montaña nevado, dibujado a mano con las herramientas del editor.
    
    Trabaja en la misma carpeta del juego. En Windows abre Paint; en Mac usa Piskel. Usa el control de mouse y teclado disponible, como hiciste con el personaje. Antes de dibujar, guarda cualquier dibujo pendiente en su archivo original.
    
    Dibuja un pino original en pixel art 2D, de 32 × 48 píxeles, que combine con el esquiador. Usa tronco marrón, ramas escalonadas e irregulares en verde oscuro, sombras azuladas y nieve blanca con sombra celeste acumulada sobre las ramas. Que se distingan los pisos de ramas, el tronco y los montones de nieve. Evita la silueta de un triángulo liso. Usa pocos colores, píxeles nítidos y sin suavizado. Dibuja con lápiz y relleno dentro del editor; no generes el dibujo con código ni pegues una imagen terminada.
    
    Guarda el original en originals y exporta una copia con fondo transparente como assets/snow-pine.png. Puedes usar código después de guardar para recortar y preparar la transparencia, conservando el dibujo.
    
    Integra ese asset en el juego para sustituir los árboles triangulares del fondo. Repítelo con distintos tamaños y separaciones en dos planos: pequeños y tenues al fondo, más grandes y definidos cerca de la pista. Conserva las montañas y deja visibles al esquiador, las rampas y los obstáculos. Estos pinos son decoración: no agregues colisiones ni cambies los controles o la física.
    
    Abre el juego, comprueba que no aparezcan fondos blancos alrededor de los pinos ni saltos al desplazar el paisaje y muéstrame una captura jugando. Después vuelve a generar la aplicación para mi sistema, .exe en Windows o .app en Mac. Cierra solo la instancia de este juego si hace falta y actualiza su copia del escritorio; conserva el código y los originales. Abre la versión actualizada y comprueba que incluya los pinos y que todavía funcionen salto, agacharse y reinicio. Si alguna parte no puede completarse o probarse, indícalo.

    Resultado

    Así quedó nuestra prueba: salto, agacharse y un mortal entre los pinos nevados.

    Espera a que actualice la aplicación del escritorio para ver el nuevo paisaje.

  4. Baja la montaña

    Abre Ski Rush.exe en Windows o Ski Rush.app en Mac desde tu escritorio y empieza una partida. Prueba primero el salto y agacharte; después busca una rampa e intenta completar un mortal.

Los controles

Tecla Acción
Espacio o ↑ Saltar desde el suelo
Mantener ↓ Agacharse
← en el aire Girar hacia atrás
→ en el aire Girar hacia delante
P Pausar o continuar
R Reiniciar

Para cambiar algo, sigue en la misma conversación. Puedes pedir una bajada más rápida, rampas más altas o un personaje con otros colores. Pídele que vuelva a generar el ejecutable después de los cambios.