Cómo hacemos los juegos de JuegaMix: Phaser 3, Three.js y niveles verificados por código

Por qué contamos esto

JuegaMix tiene hoy 87 juegos originales. Es fácil escribir "originales" en una página de presentación; es más útil enseñar qué hay detrás. Todos los juegos viven en el mismo repositorio que el portal, comparten piezas y pasan por las mismas comprobaciones antes de publicarse. Cuando decimos que un nivel se puede resolver, no es una promesa: hay un programa que lo ha comprobado.

Este artículo abre el blog explicando cómo trabajamos: qué motores usamos, cómo probamos la lógica sin abrir un navegador, cómo verificamos los puzles de física, de dónde salen el sonido y el arte, y qué detalles hacen que un juego "se sienta" bien. Preferimos que juzgues el método, no el eslogan.

Dos motores, una misma base

Los juegos en dos dimensiones, como Gota Viajera, Horde Survivor o Worm Arena, están hechos con Phaser 3. Los 13 en tres dimensiones, entre ellos Glide 3D, Tiny Planet y Kart Rush 3D, usan Three.js sobre WebGL. Son dos formas muy distintas de programar, pero el portal no lo nota.

Eso es posible porque cada juego expone el mismo contrato: una función mount(container, sdk) que recibe el elemento de la página donde debe dibujarse y un objeto que llamamos SDK del juego. Con ese contrato, el portal puede pausar, reanudar, silenciar o reiniciar cualquier título sin saber con qué motor está hecho.

El SDK es el único canal entre el juego y el portal. Por él pasan las monedas que ganas al terminar una partida, el progreso de las misiones diarias, los logros, tu mejor puntuación y los ajustes de sonido y vibración. Todo se guarda en tu dispositivo y se valida al leerlo: un perfil corrupto vuelve a los valores por defecto en lugar de romper la página.

La lógica se prueba sin dibujar nada

Cada juego separa lo que se ve de lo que se calcula. La parte que se calcula vive en un archivo logic.ts sin ninguna referencia al motor gráfico: funciones puras que reciben datos y devuelven datos. Eso permite probar las reglas del juego en un proceso normal de Node, sin lienzo ni ventana, en milisegundos.

Hoy el repositorio ejecuta unas 860 pruebas automáticas. Cubren el perfil del jugador, la economía de monedas, las misiones, la persistencia con datos corruptos, la comunicación del SDK y la lógica de cada juego. Se ejecutan en integración continua con cada cambio, junto con la comprobación de tipos; si una falla, el cambio no se da por bueno.

Un ejemplo concreto es Worm Arena. En pantalla hay decenas de gusanos con cientos de segmentos, y comparar cada cabeza con cada segmento en cada fotograma sería lentísimo en un móvil. La lógica usa un "hash espacial": una rejilla donde cada segmento se apunta según su celda, y al preguntar qué hay cerca de una cabeza solo se miran las celdas vecinas. Las pruebas comprueban que la rejilla devuelve lo que rodea a un punto y nada cuando está vacía.

Niveles que se verifican solos

Gota Viajera es un puzle de física: una gota cuelga de cuerdas y tienes que cortarlas en el orden y el momento adecuados para que llegue a la planta pasando por las hojas. Los puzles de física diseñados a mano tienen un problema conocido: es facilísimo dejarlos imposibles sin querer. Mueves un anclaje dos píxeles y de pronto la gota rebota fuera de la pantalla.

Por eso cada nivel declara, junto a sus cuerdas y hojas, su propia solución: una lista de cortes con el identificador de la cuerda y el segundo exacto en el que hay que cortarla. Y por eso existe solveLevel, un simulador sin gráficos que usa el mismo motor de físicas del juego, coloca la gota, las cuerdas y el suelo, reproduce esos cortes en el instante indicado y avanza la simulación paso a paso.

Si al final la gota no ha llegado a la planta, la prueba de ese nivel falla y la versión no se despliega. Además cuenta cuántas hojas recoge esa solución, y cada hoja vale una estrella.

Sonido y arte propios

La mayoría de los juegos no descarga ni un solo archivo de audio. Los efectos (clic, moneda, acierto, error, pop) se sintetizan en el momento con la Web Audio API del navegador: un oscilador, una envolvente y poco más. El sonido está listo en cuanto tocas la pantalla y no depende de que se cargue nada.

Los juegos más recientes van un paso más allá. Gota Viajera carga un atlas de sprites (una sola imagen con todos los dibujos, más un índice que dice dónde está cada uno), un puñado de efectos grabados cortos y un bucle de música para el capítulo. Aun así, nos hemos puesto un presupuesto de 3 MB como máximo por juego, y ese en concreto ocupa menos de 1 MB. Muchas partidas se juegan en móvil con conexiones irregulares, y un juego que tarda en cargar es un juego que nadie llega a probar.

Game feel: los detalles que se sienten

La diferencia entre un juego que funciona y uno que se siente bien suele estar en detalles de milisegundos. Para no reinventarlos en cada título, mantenemos un paquete compartido de "juice" con tres herramientas.

La primera es la sacudida de pantalla basada en trauma: cada impacto suma trauma, la fuerza de la sacudida es el cuadrado de ese valor y decae de forma lineal, así que los golpes pequeños apenas se notan y los grandes sí. La segunda es el "hit-stop": congelar el tiempo del juego unas centésimas de segundo en un impacto fuerte. La tercera son los patrones de vibración para móviles, con tres intensidades y patrones distintos para éxito y error.

La sacudida y la vibración respetan la preferencia de movimiento reducido del sistema: si la tienes activada, la sacudida devuelve cero y la vibración no se dispara, y el juego sigue siendo jugable. También puedes apagar la vibración en los ajustes del portal; ese valor llega al juego a través del SDK.

Qué viene ahora

Estamos en medio de un programa de diez juegos nuevos, construidos de uno en uno y con más profundidad que los arcades cortos con los que empezamos. El primero, el puzle de física de arriba, ya está publicado. El siguiente es un juego de plataformas de precisión en dos dimensiones, con dash, salto de pared, niveles cortos y cronómetro.

Este blog irá documentando cada uno: qué decisiones tomamos, qué salió mal y qué aprendimos. Si quieres ver el resultado de todo lo anterior, prueba Gota Viajera. Quiénes somos y qué principios seguimos está en Acerca de nosotros.