Cada juego que creamos nos enseña algo que no sabíamos que necesitábamos aprender. Con Path Runner, la lección fue sobre generación procedural — específicamente, cuánto un sistema que no diseñaste puede moldear toda la sensación de un juego.

El encargo era simple: un endless runner con perspectiva 3D. Corre hacia delante, esquiva obstáculos, no te caigas. Género clásico, mecánicas bien comprendidas. Esperábamos que las partes duras fueran el renderizado 3D (sin motor de juego, solo un canvas de navegador) y el timing de los obstáculos. Esas fueron duras. Pero la cosa que tomó más iteración — y produjo las sorpresas más interesantes — fue el sistema de generación procedural que la IA construyó sin que se le pidiera.

El Encargo Inicial

El prompt era aproximadamente: un endless runner 3D. Tres carriles. El jugador corre hacia delante, los obstáculos aparecen delante, los esquivas. Recoge algo por el camino. Eso era todo — sin detalles sobre hasta dónde debía llegar, cómo se veía la progresión o cómo debía estructurarse el mundo.

Lo que obtuvimos fue arquitectónicamente más completo de lo esperado. La IA eligió un modelo de pista segmentada para esa primera versión: el mundo del juego no era un entorno continuo, era una serie de segmentos generados proceduralmente que se creaban delante de ti y se destruían detrás a medida que te movías. En cualquier momento, solo existía un número fijo de segmentos en memoria. Los nuevos spawneaban delante; los viejos despawneaban detrás. (La versión reconstruida que está activa hoy llega al mismo lugar de una forma más simple — mira la última sección.)

Este es un enfoque estándar para endless runners — pero no lo habíamos especificado. La IA llegó ahí independientemente porque es la solución correcta al problema del "mundo infinito en un navegador".

El Enfoque de Renderizado 3D

Path Runner renderiza 3D enteramente en un canvas de navegador — sin WebGL, sin Three.js, sin librería externa. La IA usó una técnica a veces llamada renderizado "pseudo-3D" o estilo "Mode 7": los objetos se dibujan de atrás hacia delante con escalado aplicado basado en su posición Z. Las cosas más lejanas se dibujan más pequeñas; las cosas cercanas al jugador se dibujan más grandes. El suelo de la pista se dibuja como trapecios convergentes. Combinado con la velocidad de movimiento, produce un convincente sentido de movimiento hacia delante a través de un espacio 3D.

La limitación de este enfoque es que no es 3D real — no puedes rotar libremente la cámara o hacer nada que rompiera la proyección. Pero para un endless runner donde la cámara siempre mira hacia delante, funciona bien y corre a frame rate completo en cualquier navegador moderno sin dependencias.

Pasamos unas iteraciones ajustando la perspectiva — la versión inicial tenía un punto de fuga que se sentía demasiado alto, haciendo que la pista pareciera que siempre estabas corriendo cuesta abajo. Bajar el horizonte lo arregló. Ese tipo de calibración visual requería jugar el juego en lugar de leer el código.

Seis Tipos de Obstáculo, Cada Uno Requiriendo una Respuesta Distinta

El conjunto de obstáculos salió de la generación inicial, pero la lógica detrás de él fue diseñada deliberadamente. Hoy se envían seis tipos, los tres últimos se desbloquean a medida que subes de nivel, y cada uno pide una respuesta física distinta:

• Las barreras son muros holográficos a la altura de la cintura — saltas sobre ellas
• Las cajas son bloques sólidos que un salto no supera — cambias de carril
• Los rayos láser cruzan la carretera a la altura de la rodilla — te deslizas por debajo
• Las barreras móviles (nivel 3+) oscilan entre carriles, con una flecha que indica hacia dónde
• Las cajas dobles (nivel 4+) bloquean dos carriles adyacentes a la vez
• Los huecos en la carretera (nivel 5+) son agujeros en la superficie — los saltas

Lo que hace esto interesante desde un punto de diseño es que cada tipo de obstáculo engancha un control distinto. No puedes desarrollar un único patrón reflejo para todos los obstáculos — tienes que identificar el tipo y responder apropiadamente. Las barreras y las cajas son particularmente fáciles de confundir en situaciones de fracción de segundo — se parecen y piden respuestas opuestas — lo que crea la tensión que hace que las carreras largas se sientan como expresión genuina de habilidad.

La generación procedural distribuye estos a lo largo de la carretera de formas que ocasionalmente crean retos compuestos — una caja en el carril central forzándote a un lado justo cuando aparece una barrera ahí. Estas combinaciones no estaban pre-diseñadas. Emergen del algoritmo de distribución, y las mejores se sienten genuinamente sorprendentes.

La Economía de Gemas: Una Adición Inesperada

Las gemas estaban en el encargo original como "recoge algo por el camino". Lo que no especificamos era qué harías con ellas. La IA añadió una tienda de mejoras — accesible desde el menú principal y desde la pantalla de game over — donde las gemas compran siete mejoras permanentes a entre 300 y 800 cada una: vidas extra, un multiplicador de puntuación, valor de las gemas, una ventaja de salida, rango del imán, golpes de escudo y una mayor tasa de aparición de power-ups.

Este fue uno de esos casos donde una adición no pedida genuinamente mejoró el juego. Sin la tienda, las gemas son solo puntos. Con la tienda, cada carrera tiene un objetivo secundario: acumula suficientes gemas para el siguiente nivel de mejora — o para la reanimación de 200 gemas que te devuelve una vida cuando se va la última. Los jugadores que están luchando por sobrevivir tienen una forma significativa de extender sus carreras. Los jugadores que ya están sobreviviendo bien pueden saltarse la tienda y solo empujar su puntuación.

El sistema de spawn de gemas también es generado proceduralmente. Las gemas sueltas caen en un carril al azar; cada quince a veinticinco segundos se dispara en su lugar un patrón programado — cinco gemas en línea, cinco en zigzag entre dos carriles, o un arco de tres gemas cuya gema central flota lo bastante alto como para que tengas que saltar para cogerla. No hay ponderación de carriles: el riesgo que asumes es el del carril por el que pase el patrón.

Cuatro Temas Visuales y Cómo Funcionan

Los temas visuales fueron una de las primeras cosas que pedimos tras ver la versión inicial. Las mecánicas del juego funcionaban. La presentación necesitaba más variedad. Hoy se envían cuatro temas: Cyber City, Neon Forest, Space Station y Volcano.

Lo que la IA construyó fue un sistema de temas que intercambia la paleta de colores, el degradado del cielo, los colores de los raíles y las partículas ambientales del cielo en la transición de nivel. Cyber City es el predeterminado — cielo casi negro, raíles cian y magenta, bengalas a la deriva y letreros flotantes. Neon Forest va de verde sobre verde. Space Station vira al violeta y al azul profundo, con cometas cruzando el cielo. Volcano arde en naranja, con brasas en lugar de cometas.

Los mismos patrones de obstáculos y la misma lógica de aparición corren bajo los cuatro temas — la lógica procedural es agnóstica al tema. Esto significó que añadir un tema nuevo era cuestión de escribir una nueva configuración de color, no rediseñar el generador. La arquitectura soportaba la variación correctamente desde el principio.

Cyber City corre desde el nivel uno. Neon Forest toma el relevo en el nivel tres, Space Station en el cinco y Volcano en el siete. Los temas añaden novedad visual a lo que de otro modo sería un entorno idéntico entre sesiones, lo que importa para la durabilidad del rejugado.

Lo Que Tuvimos Que Arreglar

La primera versión tenía un problema de detección de colisión: los obstáculos registraban impactos desde ligeramente fuera de su geometría visible, lo que se sentía injusto — parecerías esquivar un obstáculo y aún así perderías una vida. Los hitboxes necesitaban encogerse para que el volumen de colisión coincidiera con la geometría dibujada en lugar de con la caja delimitadora que la rodea.

El magnetismo de gemas también estaba mal inicialmente. Las gemas aparecerían brevemente, luego despawnearían antes de que los jugadores pudieran alcanzarlas. El timing de despawn estaba ligado a la eliminación de segmento en lugar de a una duración fija, lo que causaba que los segmentos a velocidades más altas tuvieran gemas que eran efectivamente no recogibles. Desacoplar la vida de la gema de la vida del segmento lo arregló.

Los controles táctiles móviles necesitaron una segunda pasada. La implementación inicial era basada en swipe pero no distinguía claramente entre un swipe pretendido como input direccional y un arrastre accidental. Añadir una distancia mínima de swipe — treinta píxeles de recorrido antes de que un toque cuente como una dirección — eliminó la mayoría de disparos falsos — el mismo problema que tuvo Neon Snake, y la misma solución.

Qué Hace Distinto a Path Runner

El género de endless runner tiene convenciones bien establecidas. Lo que la generación procedural añade a esas convenciones es variedad genuina sesión-a-sesión — no variedad cosmética (diferentes pieles sobre los mismos patrones) sino variedad estructural en la colocación de obstáculos y la distribución de gemas. Cada carrera está construida con los mismos componentes pero ensamblada de forma única.

Eso es más difícil de apreciar en una captura de pantalla que de sentir al jugar. La mejor forma de entenderlo es jugar dos carreras seguidas y notar lo diferentes que se sienten las secuencias de apertura a pesar de usar el mismo puñado de tipos de obstáculo.

La Reconstrucción (y la Reconstrucción Antes de Esa)

La mayor parte de este post describe la arquitectura que se envió a finales de 2025. Varios meses después, ese código dejó de funcionar. No de forma pequeña — Path Runner pasó de correr limpiamente a negarse a arrancar, con síntomas en cascada: un crash del AudioContext que tumbó el botón de inicio, métodos faltantes que deberían haber existido, una pantalla completa en negro en el primer frame. Pasamos un día persiguiendo arreglos a través del código existente (resize defensivo, primer frame retrasado, eliminar fills negros redundantes, cache busting agresivo). Ninguno de ellos cuajó.

A la mañana siguiente tomamos la decisión de tirar la arquitectura. La primera reconstrucción fue en la otra dirección — de vuelta a un limpio lane runner 2D, sin pseudo-3D en absoluto. Eso funcionó, pero abandonó todo lo que hacía que el Path Runner original se sintiera distintivo.

Dos días después tiramos eso y reconstruimos la versión 3D desde cero como el renderer premium en perspectiva que está vivo hoy. A lo largo de aproximadamente dos horas y media esa tarde, quince iteraciones documentadas se enviaron en secuencia — combos, niveles hito, screen shake, cuatro power-ups, cuatro temas de entorno, una tienda de mejoras con siete mejoras, puntuación por near-miss, retos diarios, cuatro skins de personaje, un tutorial de primera vez, patrones de estela de gemas, estelas de movimiento, encuentros de jefe, logros in-game, un HUD estilizado con viñeta y desenfoque de cristal, arte premium de personaje con más de veinte draw calls por frame, gemas facetadas, efectos atmosféricos de entorno, y un cielo más profundo con luna, planeta, nubes y capas de silueta. La decimoquinta iteración fue la final.

Una ráfaga separada de una sola mañana al día siguiente reconstruyó el personaje runner desde cero — un rediseño chibi completo — y añadió una mesa giratoria de sprite de 360 grados para la previsualización de skin de la tienda de mejoras. La mesa giratoria pasó por unas diez iteraciones en dos horas: 8 frames, luego 16 frames, luego 32 frames, luego propiedades orbitales computadas con trigonometría para mantener las orejas y los adornos rotando en sincronía con el cuerpo, luego detalles frente y dorso mutuamente exclusivos para evitar doble renderizado. Al final de esa mañana había cuatro skins nuevos en la tienda: Shadow Ninja, Astro, Cyber Gorilla y Neon Cowboy. La plantilla suma ocho hoy, contando el Neon Runner gratuito con el que empiezas.

Unos días después, un sistema adaptativo de niveles de calidad aterrizó para tablets de gama baja — el renderer ahora deshabilita los efectos más caros cuando el presupuesto de frame está apretado, así que los dispositivos más viejos obtienen la misma jugabilidad a una fidelidad visual más baja en lugar de un tartamudeo a alta fidelidad.

La versión actual de Path Runner es el resultado de esas ráfagas comprimidas más una cadencia constante de arreglos más pequeños desde entonces. La economía de gemas sobrevivió intacta a las reconstrucciones. La pista segmentada no: la versión que está activa hoy no tiene ningún modelo de segmentos — los obstáculos y las gemas son objetos en pool que aparecen en el extremo lejano de la carretera en un carril al azar y se reciclan una vez que los dejas atrás. El renderer, el personaje, el sistema de skins y el escalado de rendimiento también son trabajo posterior a la reconstrucción.

Relacionado: Consejos de Path Runner: Cómo Sobrevivir Carreras Largas y Maximizar Tu Puntuación de Gemas · Juego Gratis Online de Endless Runner – Juega Path Runner en Tu Navegador · ¿Qué es Vibe Coding? · Herramientas de Vibe Coding: Desde Chatbots hasta IDEs de IA