Creador de juegos isométricos con IA — Construye un mundo 2.5D explorable en tu navegador

Un creador de juegos isométricos con IA toma una descripción escrita de una escena y devuelve un mundo 2.5D jugable: una cuadrícula de tiles en rombo, una cámara fijada a 45 grados de guiñada, accesorios ordenados de atrás hacia adelante y un personaje al que puedes enviar a cualquier parte con un clic. Neta Studio hace esto en el navegador. Escribes la frase, el compositor coloca el terreno y los accesorios en la cuadrícula y pulsas Play. Sin instalar un motor, sin paso de exportación, sin canal de compilación.

Las partes que normalmente se comen un fin de semana ya vienen conectadas: la proyección 2:1, el orden de profundidad y la transformación inversa de pantalla a tile detrás del movimiento con clic. Lo que realmente controlas es la disposición, el conjunto de tiles, el personaje, las reglas de movimiento y hasta dónde puede desplazarse la cámara.

Una frase → un mundo isométrico

El compositor es la primera pantalla. Un campo de texto, un tamaño de mapa en tiles y un tamaño de tile. Describes la escena como se la describirías a un diseñador de niveles, generas y aterrizas en el editor con un mundo de cuadrícula de rombos ya montado. El valor predeterminado es 64 por 64 tiles a 64 por 32 píxeles por tile, lo que coloca una pantalla completa de mundo dentro de una sola cámara ortográfica sin necesidad de zoom.

Lo que devuelve son cuatro capas. El suelo guarda un identificador de terreno por tile y se fusiona en una sola malla, no una malla por tile. Los accesorios se apoyan en huellas registradas: un barril de 1x1, una casa de 3x3, un muelle de 2x4 que tiene que tocar un borde de agua. Las entidades se mantienen separadas de los accesorios porque se mueven y necesitan datos de búsqueda de rutas. La iluminación y la niebla se superponen y no afectan el orden de clasificación.

La cámara se ajusta a una guiñada de 45 grados y una inclinación que coincide exactamente con un rombo 2:1, que es atan(0.5), unos 26,57 grados, no los 30 grados que citan la mayoría de los tutoriales. La proyección es ortográfica, así que no hay división de perspectiva y un tile en el borde lejano del mapa tiene el mismo tamaño en píxeles que un tile en el borde cercano. El orden de profundidad está activo antes de que pulses Play.

Elige la distribución del terreno, la densidad de accesorios por bioma y una paleta que se mantiene dentro de un solo atlas. Más importante aún, registra las huellas, que es lo que mantiene la oclusión correcta después. Si pides una ciudad portuaria obtienes muelles, cajas y un borde de agua, pero no sabrá que el muelle tiene que tocar el agua a menos que se lo digas.

Repinta el terreno con el pincel, arrastra accesorios desde la biblioteca y define puntos de aparición. Todo lo que lleva una regla asociada, como un puente que tiene que cruzar un río, lo colocas tú mismo. El compositor te da una disposición inicial, no un nivel terminado.

La cuadrícula de rombos y el orden de profundidad, resueltos

Un tile isométrico es un cuadrado rotado 45 grados y aplastado a la mitad de su altura. Con tileW = 64 y tileH = 32, la transformación de mundo a pantalla es sx = (x - y) * 32 y sy = (x + y) * 16. Esa es toda la proyección. No es una proyección isométrica verdadera, es dimétrica a unos 26,57 grados, y es exactamente por eso que los rombos 2:1 caen en píxeles enteros y una cuadrícula isométrica verdadera de 30 grados no. La proporción 2:1 se elige porque escorza ambos ejes por igual y permite dibujar cada sprite para un solo ángulo de cámara.

El orden de profundidad bajo esta proyección es el algoritmo del pintor: dibuja primero el objeto con el menor tileX + tileY. Eso se mantiene hasta que dos objetos comparten una diagonal. Una valla en (5, 3) y un personaje en (4, 4) producen ambos la clave 8. El orden que devuelve la clasificación dibuja encima, y si la clasificación no es estable el orden se invierte entre fotogramas y el par parpadea en la unión. La segunda ruptura es la altura. Un sprite anclado en su centro se ordena por su píxel medio, así que una linterna de 96 píxeles se dibuja sobre un personaje que está delante de su base. Las anclas deben estar en el centro inferior del sprite, sobre el tile que ocupa el objeto.

La tercera ruptura es el tamaño. Un edificio de 3x3 ordenado como un solo objeto con clave 20 se dibujará sobre un personaje en (9, 12), clave 21, aunque ese personaje esté delante de la columna izquierda del edificio. El motor lee la huella registrada y divide todo lo que sea mayor que 1x1 en franjas por columna, de modo que el personaje pasa delante de una columna y detrás de la siguiente. Es la misma razón por la que un muro largo no puede ser un solo sprite.

Movimiento con clic sobre una cuadrícula de tiles real

Esto empieza por la inversa de la proyección. Toma la posición del puntero, resta el origen de la cámara y cualquier desplazamiento de letterbox, luego calcula tileX = (sx / 32 + sy / 16) / 2 y tileY = (sy / 16 - sx / 32) / 2, y redondea ambos hacia abajo. Pon el signo equivocado en el segundo término y el personaje caminará hacia el tile espejo al otro lado del centro del rombo. Ese es el error en el que pasarás una tarde.

Si la cámara puede rotar o moverse libremente, no guardes esa inversa en caché. Lanza un rayo desde la cámara a través del puntero, interseca el plano del suelo y convierte el punto de impacto del mundo a tiles con las mismas fórmulas. La versión con lanzamiento de rayos son unas pocas líneas y sobrevive a cualquier cambio de cámara.

Luego valida. El tile clicado puede tener una huella de accesorio, ser agua, estar fuera del mapa o ser inalcanzable. Limita las coordenadas fuera de los límites, revisa la cuadrícula de ocupación y ejecuta A* sobre 8 vecinos con un costo diagonal de 1,414 y sin cortar esquinas entre dos tiles bloqueados. Muévete en tiles por segundo en lugar de píxeles por segundo, para que la velocidad se mantenga constante cuando cambies el tamaño del tile. Recorre los centros de los tiles a lo largo de una spline suavizada con un radio de llegada de unos 0,05 tiles, o el personaje se entrecortará en cada punto de ruta.

Géneros isométricos que puedes crear

Cuatro géneros cubren la mayoría de los proyectos isométricos, y difieren en las reglas de ocupación y en el tiempo, no en la proyección. Un constructor de ciudades se basa en huellas de varios tiles, una red de caminos que tiene que conectarse y un modo de construcción que previsualiza una huella antes de colocarla. Las tácticas son por turnos, así que la búsqueda de rutas se ejecuta para muchas unidades a la vez y el resaltado de alcance se dibuja directamente sobre la cuadrícula de rombos. Un dungeon crawler usa mapas pequeños y pasillos estrechos, donde la división de muros por columna importa más porque la cámara nunca se mueve. Un RPG de acción es en tiempo real, así que la dirección, los estados de ataque y la mezcla de animaciones importan más que la elegancia de la búsqueda de rutas.

Lo que se mantiene idéntico en los cuatro: el rombo 2:1, la clave de orden, el ancla en los pies y la transformación inversa al hacer clic. Cambiar de género a mitad del proyecto cambia las reglas de ocupación y el bucle de actualización, no el renderizador.

Juégalo ahora — en el navegador

Cada mundo aquí se ejecuta en el navegador, sin instalación ni exportación. El grafo de escena es Three.js, el renderizador es WebGL2 con una alternativa WebGL1, y el mapa se carga como geometría de suelo fusionada más accesorios instanciados. Pulsas Play y ya estás caminando. Comparte el mundo y otra persona caminará por él en su propia máquina, a la misma guiñada de 45 grados.

En teléfonos, la misma ruta de clic pasa por los eventos de puntero, así que un toque es un clic. Los objetivos táctiles son tiles, lo que significa que un toque un poco impreciso sobre un accesorio de un tile igual se resuelve al tile correcto. El zoom por pellizco está desactivado por defecto en mapas de menos de 32 tiles de ancho porque el rombo 2:1 ya es legible al ancho de un teléfono. Si la tasa de fotogramas baja, reduce la cantidad de accesorios antes de reducir el tamaño del mapa; la instanciación ayuda más que eliminar terreno.

Mini World es el caso del mapa pequeño: una isla compacta en rombo, un puñado de accesorios, un personaje, movimiento con clic por todo el conjunto. Es la forma más rápida de ver cómo se comportan la fusión del suelo y la clasificación por tile, porque puedes ver el mapa completo de una vez y no hay dónde esconderse para una mala clave de orden.

The Cyclops' Island es el caso en el que la oclusión realmente importa: accesorios altos, columnas de muros y un personaje que camina detrás de ellos. Observa la esquina de un edificio cuando el personaje pasa junto a ella. La franja de delante se dibuja sobre el personaje, la franja de detrás se dibuja por debajo, y en ningún momento el personaje atraviesa el muro.

Agent Sprite Forge produce hojas de sprites de personaje dibujadas para el ángulo isométrico, con el pivote ya en el centro inferior y la altura de los fotogramas ajustada a la altura de tus tiles. Mantén la cámara en la guiñada predeterminada y una sola hoja es suficiente. Activa la rotación de cámara y necesitas una hoja por cada paso de guiñada, porque un sprite dibujado para 45 grados se ve mal a 90.

Entra al mundo al que pertenece

Un sprite es un personaje sin un lugar donde pararse. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar — una isla pequeña, un planeta, una esquina de calle lluviosa. Cada mundo de este sitio se creó a partir de una sola descripción escrita y se publicó como una página que puedes jugar.

FAQ