¿Cómo suena la tipografía?

¡Puedes probar la pantalla de inicio interactiva de HALMA directamente aquí en la imagen!

Luces, cámara, acción: Gran cine en la pantalla

La base de la pantalla de inicio de HALMA es un elemento HTML canvas en el que se proyecta la animación. Para lograr el efecto deseado, decidimos utilizar el motor de física Matter.js.

Ejemplo de motor de físicas

En el primer paso, se animará el subrayado del texto. Para ello, se crearon bolas individuales con Matter.js, que se mantienen en su lugar mediante varios «muelles». Una función que coloca automáticamente estos cuerpos a intervalos regulares entre dos coordenadas garantiza el posicionamiento correcto a lo largo de las líneas descendentes del texto, donde más tarde se ubicará un subrayado.

Que la fuerza te acompañe, a ti y a tu puntero del ratón

Con una especie de «campo de fuerza» que rodea la posición del puntero del ratón, los cuerpos ahora pueden ponerse en vibración. Como están conectados entre sí, comienzan a oscilar. Así se crea el deseado efecto de «bamboleo». Para que esto no conduzca a un comportamiento caótico, limitamos la distancia máxima al punto de origen con un simple cálculo vectorial.

Ajuste, o también: «chapuza»

Mediante la interacción de diferentes parámetros como la masa, la gravedad, la fuerza de tracción y la amortiguación, podemos influir y afinar la simulación de forma específica.

Aquí ves la primera composición de los distintos puntos vectoriales.

En pantalla: ahora se renderiza

Las animaciones así calculadas aún no son visibles; hasta ahora solo existen virtualmente en forma de coordenadas y vectores. Para que todo esto se manifieste concretamente en la pantalla en una bonita animación, el siguiente paso es renderizar píxeles concretos a partir de ellos. Para ello, no utilizamos el renderizador integrado en Matter.js, sino la biblioteca P5.js, ya que permite dibujar splines.

Con las coordenadas de los cuerpos individuales, se puede mostrar una línea en el elemento Canvas, que, sin más cálculos, sería muy angulosa al principio. Los primeros intentos de suavizar los bordes con curvas de Bézier mostraron que las curvas de Bézier son más adecuadas para pocos puntos de anclaje. Necesitan la posición de las tres coordenadas siguientes, lo que hace que los cálculos sean muy complejos y lentos.

Para generar una curva, utilizamos en su lugar la fórmula del spline cúbico de Hermite, que es más fácil de aplicar a los puntos vectoriales individuales de la línea. Dado que esto debe recalcularse con cada fotograma y debe ejecutarse en cada dispositivo con una velocidad de fotogramas de al menos 30 FPS, es muy importante que esta función siga siendo lo más eficiente posible. Hacemos que el motor de física se ejecute en su propio bucle de animación, por lo que somos independientes de la velocidad de fotogramas y podemos evitar comportamientos dudosos de la simulación.

El contenido generado dinámicamente por Javascript ahora debe escalarse según el tamaño y la resolución de la pantalla, colocarse correctamente en el Canvas y recalcularse cada vez que se cambia el tamaño de la ventana del navegador.

Aplicación terminada en el frontend

Ningún sonido es de buen gusto

Por último, tan pronto como el campo de fuerza del ratón colisiona con uno de los cuerpos, «solo» hay que reproducir un sonido. Dado que los elementos <audio> convencionales primero almacenan en búfer antes de que se reproduzca el sonido, se necesitaba una solución diferente. Para que todo funcione en todos los navegadores, todos los sonidos se reproducen silenciosamente una vez al cargar la página, logrando así una precarga efectiva. De esta manera, la carga y el almacenamiento en búfer de los archivos de sonido se adelantan.

Ahora, como es bien sabido, es una buena práctica no reproducir sonido sin el deseo explícito del usuario. En algunos navegadores y en casi todos los dispositivos móviles, esto también se aplica y el sonido solo se puede reproducir después de una interacción del usuario. Por lo tanto, agregamos un botón con el que se puede seleccionar o deseleccionar la salida de sonido.

Un molesto error: quien no quiere «molestar» tiene que sentir

La pantalla de inicio estaba finalmente lista, y comenzamos la fase de pruebas. Rápidamente se hizo evidente que la implementación visual funcionaba como se deseaba en casi todos los dispositivos. Sin embargo, se acumularon informes de algunos probadores que no podían escuchar ningún sonido en sus dispositivos iOS. ¡Qué revés, si el sonido era una parte fundamental de toda la idea! Siguieron semanas de rompecabezas y depuración: el problema no se podía reproducir ni delimitar, parecía ocurrir de forma completamente aleatoria. La única similitud era que ocurría en dispositivos iOS, pero ni la versión de iOS, ni la de Safari, ni el dispositivo en sí, parecían influir.

Se escribieron numerosas líneas de código frustradas. En busca de respuestas o al menos pequeñas pistas sobre cómo se podría reproducir el error, se revisaron documentaciones y se buscaron en foros de Internet. Todos los HALMAs y, finalmente, incluso sus círculos familiares y de conocidos fueron reclutados como probadores, y se realizaron extensas series de pruebas. Todo sin éxito. Casi habíamos descartado toda la idea. Pero entonces, más bien por casualidad, pudimos identificar el error: siguiendo el lema «No es un error, es una característica», la reproducción de sonidos dinámicos en iOS no se realiza a través del canal multimedia como en otros dispositivos, ¡sino a través del canal de tonos de llamada! Esto significa que no se puede reproducir ningún sonido mientras el teléfono esté silenciado o «no molestar» esté activo. Por lo tanto, ahora para todos los usuarios de iPhone y iPad: ¡Desactiva «no molestar» y activa el sonido!

La pantalla de inicio lista en un iPad con el aviso correspondiente de desactivar el silencio en los ajustes del dispositivo