Tilt: Cómo Creamos el Juego de Pinball Programado con IA

Una sola mesa hecha a mano. Física 2D programada sin librería. Y el bug del flipper que tres rondas de revisión de código no pudieron detectar, porque la revisión de código no puede ver un flipper girando hacia el lado equivocado.

18 de abril, 2026 · Vibe Arcade

El pinball es una categoría extraña para intentar con IA. La mayoría de los géneros arcade se descomponen limpiamente en reglas y estados: snake tiene una cuadrícula y un vector de dirección; los rompedores de ladrillos tienen una pala y una bola con matemáticas de reflexión; los shooters espaciales tienen enemigos y proyectiles. El pinball tiene una sola bola y una mesa, y el juego entero es la sensación de la bola moviéndose por la mesa. No puedes hacer pruebas unitarias del feeling. Tienes que construirlo, jugarlo, y reconstruir las partes que se sienten mal.

Tilt es nuestro intento. Un único campo de juego de 600 por 900 hecho a mano, visuales pixelados retro con un overlay de líneas de escaneo CRT, física 2D programada sin librería, y la gramática clásica del pinball intacta: cinco bumpers, un banco de tres drop targets, dos slingshots, dos flippers, un canal de lanzador, un skill shot y multibola. El nombre viene de las viejas máquinas electromecánicas que parpadeaban TILT WARNING y bloqueaban los flippers si sacudías la cabina demasiado fuerte. Tilt también tiene eso.

Por Qué Una Sola Mesa Hecha a Mano

La primera tentación al crear un juego de pinball con IA es hacer la mesa procedural. Que el generador decida dónde van los bumpers, dónde se ubican los drop targets, cómo se angulan los slingshots. Suena elegante. No funciona.

El pinball es composición. Cada mesa real es un objeto autorizado donde el diseñador colocó cada bumper para alimentar la bola hacia un canal específico, anguló cada slingshot para mandar la bola de vuelta hacia los flippers en vez de al drenaje, y ajustó la entrada de la rampa para que un tiro limpio compense. La generación procedural optimiza para variedad, pero el diseño de pinball optimiza para flujo. Una mesa generada aleatoriamente casi con seguridad será peor que una mesa mediocre diseñada a mano, porque la geometría del pinball trata sobre relaciones intencionales entre objetos.

Así que escribimos las coordenadas a mano, desde el principio. Cinco bumpers en un diseño de diamante más par. Tres drop targets en fila cruzando el campo medio-superior. Dos slingshots ajustados sobre los flippers. El canal del lanzador a la derecha. Muros exteriores angulados que canalizan la bola hacia el espacio entre flippers. Cada elemento tenía una x, una y y un radio especificados en una tabla antes de escribir cualquier código. El código de física solo tenía que manejar bola-vs-círculo, bola-vs-segmento y bola-vs-rectángulo. El layout en sí era el documento de diseño.

Programando Física 2D a Mano Sin Librería

Tilt no usa librería de física. Ni Matter.js, ni Box2D, nada. La razón fue en parte tamaño (un solo archivo HTML, sin scripts externos) y en parte control (el feeling del pinball se trata de valores específicos de restitución, y las librerías abstraen eso). Todo el runtime de física son tal vez cien líneas de código.

Tres rutinas de colisión hacen todo el trabajo:

• Bola contra círculo. Para los bumpers. Calcula el vector del centro del bumper al centro de la bola, normalízalo, refleja la velocidad de la bola por esa normal, multiplica por un coeficiente de restitución, y empuja la bola fuera del radio del bumper para evitar que se pegue. Los bumpers usan una restitución mayor a 1, lo que significa que inyectan energía de vuelta a la bola en cada golpe. Por eso se sienten vivos.
• Bola contra segmento de línea. Para muros, flippers y bordes de slingshot. Proyecta el centro de la bola al punto más cercano del segmento. Si la distancia es menor al radio de la bola, refleja por la normal del segmento. Los muros usan una restitución de 0.6, que absorbe energía; los flippers añaden velocidad basada en su movimiento angular, que es cómo un flipper en swing levanta la bola hacia arriba.
• Bola contra rectángulo. Para los drop targets. Alineados con los ejes, chequeo simple de solapamiento, reflejo por la normal del borde más cercano. Cuando se golpea, el target se quita del conjunto de colisiones y se marca como caído.

La parte interesante era el flipper. Un flipper es un segmento de línea que rota alrededor de un pivote fijo. Cuando el flipper está girando hacia arriba, el punto de contacto de la bola en el segmento también se mueve, y su velocidad es velocidad angular por distancia al pivote. Añadir una fracción de esa velocidad de contacto de vuelta a la bola tras el reflejo es lo que produce el efecto de levantamiento. Equivócate y los flippers se sienten flojos, o lanzan la bola a la órbita. Ajustamos el multiplicador jugando hasta que se sintió bien.

Preservando la Gramática del Pinball

Hay un vocabulario que los jugadores de pinball esperan, y un juego que omite cualquier parte empieza a sentirse como con sabor a pinball en vez de pinball real. Tilt mantiene el conjunto completo:

El skill shot premia un golpe de bumper dentro de los dos segundos posteriores al lanzamiento. Esta es la mecánica clásica de "apunta tu lanzador" que tiene toda mesa real, donde los primeros momentos tras el lanzamiento son una oportunidad de alto riesgo y alta recompensa si sabes dónde apuntar. Añadimos una llamada flotante brillante cuando se activa para que los jugadores nuevos aprendan qué acaba de pasar.

El banco de drop targets son tres targets en fila. Cada uno otorga puntos al ser golpeado, y limpiar los tres da una gran bonificación ALL CLEAR con un arpegio de celebración. Los targets luego se reinician y el banco vuelve a estar activo. Esto es lo más cercano que tiene Tilt a una meta a medio juego más allá de la puntuación cruda: persigue el banco, límpialo, repite.

El multiplicador de combo escala al encadenar golpes de bumpers en una ventana corta. Tiene techo en 5x, y el tratamiento visual escala mientras subes: la sacudida de pantalla es mayor, el conteo de partículas más alto, el HUD del multiplicador crece y cambia de color desde magenta hacia dorado, y una barra de progreso muestra qué tan cerca estás del siguiente nivel. Encadenar se siente como encadenar, no como un número incrementándose silenciosamente.

Finalmente, la multibola se activa al alcanzar un umbral de puntuación. Aparecen dos bolas extra desde lo alto de la mesa y el valor en puntos de todo importa brevemente más. Cuando vuelves a una sola bola, suele haber una caída visible en la ganancia de puntos, y la meta se vuelve volver a la multibola. Esto es ritmo clásico de pinball: largos periodos de molienda puntuados por momentos cumbre.

La Estética CRT Sin la Complejidad CRT

El objetivo estético para Tilt era una mesa de pinball chunky de pixel-art vista a través de un viejo monitor CRT. La simulación completa de CRT significa pases de shader, persistencia de fósforo, patrones de máscara RGB, distorsión de barril. En un canvas de navegador que tiene que correr en una tableta, eso no va a pasar.

La versión simplificada es un pseudo-elemento de posición fija con un linear-gradient repetido de transparente-a-negro-a-transparente que produce líneas de escaneo horizontales por todo el viewport. Junto con formas pixel-precisas (bumpers chunky, marcador estilo dot-matrix, muros de líneas nítidas) y un fondo azul marino oscuro, se lee como CRT sin costar nada en la GPU. Los bumpers usan rellenos de color plano, sin gradientes en objetos animados, sin sombras paralelas. Barato de renderizar, consistente en cada dispositivo que probamos.

El Bug Que la Revisión de Código No Pudo Ver

La lección más útil de construir Tilt fue un límite del QA dirigido por IA. Nuestro pipeline de juegos nocturno tiene un pase de revisión de código que puntúa cada iteración en seis dimensiones: jugabilidad, calidad visual, factor de diversión, calidad de código, compatibilidad móvil e integración. Funciona bien para muchos juegos. No puede ver un flipper.

Durante tres iteraciones, el flipper derecho estaba visiblemente invertido en pantalla. En reposo, su punta apuntaba hacia arriba. Al activarse, giraba hacia abajo. Un jugador viendo el juego lo notaría de inmediato. El agente de QA, que revisa código y estructura sin renderizar el juego, puntuó la calidad visual en 9 de 10. La convención de signo en el ángulo de reposo de un flipper simplemente estaba mal, y nada en la revisión estática lo detectó.

Otros dos bugs de física se colaron igual. El canal del lanzador era un callejón sin salida sellado en las primeras iteraciones: el muro superior derecho se extendía continuamente desde la esquina hasta los flippers, así que cualquier bola lanzada rebotaba en el muro y caía justo de vuelta al canal. No podía entrar al campo de juego. Y la velocidad de lanzamiento del lanzador estaba ajustada por debajo de lo necesario para superar la nueva capucha diagonal que añadimos para arreglar el callejón sin salida, así que las bolas que sí salían eran demasiado lentas para alcanzar los bumpers superiores.

Los tres problemas son del tipo que toma treinta segundos detectar con un playtest real. Son casi imposibles de detectar leyendo código, porque el código se ve sintácticamente bien y la pregunta de convención de signo depende de qué consideres "arriba" en coordenadas de canvas (donde y crece hacia abajo). La solución no fue mejor revisión de código. La solución fue añadir un paso de playtest que realmente lanza una bola y traza su camino. La lección que nos llevamos: los juegos de física necesitan ojos humanos en la salida, no solo ojos de IA en la fuente.

Pulido Sobre una Base que Funciona

Una vez que la física estuvo bien, dedicamos una iteración solo a capas de feeling. La mayoría es invisible individualmente, pero colectivamente es la diferencia entre un juego de pinball jugable y uno que la gente rejuega.

La estela de la bola es un fantasma de cinco fotogramas de posiciones previas, con el color interpolando de cian frío a baja velocidad a magenta caliente a alta velocidad. Sientes a la bola acumulando energía mientras cae desde lo alto de la mesa. La sacudida de pantalla en golpes de bumper escala con el multiplicador de combo actual, desde un suave tirón de 3 píxeles a 1x hasta un golpe propio a 5x. La vibración háptica en móvil dispara en cada evento significativo: toque de flipper, golpe de bumper, skill shot, drop target, drenaje, slingshot. Cada uno tiene su propio patrón de vibración para que tu palma pueda distinguirlos. La pausa al perder foco significa que puedes contestar un mensaje sin perder una bola.

Nada de esto es específico del desarrollo asistido por IA. Es el último 20% de pulido que separa los juegos lanzados de las pruebas de concepto, y es la etapa donde la iteración apretada importa más. La IA manejó el boilerplate de sistemas de partículas, escalado de HUD y guard clauses de la API de vibración lo suficientemente rápido como para que pudiéramos dedicar el tiempo a las decisiones de gusto: ¿se siente bien?, ¿se siente mal?, prueba otro valor.

Lo Que el Pinball Nos Enseñó

Tilt es probablemente el juego de la colección Vibe Arcade donde la IA tuvo menos latitud de diseño. Un juego de snake puede absorber diez skins desbloqueables y un árbol de misiones sin romperse. Un juego de pinball no puede absorber características arbitrarias. Cada objeto en la mesa o hace que la bola haga lo correcto o rompe el flujo. El diseño fue una tabla de coordenadas autorizada a mano, y el trabajo de la IA fue implementar la física correctamente y luego pulir el feeling.

Esa división del trabajo terminó funcionando bien. Las partes donde la asistencia de IA nos aceleró más fueron las rutinas boilerplate de física, el layout del HUD, la síntesis de sonido y el manejo de toque móvil. Las partes que aún requirieron juicio humano fueron el layout de la mesa, las constantes de física y atrapar los bugs de playtest que la revisión estática no pudo ver. El pinball es un recordatorio de que no todo juego debe ser diseñado por quien lo implementa. A veces el encargo correcto es un spec muy específico, y el trabajo interesante es hacer real ese spec.

Juega Tilt y ve si puedes activar el skill shot en tu primer lanzamiento.

Lectura relacionada: Cómo Creamos Neon Snake Con IA · ¿Qué Es el Vibe Coding? · Herramientas de Vibe Coding: De Chatbots a IDEs con IA