Juegos AR: caza y destruye todos los elementos en tiempo límite

Resumen de la experiencia 📖

En esta experiencia se propone una dinámica de juego de entretenimiento, que puede ir asociada a diferentes tipos de eventos, festivales, o acciones publicitarias o de marketing de cualquier marca. El usuario, una vez encuentra un punto de juego, tiene una misión: destruir el mayor número de elementos en un tiempo límite. Se trata de ofrecer una misión básica a la par que entretenida a usuarios que se encuentren en un entorno determinado: festival de música, campaña de marketing en una ciudad, dinámica en un centro comercial, etc. 

Este tipo de experiencias utilizan un modo de RA bastante sencillo, que es colocar elementos alrededor del usuario, utilizando sensores como el giroscopio para posicionar los elementos en su entorno inmediato, realizando movimientos de rotación o movimiento, dificultando así que se encuentre el contenido a cazar. 

En este ejemplo el usuario tiene un tiempo límite, que pueden ser unos 15 segundos aproximadamente, para cazar el total de logos. Por cada logo se le darán puntos, y si consigue cazarlos todos tendrá una puntuación extra.

Usos y beneficios 🌱

Experiencias de gamificación y entretenimiento hacen de la Web AR una herramienta muy potente para dinámicas y campañas de publicidad, marketing, y también para diferentes actividades como festivales de música, exhibiciones, aperturas de nuevos establecimientos, búsquedas del tesoro o gincanas en centros comerciales, y un largo etcétera. 

Este tipo de experiencias además se pueden conectar fácilmente con un sistema más complejo que cuente con elementos como:

• Sistema de registro de nuevos usuarios: captación de clientes. 
• Sistema de puntuación: engagement, retención, fidelización.
• Acceso a premios y otro tipo de beneficios: imagen de marca, relación con el cliente, sistemas de recompensas.

Características y consejos💡

En este caso se ha realizado una dinámica en Onirix utilizando los elementos de customización más complejos de la herramienta además del editor de escenas de Onirix Studio: Online code editor y Embed SDK para web AR. Con estos componentes se puede ir a un nivel mayor de complejidad, accediendo así al componente de programación web desarrollado por Onirix con su SDK para JavaScript. También nos apoyamos en elementos más comunes de este tipo de experiencias: editor de escenas, audios, y eventos e interacciones.

Editor de código: HTML, CSS y JavaScript.

Dentro de este tipo de experiencias se ha creado una estructura de juego, que el usuario puede modificar a su gusto. En dicha estructura podemos ver una clase OnirixGame, que cuenta con una serie de eventos o callbacks: onStart, onTimeChange, onGameEnd, onScoreChange. 

Al copiar esta experiencia podrás analizar el código con detalle, viendo cómo damos forma al juego completo, y sus cambios en la interfaz de usuario, a través de los diferentes eventos que van aconteciendo en la escena de AR.

Además de ello gracias al editor de código podemos añadir diferentes elementos de la UI del juego relevantes para este tipo de dinámicas:

• Onboarding: pantalla de tips iniciales para explicar la dinámica del juego
• Puntuación: menú superior donde mostramos el estado del juego (cantidad de logos que han sido cazados hasta el momento, por ejemplo).
• Temporizador: indicador de los segundos del juego (los que quedan o los que vayan pasando).
• Pantalla final: al terminar cada partida se muestra una pantalla resumen con la puntuación obtenida.

Accede a la documentación online del editor de código.

Embed SDK para webAR en JavaScript

Como se comenta en el apartado anterior se ha creado una estructura de juego dentro de Onirix, que el usuario puede modificar para generar sus propias versiones. Además se proporciona acceso al SDK de Onirix, en el que se puede suscribir a diversos eventos y con ello modificar diferentes partes de la escena de RA.

En el caso del juego en cuestión se programan los siguientes eventos para manipular las interacciones con la escena:

• EmbedSDK.Events.SCENE_LOAD_END: se utiliza el evento de carga completa de la escena para iniciar el juego y así dejar lista la interfaz de usuario inicial con todos sus componentes.
• EmbedSDK.Events.ELEMENT_CLICK: este evento permite manipular el click en cada uno de los elementos de la escena, y por tanto programar la activación de la animación de destrucción de cada logo, así como la desaparición de los mismos. También es el punto de entrada a la suma de nuevos puntos dentro del juego y la evolución de la partida.

 Accede a la documentación online del embed SDK.

Editor de escenas, eventos e interacciones

Aparte de la programación del propio juego, la escena comienza con todo el contenido de AR incluido en ella, es decir, todos los logos que se deben cazar ya están disponibles en la escena. En este caso se inicia la experiencia con un logo fijo rotando, que al ser pulsado “lanza” la dinámica de juego. En ella aparecen un total de 15 logos flotando alrededor del usuario, con diferentes movimientos. Todos estos contenidos y sus movimientos se incluyen dentro del editor de escenas, con diferentes eventos asociados:

• 15 logos en 3D agrupados en 3 colecciones “orbitales” en la escena. 15 modelos 3D con animaciones de destrucción para cada uno de los elementos 3D.
• Las 3 colecciones se inician deshabilitadas (ocultas) y al hacer click en el logo de inicio se muestran al usuario.
• Además se lanzan eventos de rotación para los 3 orbitales, con diferentes velocidades y giros en varios ejes, consiguiendo así el efecto deseado.

Para más información consulta nuestra documentación sobre el editor de escenas y  documentación sobre eventos e interacción..

Sonidos y efectos

También como parte de esta experiencia se incluyen sonidos que hacen que la dinámica tome un nivel mayor de inmersión. 

• Se incluye una música de fondo tipo videojuego, que suena durante toda la experiencia. 
• Además se añade un efecto de sonido de tipo destrucción, cada vez que se hace click en un elemento, dando así una sensación más realista al usuario.

Para más información accede a nuestra documentación sobre sonidos y efectos.

Escena Surface: tracking de giroscopio y autoload.

En este tipo de experiencias en la que no es necesario tener ningún tipo de marcador concreto (ni una imagen, ni una superficie específica), el uso de un modo de RA en el que el giroscopio del teléfono haga de referencia es el modo más efectivo. La escena se carga mediante una característica de escenas de tipo Surface: autoload. Con esto el usuario no tiene que tomar ninguna decisión de dónde colocar el contenido, éste simplemente aparece enfrente y se puede comenzar a interactuar con el contenido. La ventaja de este tipo de escenas es que pueden colocarse en cualquier lugar, interiores o exteriores, y no requieren de ninguna referencia física para su correcto consumo.