Cómo Creamos Vapor Drift: Carreras Synthwave Ajustadas por Prompt

Contrarrelojes en vista cenital, tres pistas, replays fantasma de tu mejor vuelta — y una mecánica de derrape que vive en exactamente un coeficiente de física. Aquí está cómo el pipeline de IA creó un racer synthwave que se sintió bien en la sexta iteración.

18 de abril, 2026 · Vibe Arcade

Los juegos de carreras de navegador suelen elegir uno de dos ángulos de cámara. Primera persona te da la fantasía del tablero pero le pide a la GPU del teléfono renderizar un mundo hasta el horizonte. Los scrollers laterales esquivan eso pero pierden la sensación de líneas y ápices. Vapor Drift tomó la tercera opción: vista cenital. Ves la curva entera antes de entrar, lo que convierte cada vuelta en un ejercicio de pensar en vez de una prueba de reflejos.

Lo que la IA construyó fue un contrarreloj synthwave de tres pistas con replays fantasma de tu mejor vuelta, prevención de corte de curvas validada por waypoints, física de derrape sobre un único coeficiente de agarre y desbloqueos por tiempo. Así fue como se gestó en seis iteraciones.

Por Qué la Vista Cenital Fue la Decisión Correcta

El encargo fue corto: "Juego de carreras synthwave. Tres pistas. Contrarreloj — sin oponentes con IA. Hazlo sentir como manejar un coche deportivo de neón a través de la portada de un álbum de los 80." El ángulo de cámara quedó abierto.

Esperábamos primera persona. Lo que obtuvimos fue vista cenital, con un argumento: la vista cenital es un puzzle de carreras, la primera persona es un puzzle de reflejos. Con una sesión de uno a tres minutos y sin tráfico con IA, los reflejos no tienen mucho que hacer — las decisiones interesantes son la línea de carrera, el punto de frenado y cuándo comprometerse con el derrape. Todas más fáciles de ver desde arriba. Una cámara cenital también gasta su presupuesto de renderizado en la pista misma en vez de intentar pintar palmeras y gradientes de atardecer en el horizonte cada fotograma.

La Mecánica de Derrape Es Un Solo Número

¿Qué hace realmente el derrape? Los simuladores realistas modelan ángulos de deslizamiento de neumáticos y transferencia de peso; los racers arcade lo fingen. Nunca íbamos a entregar un modelo de neumáticos en un canvas de navegador.

La IA propuso tratar el derrape como un modificador de agarre lateral. La velocidad del coche tiene dos componentes relativos a su dirección de mirada: velocidad hacia adelante y deslizamiento lateral. Cada fotograma, el deslizamiento lateral se reduce — el coche quiere ir hacia donde apunta. La tasa de esa reducción es un único coeficiente. Presiona la tecla de derrape y el coeficiente baja; la parte trasera sale. Suelta y la línea se cierra. Esa es toda la mecánica.

Suena demasiado simple para sentirse bien. En la práctica, ajustar ese único número es la diferencia entre un coche sobre rieles y un coche sobre hielo. Derrapa demasiado pronto y arrastras la velocidad de entrada; derrapa demasiado tarde y el coche no rotará a tiempo.

Los Waypoints Previenen Hacer Trampa en la Línea

Un racer cenital tiene un exploit obvio: cortar a través del pasto. La solución es la validación por waypoints — la pista es una cadena de checkpoints ordenados que el coche tiene que marcar en secuencia antes de que un cruce de meta cuente como vuelta.

Cada pista tiene entre dieciséis y veintidós waypoints. El radio de tolerancia perdona una línea de carrera apretada pero bloquea un atajo por el campo interior. Falla uno y la vuelta se marca inválida — el tiempo no se guarda, el desbloqueo no se activa. La densidad importa: muy pocos y puedes ir en línea recta entre ellos, demasiados y una chicane se vuelve un pasillo demasiado estrecho para la línea de carrera. La primera versión de la Pista 1 te dejaba cortar el campo interior. La versión final lo arregló con la misma forma y una cadena más densa.

Replays Fantasma: Posición, Rotación, Veinte Hz

El único oponente en Vapor Drift eres tú — tu mejor vuelta, renderizada como un coche translúcido teal recorriendo su camino mientras manejas. Los sistemas fantasma suenan simples hasta que construyes uno.

Empuja una muestra a un array cada cincuenta milisegundos. Cada muestra contiene x, y, ángulo de mirada y offset de tiempo desde el inicio de la vuelta. En un nuevo récord personal, el array reemplaza el fantasma guardado y se escribe en localStorage. La siguiente vuelta, el fantasma recorre su camino interpolando entre muestras basado en el tiempo transcurrido.

La parte sutil es la interpolación. La posición es un lerp estándar. El ángulo necesita un helper de menor-diferencia-angular — interpolar radianes crudos a través del envoltorio de pi produce un coche que gira hacia atrás en una rotación completa cada vez. Ese bug apareció en la primera implementación y tomó una iteración aislarlo.

El reloj de reproducción del fantasma se reinicia cuando el jugador cruza la meta, así que un fantasma tres segundos adelante en una línea sigue tres segundos adelante en la siguiente. No persigues un fantasma que siempre está adelante — persigues la forma de su línea. Es una mejor herramienta de aprendizaje de lo que esperábamos: el fantasma muestra dónde frenaste temprano, dónde cediste velocidad de salida, dónde tu línea se va ancha.

Desbloqueos Restringidos por Tiempo Sin la Molienda

Tres pistas se desbloquean en secuencia. Sunset Boulevard es gratis. Neon Oasis — un ocho con una trampa de arena en un ápice — se desbloquea cuando logras una vuelta limpia bajo el objetivo de Sunset. Palm Reef, la más sinuosa con pasillos estrechos y siluetas de palmeras, se desbloquea desde un objetivo limpio en Neon Oasis.

La pregunta complicada era dónde poner los objetivos. Demasiado flojos y el desbloqueo pasa en la primera vuelta. Demasiado apretados y el jugador rebota fuera de la Pista 1. La primera propuesta de la IA fue el punto medio entre una vuelta limpia de primer intento y una vuelta óptima, lo cual resultó correcto — un jugador concentrado alcanza el objetivo en un puñado de carreras. Los flags de desbloqueo se persisten en localStorage, así que el desbloqueo es un trinquete unidireccional.

El Sistema Visual Synthwave

La paleta — rosa caliente, cian, púrpura, naranja atardecer sobre violeta profundo — quedó en la primera pasada. El trabajo estuvo en la composición. Un gradiente de cielo se sitúa al fondo. Encima, una cuadrícula en perspectiva se abanica desde un horizonte con líneas horizontales en espaciado cuadrático y líneas verticales que hacen scroll lento. La pista tiene una superficie oscura, un borde interno rosa y un borde externo teal, ambos con una sombra brillante. Un overlay de líneas de escaneo CRT está encima a baja transparencia — no lo notas mientras juegas, pero la pantalla se ve mal si lo quitas. Para Palm Reef, siluetas de palmeras púrpura oscuro bordean los lados de la pista. No afectan el gameplay; solo hacen que la tercera pista se sienta como un lugar diferente.

Dos Rutas de Input, Ambas de Primera Clase

El escritorio son flechas más espacio para derrape. El móvil es toque de dos zonas — toca y mantén la mitad izquierda o derecha del canvas para dirigir — con botones de overlay fijos para gas, freno y derrape. Ambas rutas estaban en la primera iteración; ninguna era un fallback.

Lo que hace que los controles móviles funcionen es que touchmove llama a preventDefault, el canvas tiene touch-action: none y los handlers están registrados como no-pasivos. Sin eso, hacer scroll dirige el coche o dirigir hace scroll de la página. Multi-touch importa — los jugadores presionan gas y derrape simultáneamente mientras mantienen una zona de dirección con otro pulgar. Un atajo de un solo toque se habría sentido roto desde la primera curva.

Lo Que Añadió la Sexta Iteración

Vapor Drift pasó por seis iteraciones. La quinta añadió un paquete de sonido con Web Audio — rugido del motor que cambia tono con la velocidad, whoosh de derrape, pitidos de cuenta atrás, campanada de récord personal. La sexta fue pulido: botones de HUD más grandes, cuadrícula de vapor detrás del overlay de pausa y un acumulador de delta de pausa apretado. Cada iteración puntúa contra una rúbrica; la sexta logró tres arreglos de medio punto, cruzó el umbral de envío y paró. Pulir más allá de la línea de envío arriesga regresiones, principalmente.

Lo Que Nos Sorprendió

Las carreras tienen un montón de lenguaje de diseño establecido — tiempos de vuelta, replays fantasma, tiempos objetivo, cadenas de desbloqueo. La IA no inventó nada de eso. Lo que hizo fue elegir el subconjunto correcto: descartar oponentes con IA porque son caros de renderizar y poco profundos para pelear; mantener el fantasma porque es un maestro más rico que un rival; usar barreras de tiempo en vez de compras con monedas; hacer el derrape un único coeficiente porque dos sería uno demasiado para balancear.

La profundidad vive en la pasada de ajuste. El coeficiente de derrape, la densidad de waypoints, los objetivos de desbloqueo, la tasa de muestreo del fantasma — ninguna es decisión interesante por sí sola. Mal ajustada, cualquiera hace el juego injugable. Bien ajustadas, desaparecen. Nadie jugando Vapor Drift nota la tasa de muestreo o el número de waypoints. Solo sienten la línea cerrándose, el fantasma quedándose atrás y la siguiente pista esperando en la pantalla de selección.

Juega Vapor Drift — el objetivo de Sunset Boulevard es el primero a batir. El fantasma está mirando.

Lectura relacionada: El Pipeline Nocturno de Juegos: Cómo Lanzamos Juegos Mientras Dormimos · ¿Qué Es el Vibe Coding? · Herramientas de Vibe Coding: De Chatbots a IDEs con IA · Cómo Creamos Path Runner