Tirachinas: un juego 3D con física real en el navegador en el que cada nivel está probado antes de que nadie lo juegue

Tensa, apunta, suelta: derriba seis objetivos en una habitación donde todo cae de verdad.

Un juego de navegador para ordenador y móvil, en español, inglés y ruso, sin instalar nada ni registrarse.

Cómo se juega

• Tira de la bola hacia atrás y suéltala. La tensión marca la fuerza y afina la puntería, y una línea de puntos enseña por dónde volará la bola y dónde rebotará primero.
• Gira los 360°: estás en medio de un salón, una cocina, una habitación infantil, un despacho o un dormitorio, con puertas abiertas a otras habitaciones cuyos objetos también pueden ser objetivos.
• Derriba las seis cosas que señalan las flechas amarillas. Algunas van subidas en robots aspiradores que recorren el suelo, y en la mayoría de los niveles una o dos están detrás de una mampara de cristal que ningún tiro directo atraviesa: hay que hacer rebotar la bola en una pared, o en dos.
• Todo lo demás también reacciona: tazas y jarrones se rompen, los cristales de las ventanas saltan, la pantalla de la tele se agrieta, un golpe fuerte arranca la lámpara del techo, las puertas se cierran de golpe, la nevera se abre, el grifo echa agua, las tostadas saltan de la tostadora y el interruptor apaga la luz de verdad.
• Los seis objetivos en seis tiros dan tres estrellas. Con las monedas se compran bolas y estelas nuevas en la tienda, y el regalo diario crece con cada día seguido.

Tirachinas es un producto nuestro: el tipo de ingeniería que vendemos, en algo que cualquiera entiende en un segundo.

Física real en una habitación real

Un juego así depende de una cosa: que todo caiga como espera el ojo. Por eso aquí no se finge nada: cada libro, taza, juguete y silla es un cuerpo en un motor de física real (Rapier, compilado a WebAssembly) que calcula el mundo 60 veces por segundo. La bola usa detección continua de colisiones, así que ni a plena potencia atraviesa una balda fina. La cerámica y el cristal se rompen en fragmentos reales, cada uno con su propia física, y una taza que cae de la mesa se rompe contra el suelo pero sobrevive si aterriza en la alfombra.

En el código están separados el aspecto de un objeto y la forma en que choca. Gracias a eso cambiamos por completo la imagen del juego, de un boceto a lápiz a habitaciones de juguete brillantes, con sombras suaves y modo noche, sin tocar un solo nivel: tras el rediseño, los disparos de prueba de los 100 niveles (más abajo) salieron idénticos byte a byte.

Niveles generados y amueblados a mano

Un nivel son datos, no una escena dibujada a mano: el tamaño de la habitación, sus ventanas y puertas, los muebles y dónde están, y los seis objetivos. Un generador construye habitaciones a partir de una semilla y un tema, con lo que necesita cada tipo de estancia (sofá o tele, muebles de cocina, cama, escritorio), y deja libre el suelo alrededor del jugador para que nada tape la vista.

Las habitaciones generadas fueron solo el punto de partida. Después repasamos los niveles y los amueblamos como lo haría una persona: muebles contra las paredes donde corresponde, estanterías y cuadros en las paredes vacías, un radiador bajo cada ventana y en ningún otro sitio. Los cuadros de las paredes son dibujos de niños. Una revisión de la distribución detecta lo que se le escapa al ojo: un mueble que sobresale de la pared, que tapa una ventana, que está en el recorrido de una puerta o medio encima de la alfombra. Un nivel se puede bloquear, y a partir de ahí el generador nunca lo vuelve a escribir.

Cada nivel, demostrado con un disparo simulado

Lo peor que puede hacer un puzle es pedir algo imposible. Por eso ningún nivel sale a ciegas. El mismo código que monta la habitación en el navegador funciona también en Node, fuera del navegador, con la misma física, y comprueba cada nivel:

• la habitación aguanta quieta 2,5 segundos de simulación, y lo que se desliza o se vuelca solo se retira;
• cada objetivo se ve desde la posición del jugador;
• cada objetivo cae de verdad con un disparo simulado en una copia del mundo;
• un objetivo detrás del cristal queda fuera del alcance de cualquier tiro directo y cae con un rebote: la comprobación refleja el objetivo en las paredes y los laterales de muebles cercanos, recorre la puntería grado a grado y luego lanza los mejores tiros de verdad.

Los cambios a mano pasan la misma comprobación, así que mover una estantería no puede dejar un objetivo inalcanzable sin que nadie se entere. La app nativa juega los mismos niveles con otro motor de física, y donde no logró derribar un objetivo, lo cambiamos también en los niveles web, hasta que ambas versiones superaron los 100.

Ligero para el navegador de un móvil

Un juego de navegador tiene unos segundos para arrancar antes de que el jugador se vaya. El WebAssembly del motor de física iba incrustado en el script como texto; ahora se descarga como archivo propio y se compila mientras llega, de modo que el script que el navegador debe procesar antes de arrancar pasó de unos 1,4 MB a 277 KB comprimidos. La primera habitación solo necesita los modelos que muestra, unos 1,15 MB en total, y el resto se carga detrás.

Los muebles fijos de cada habitación se dibujan fusionados en unas pocas mallas, lo que bajó las llamadas de dibujo en una habitación del nivel 50 de 1.120 a 619. En un ordenador que emula un móvil con un procesador seis veces más lento, el nivel 100 pasó de unos 49 fotogramas por segundo a 60 estables. Además, el juego se adapta solo: mide sus propios tiempos de fotograma y, en un dispositivo que no llega, baja por pasos la resolución y las sombras. La versión web aún no la hemos medido en móviles reales.

Un juego terminado, listo para portales y tiendas

Alrededor del núcleo está todo lo que hace falta para que el juego se juegue y no solo se enseñe: una mano que enseña sin palabras a tensar y a mirar alrededor, estrellas, la lista de niveles, monedas, una tienda con 12 bolas y 6 estelas, un regalo diario, música y sonidos, y temas de día y de noche. Un interruptor de compilación añade el SDK del portal de juegos Poki, con pausas publicitarias en los cortes naturales y un anuncio opcional para duplicar las monedas, según las reglas del portal.

La versión nativa para Android en Unity está hecha y juega los mismos 100 niveles desde los mismos archivos. En un Samsung Galaxy S23 los niveles que medimos mantienen 60 fotogramas por segundo, el más pesado 54–55, y la ficha de la tienda, los gráficos y los formularios de datos están preparados.

Qué significa esto para tu proyecto

• Hacemos 3D interactivo para el navegador: configuradores de producto, planificadores de espacios y showrooms donde los objetos se comportan como los reales, hechos y probados para cargar rápido y funcionar en dispositivos normales.
• Cuando un sistema genera mucho contenido, como distribuciones, presupuestos, horarios o niveles, construimos la comprobación automática que demuestra que cada pieza funciona antes de que la vea un cliente, y así el contenido es fiable a gran escala.
• Un mismo producto puede ser web y nativo: comparte datos y reglas entre el navegador y el móvil, de modo que un cambio hecho una vez llega a las dos versiones y se comprueba en las dos.

Estado

Tirachinas está terminado y se puede jugar, pero aún no es público: la versión web no está publicada en ninguna web ni portal, y la app para Android está preparada para la tienda pero sin lanzar.

Tecnologías

- Cliente: TypeScript + Vite, Three.js (WebGL), sombras suaves, iluminación de día y de noche
- Física: Rapier (Rust compilado a WebAssembly), paso fijo de 60 Hz, objetos que se rompen
- Niveles: generador por semilla y tema de habitación, luego amueblado a mano; un archivo de datos por nivel
- Comprobación de niveles: el mismo código de habitación y física en Node, disparos y rebotes simulados
- Rendimiento: mallas fijas fusionadas, calidad adaptativa según los tiempos de fotograma medidos
- Metajuego: monedas, tienda, regalo diario, progreso en almacenamiento local
- Versión para portales: SDK de Poki tras un interruptor de compilación
- App nativa: Unity 6, C#, PhysX, los mismos archivos de niveles
- Idiomas: español, inglés, ruso

Resultado

Un juego 3D con física que se abre en el navegador, donde una estantería de libros se derrumba como esperas, y donde cada uno de los 100 niveles ya lo ha ganado un ordenador antes de que lo vea ningún jugador.