Cómo se hizo "The love machine"

Sabemos que mucha gente está interesada en saber  quién es su alma gemela en Neozink, por lo que cuando se acercaba San Valentín, estuvimos pensando de qué manera podríamos ayudarles. El principal problema es que "solo" somos 40 personas, por lo que la gente también tendría que currárselo.

Surgió la idea de hacer un juego con aire arcade que, en base a unas preguntas cuidadosamente estudiadas, calculase con un súper algoritmo diseñado para la ocasión quién es tu amor en Neozink. Una vez que el algoritmo termina, existe la posibilidad de enviar un mensaje de amor a tu alma gemela y ya solo queda esperar a que Cupido haga su magia.

Después de un gran trabajo del departamento de diseño, nos tocaba a nosotros, el departamento de desarrollo, darle vida al juego y acabar de pulir ese aire retro que nos venía ya dado.

Animando que es gerundio

Teníamos claro que las animaciones tenían que evocar el aire retro de las tragaperras de los 80. Por esta razón nos centramos en trabajar las animaciones para que fueran lo más "bruscas" posibles, huyendo de los efectos suaves que tanto se llevan hoy en día.

Vamos a poner como ejemplo los corazones amarillos de la parte superior e inferior del juego, que cambian de posición hacia arriba y hacia abajo de manera continua.

Para hacer ese efecto de movimiento continuo utilizamos animaciones de CSS y una imagen, llamada “sprite”, que iremos cambiando de posición para que unas veces esté colocada arriba y otras abajo.

Otro ejemplo lo tenemos con los corazones que salen encima de la persona que The Love Machine ha elegido para que sea el amor de tu vida.

En este caso, tenemos 4 posiciones, por lo que tenemos que establecer las reglas en el 0%, 25%, 50%, 75% y 100%.

El problema que tenemos aquí, si sólo establecemos esas posiciones, es que de una posición a otra, el sprite se irá moviendo y no hará el efecto de animación brusca. Para “falsear” este efecto tendremos que hacer lo siguiente (para el primer ejemplo):

• 0%: background-position: top 2px center;
• 49.99%: background-position: top 2px center; (repetimos la anterior)
• 50%: background-position: top -34px center;
• 99.99%: background-position: top -34px center; (repetimos la anterior)
• 100%: background-position: top 2px center; (volvemos a la posición inicial)

Si no establecemos las reglas 49.99% y 99.99% obtendríamos este efecto no deseado.

Jugando con animaciones

Este tipo de animación es muy sencilla pero nos puede servir para darnos cuenta de la potencia que tienen las animaciones de CSS3. En este post de CSS Tricks se explica muy bien para qué sirve cada una de las reglas relacionadas con las animaciones. Además, las animaciones de CSS3 consumen muchos menos recursos de los dispositivos que las animaciones realizadas por Javascript así que es mucho más recomendable utilizarlas, porque no todo el mundo tiene el último iPhone X o Galaxy S9.

Se pueden aplicar animaciones de CSS a casi todo, así que recomiendo entrar en codepen.io, crear un nuevo proyecto y jugar con todas las posibilidades que nos ofrece CSS3.

Si aún no conoces a tu alma gemela en Neozink, entra ya en The Love Machine y puede que encuentres al amor de tu vida.