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: el mundo del juego no es un entorno continuo, es una serie de segmentos generados proceduralmente que se crean delante de ti y se destruyen detrás a medida que te mueves. En cualquier momento, solo existe un número fijo de segmentos en memoria. Los nuevos spawnean delante; los viejos despawnean detrás.

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.

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

Los tres tipos de obstáculo salieron de la generación inicial, pero la lógica detrás de ellos fue diseñada deliberadamente. Cada uno requiere una respuesta física distinta del jugador:

• Barreras bloquean el camino a la altura de la cintura — saltas sobre ellas
• Arcos son estructuras bajas — te deslizas por debajo
• Rocas están en un único carril — cambias de carril para evitarlas

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 los Arcos son particularmente fáciles de confundir en situaciones de fracción de segundo, 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 los segmentos de formas que ocasionalmente crean retos compuestos — una Roca 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 in-game — accesible entre niveles — donde puedes gastar gemas en vidas extra y boosts de puntuación.

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 comprar una vida antes del siguiente segmento. 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, distribuido a lo largo de los segmentos en patrones que recompensan correr por el carril central (la línea más peligrosa, ya que los tres tipos de obstáculo aparecen ahí). Los carriles de alto riesgo tienen mayor densidad de gemas. Ese balance emergió de los parámetros de generación — no lo especificamos.

Tres Temas Visuales y Cómo Funcionan

Los tres temas visuales — Bosque, Hielo y Cyberpunk — 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.

Lo que la IA construyó fue un sistema de temas que intercambia toda la paleta de colores, cielo y geometría del entorno en la transición de nivel. Bosque usa tonos cálidos de tierra con siluetas de árboles y un cielo diurno. Hielo cambia a azules fríos con geometría escasa que sugiere terreno congelado. Cyberpunk se vuelve oscuro, reemplazando formas orgánicas con corredores geométricos duros y bordes con tinte neón.

Los mismos patrones de obstáculos y generación de segmentos corren bajo los tres 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.

Los jugadores que completan el nivel uno reciben Bosque. Nivel dos: Hielo. Nivel tres y más allá: Cyberpunk. 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, particularmente en los Arcos donde el arco visual dejaba espacio abierto significativo que el volumen de colisión estaba llenando incorrectamente.

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 un umbral mínimo de velocidad para la detección de swipe 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 los mismos tres 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 cinco 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 distintivos en la tienda: Ninja, Astro, Gorilla y Cowboy.

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 arquitectura original de pista procedural y la lógica de economía de gemas del envío de diciembre aún se sostienen — esas partes no necesitaron reconstrucción. El renderer, el personaje, el sistema de skins y el escalado de rendimiento son todo trabajo post-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