Cómo hemos hecho nuestro juego de Realidad Aumentada

Introducción

La Realidad Aumentada es el término que engloba a las distintas tecnologías que permiten que un usuario interaccione con distintos elementos, entre ellos parcialmente el mundo que le rodea, a través de un dispositivo inteligente (teléfono móvil, tablet u otro instrumento).

Haciendo uso de esta tecnología podemos conseguir que el usuario disfrute de una experiencia inmersiva. Para ello se deberá desarrollar una aplicación que emplee, de manera efectiva, tanto elementos reales como otros creados artificialmente.

En este artículo vamos a comentar las distintas opciones disponibles, indicando sus ventajas e inconvenientes, también indicaremos que métodos existen para generar elementos en el mundo real y por último daremos una serie de consejos que pueden servir para desarrollar todo tipo de aplicaciones.

Opciones disponibles

El primer paso, una vez definidos los requerimientos, es buscar un servicio o librería que nos permita llevar a cabo el juego. Existiendo tanto gratuitas como de pago. Entre las opciones disponibles, existiendo más, se valoraron:

• Zapworks de Zappar: solución completa, permite emplear los distintos frameworks para el trabajo en Realidad Aumentada. Limitado a host por parte de la empresa y a 1200 visitas anuales, presenta un precio elevado.
• 8th Wall de Niantic: solución muy completa y documentada. Al igual que la solución anterior, tiene limitación de usuarios y un coste mensual elevado.
• Onirix: Similar a las soluciones anteriores tanto en funcionamiento como en limitaciones y costes.
• A-Frame: se trata de un framework web para construir experiencias de realidad virtual. Solución gratuita, con rendimiento nativo y capacidad de realizar autoalojamiento.

Tras este análisis se decidió elegir A-Frame, ya que se acerca más a los requerimientos fijados. La mayor ventajas es que permite el autoalojamiento del producto, aparte de tratarse de un servicio gratuito.

Métodos de instanciación en el mundo real

Una vez elegida la librería que vamos a emplear en el desarrollo, tenemos que elegir cómo vamos a querer que nuestro juego quede representado en el mundo real. Para ello se pueden emplear distintos sistemas de detección de patrones o imágenes.

• Detección de imagen: permite escanear una foto, un dibujo, o imagen, y mostrar contenidos sobre ella. Presenta problemas ante elementos con brillo y al cambio de iluminación.
• Basado en la ubicación: permite utilizar el geoposicionamiento de contenido de realidad aumentada en interiores (con poca precisión) y exteriores.
• Basado en marcadores: Los marcadores son una especie de códigos QR simplificados. Se definen escenas 3D específicas para marcadores concretos, de modo que cuando la cámara reconoce un marcador, la aplicación web muestra el modelo 3D sobre él.
• Usando QR: similar a la solución anterior. Más complejo de implementar debido al tamaño y complejidad del patrón del QR.
• Target usando imágenes: permite analizar una imagen, foto o dibujo, y crear una serie de patrones sobre ella para que al pasar la cámara del dispositivo se pueda mostrar contenido.

Para el desarrollo de nuestro juego hemos decido emplear la última opción. Ya que permite emplear cualquier imagen y tanto los brillos como la iluminación no afectan tanto como en otros casos.

En la siguiente imagen se puede apreciar el resultado de análisis con la herramienta de MindAR.

Consejos y recomendaciones

Ahora que tenemos elegida tanto la biblioteca como el método de instanciación pasaremos a crear nuestro juego. Dado que se trata de un servicio que debe darse en web y para dispositivos móviles, debemos tener en cuenta varios aspectos.

• Uso de modelos y formatos: Para darle más realismo al juego podemos incluir distintos modelos tridimensionales. Estos modelos pueden ser adquiridos en distintas páginas, recomendamos sketchfab aunque existen multitud de servicios similares. También es importante indicar los formatos en los que deben encontrarse estos archivos. A-Frame funciona tanto con el formato .glb como el formato .gltf, siendo este último el más recomendado.

  

• Uso de imágenes como textura: Para añadir nuevos elementos podemos incluir objetos básicos como pueden ser un rectángulo o un cuadrado y aplicarles una imagen como textura. De esa manera hemos conseguido incluir personalización tanto en la pista como en las vallas publicitarias.
• Uso de modales: para mejorar la funcionalidad del juego (instrucciones, ranking y mensajes) se han utilizado los modales de Bootstrap.
• Gestión de dispositivos: Dado que el juego consiste en una página web que se ejecutará en una gran variedad de dispositivos móviles, debemos tener en cuenta muchos aspectos: la potencia, la tasa de refresco de la pantalla y la orientación de pantalla, entre otros. Es importante hacer una buena gestión de estos elementos para que el juego sea funcional en todos los dispositivos.

Conclusión

Como hemos podido ver en este artículo, existen varios métodos para crear una aplicación usando realidad aumentada. Teniendo desde soluciones potentes y de pago a versiones gratuitas que permitan personalización.

Por último, es fundamental indicar que dado que se trata de código JavaScript deberemos encargarnos de la parte funcional del juego, desde el movimiento de la pelota hasta el registro de puntuaciones, y es ahí donde se encuentra la verdadera complejidad del juego.