AirShifumi: una experiencia de I + D

A medida que la pandemia continúa, todo el mundo se ve afectado por el distanciamiento social y para acortar la distancia entre las personas, la agencia Hands digitaliza el famoso Shifumi (o piedra-papel-tijera) que permite a cualquier persona de todo el mundo compartir un momento eterno con su “vecino” digital. Esta experiencia digital única se basa en la inteligencia artificial y el reconocimiento de gestos a partir de la cámara web del usuario. 

Distancia física y proximidad digital

Ha sido un año duro que ha traído muchos cambios profundos en la forma en que nos relacionamos como sociedad. Llevamos más de un año separados sin que se vea el final. Con el tiempo, este aislamiento físico ha creado nuevos usos online para intentar volver a sentirnos cerca.

Organizamos alternativas digitales para nuestras actividades sociales y encontramos nuevas formas de crear dinámicas de grupo: desde Houseparty después de las horas de trabajo hasta clubes de baile digitales. Lo digital ha sido un salvavidas para volver a unir a la gente y reparar la proximidad perdida.

AirShifumi es la respuesta a este vacío. Dado que las reuniones con Zoom han sustituido a las copas con los amigos, Hands ha querido ofrecer un espacio para volver a sentirse cerca y ha proporcionado un motivo para perderse juntos en un universo onírico y explorar nuevas formas de interactuar: a través de una pantalla, pero más cerca que nunca.

Trascender nuestra relación con los juegos

Últimamente, las marcas juegan más que nunca con el universo de los juegos: algunas como forma de explorar nuevos códigos y tal vez atraer a nuevas comunidades, otras como una declaración audaz para empujar los límites de la percepción de la marca, desafiando sus propios territorios de marca. En Twitch, Discord, Animal Crossing y plataformas propias, las marcas de lujo están haciendo su agosto con experiencias interactivas y reinterpretaciones de los juegos clásicos para un público siempre más amplio que no conoce límites de edad ni de género. Con AirShifumi, Hands ha creado un universo inmersivo en torno a los gestos que más nos unen. Lejos de la estética 8bit de otros, Hands ha llevado el principio del juego a sus raíces: ¿Cómo sumergir a los jugadores en una realidad diferente, durante minutos u horas? ¿Qué historias van a vivir? Como respuesta, AirShifumi ofrece una experiencia lúdica y meditativa.

Identidad visual fuera de este mundo

AirShifumi, un juego de carácter cósmico y onírico, nos permite interactuar juntos pero a distancia con personas de todo el mundo. El aire es lo que nos ayuda a materializar el espacio, así que este revisitado “piedra-papel-tijera” se desarrolla desde la tierra hasta el cosmos a través de la Vía Láctea. Un campo léxico aéreo para una experiencia llena de emoción y ligereza.

A través de colores suaves salpicados de toques saturados, el usuario se sumerge en el corazón de un universo surrealista y futurista.

Para las ilustraciones, Hands se asoció con Myriam Wares

paleta de colores

Colores surrealistas y efectos de tierra

Hands quería un juego de escalas surrealista y fantástico entre los elementos y eligió una paleta de colores suave y poética. Se añadieron texturas y granos para tender un puente entre el mundo tangible y el intangible. Por último, se integraron sonidos y música para acentuar las emociones. Hands se asoció con Press Play On Tape para el diseño del sonido. 

Experiencia ligera como el aire

Hands eligió utilizar los siguientes tipos de letra: MadeMirage y Geomanist: tipos de letra con gracias finas para destacar un mundo en el que la gravedad ya no es una limitación. La tipografía se animó jugando con la altura y el fundido. Con elementos de interfaz de usuario finos y texturizados y elementos de ilustración anclados (rocas, nubes, aviones), la sensación general es de ligereza y densidad unidas.

Una mirada al futuro

En Hands decidieron tener una subida permanente que indica el paso del tiempo y un avance hacia el futuro. Los códigos visuales se inspiran en el mundo del espacio y el retrofuturismo (planetas, asteroides, cielo, universo, etc.).

Tecnología de punta para la emoción humana

Hace tiempo que hemos superado el punto de rebeldía hacia las máquinas, y por fin abrazamos la emoción que pueden proporcionar. El Rijksmuseum lo ha demostrado una y otra vez al apropiarse de la mejor tecnología para jugar con sus obras de arte. La inteligencia artificial tiene la legitimidad de la interacción real. Aprendiendo sobre la marcha, AirShifumi se adaptó a sus oponentes y proporcionó la emoción de un encuentro cercano con desconocidos.

AirShifumi se adaptó a sus oponentes y proporcionó la emoción de un encuentro cercano con extraños.

Este proyecto de I+D que pretendía poner a prueba nuevas formas de interactuar con los demás en tiempos de distanciamiento acabó siendo el proyecto que más les importaba, y su mejor logro más reciente, ya que lo pusieron en el mundo para que todo el mundo jugara con él.

Frameworks y Bibliotecas Frontend:

Vue.js es un marco de trabajo JavaScript progresivo y de adopción gradual para la construcción de UI en la web.

Para el 3D, todo el modelado, texturizado y rigging se ha realizado en Cinema 4D

También se ha utilizado Substance Painted para elementos específicos como las manos.

Tecnologías de backend:

El seguimiento de la posición de la mano del usuario y la firma fue bastante complicado. Hans terminaron usando Tensor Flow, particularmente en su versión javascript. Todo el análisis y entrenamiento de Machine Learning se realiza directamente en el lado del cliente.

TensorFlow, a pesar de lo rápido que es, ha sido el verdadero cuello de botella del rendimiento del resto de la experiencia, ocupando casi el 90% del presupuesto de framerate cuando se activa, por lo que el pipeline de renderizado de WebGL tiene que ser impecable.

Tensor Flow, utilizado particularmente en su versión javascript
Tensor Flow, utilizado particularmente en su versión javascript

Arquitectura del servidor:

Para permitir las partidas multijugador, Hands potenció la experiencia con WebSocket.

Todo el renderizado de WebGL se ha realizado de forma nativa para aumentar el rendimiento. La simplicidad y ligereza fue el objetivo del diseño del código. Un animador específico y un sombreador/procesador de malla rigged han sido escritos desde cero para poder ajustar absolutamente todo.

El sombreado es principalmente no iluminado, la mayor parte del tiempo simplemente plano con una textura atlas. Sin embargo, hay algunos shaders personalizados para las partes más complicadas, como el reflejo de la cara trasera en la plataforma, o el halo de la mano.

Herramientas

Desarrollo

  • UI: VueJS: framework JavaScript de código abierto utilizado para crear interfaces de usuario y aplicaciones web de una sola página
  • Renderización 3D: WebGL – especificación de interfaz de programación 3D dinámica para páginas y aplicaciones HTML5
  • Protocolo: Websocket – estándar web para un protocolo de red de la capa de aplicación y una interfaz de programación de la World Wide Web para crear canales de comunicación full-duplex a través de una conexión TCP para navegadores web
  • Inteligencia artificial (aprendizaje profundo): Tensorflow – herramienta de aprendizaje automático de código abierto desarrollada por Google

Diseño

  • Modelado 3D: Cinema4D – software de diseño en 3D
  • Texturas: Substance Painter – software de pintura 3D
  • Ilustración: se asociaron con Myriam Wares
  • Diseño de sonido: se asociaron con Press Play On Tape

Una buena experiencia puede atraer a una multitud

La acogida fue tan buena como esperaban (+60K visitantes en menos de 2 semanas gracias al boca a boca), y no conoció fronteras (visitas localizadas en 150 países diferentes). Sobre todo, les enseñó a seguir sobrepasando los límites: siempre buscar más.

Con un tiempo medio de permanencia de 2,5 minutos y una tasa de rebote del 36%, AIRSHIFUMI es un caso perfecto de interacción, que ha generado 10K visitas a la web de la agencia. La experiencia ha recibido numerosos premios, entre ellos el SOTD Awwwards, y FWA y cssdesignawards la nombraron sitio del mes de enero de 2021.

Quiénes son:

Hands es una agencia creativa que promueve el saber hacer y el patrimonio en la era digital. Ofrecen conocimientos técnicos y creativos basados en un enfoque innovador de los proyectos. Integran todas las actividades de producción tecnológica y de producción audiovisual necesarias para dar forma a sus proyectos.