Advertisement
  1. Code
  2. Mobile Development

Crea un Juego de Realidad Aumentada del Estilo de Pokémon GO con Vuforia

by
Read Time:12 minsLanguages:
This post is part of a series called Create a Pokémon GO Style Augmented Reality Game With Vuforia.
Pokémon GO Style Augmented Reality With Vuforia
Create a Pokémon GO Style Augmented Reality Game With Vuforia: Part 2

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

1. Introducción

En el primer post de ésta serie hablamos de que fabuloso es Vuforia para crear experiencias de Realidad Aumentada, y ahora estamos listos para practicar éstos conceptos en una aplicación real. En éste tutorial, comenzaremos a experimentar con Realidad Aumentada usando Vuforia en Unity 3D. ¡Aprenderemos cómo configurar Vuforia e iniciaremos el desarrollo un juego de RA (Realidad Aumentada) desde cero, ¡adoptando una lógica similar a la utilizada en Pokémon GO!

No será necesario tener ninguna experiencia previa en Unity o Vuforia para seguir éste tutorial.

Si quieres mayor conocimiento, por qué no aprendes sobre uno de los conceptos más fundamentales de RA, marcadores, en nuestro curso breve:

1.1 Recapitulación Rápida: ¿Cómo funciona Vuforia?

Vuforia usa la pantalla del dispositivo combinada con los datos del acelerómetro y el giroscopio para examinar el mundo. Vuforia utiliza la visión de la computadora para entender lo que 've' en la cámara para crear un modelo del entorno. Después de procesar los datos, el sistema puede ubicarse de manera aproximada en el mundo, sabiendo sus coordenadas: arriba, abajo, izquierda, derecha, etc.

Si no sabes de que se trata Vuforia, consulta la primera entrega de ésta serie.

1.2. ¿Qué vamos a aprender?

Éste tutorial se divide en dos partes. En éste, veremos algunas de las particularidades de Vuforia en Unity 3D, aprenderemos cómo configurar el entorno, y también comenzaremos a desarrollar un pequeño juego de RA llamado Shoot the Cubes (Dispárale a los Cubos). Prestaremos atención especial al Prefab ARCamera, una de las partes más importantes de Vuforia en Unity.

En la segunda parte, continuaremos para desarrollar el juego Dispárale a los Cubos, agregando interactividad y hacerlo más interesante. La sección no detallará las particularidades de Vuforia, pues la idea será explorar algunas posibilidades ofrecidas por Unity para crear una experiencia adictiva de Realidad Aumentada.

2. Vuforia en Unity

Unity es un motor de juego popular y poderoso que es fácil de usar y puede compilar juegos para múltiples plataformas. Hay algunas ventajas al usar Unity para crear experiencias de AR con Vuforia. Es posible apuntar a todos los sistemas soportados por Vuforia, incluyendo gafas inteligentes. Es más sencillo de usar, gracias a los Prefabs dados por el SDK de Vuforia. Usando sólo Unity es posible accesar a todas las características disponibles en Vuforia.

2.1. Prefabs de Vuforia

Puedes accesar a todas las funcionalidades de Vuforia en Unity usando los prefabs de Vuforia. Todo lo que tienes que hacer es arrastrar el objeto al escenario y configurarlo. Como el nombre sugiere, los prefabs son como plantillas para crear y clonar completos objetos Unity con componentes y propiedades. Por ejemplo, el ImageTarget representa imágenes que pueden ser usadas como objetivos. Veamos los prefabs de Vuforia disponibles en Unity:

  • ARCamera: el prefab más importante. Maneja la experiencia general de RA, controlando la calidad de renderizado, definiendo el centro del mundo, la cámara del dispositivo que será usada, el número de objetivos máximos que serán rastreados, etc. En éste tutorial concentraremos nuestros esfuerzos en entender cómo usar éste objeto.
  • Targets: Todos los objetivos Vuforia tenen su propio prefab: ImageTarget, MultiTarget, CylinderTarget, ObjectTarget, UserDefinedTargetBuilder, VuMark, FrameMarker. Esos objetivos serán reconocidos por la ARCamera e inicia una acción, como exhibir un objeto 3D o animación.
  • CloudRecognition: Usado para accesar a objetivos definidos en el sistema de nube de Vuforia.
  • SmartTerrain y Prop: Esos objetos son usados en la función SmartTerrain.
  • TextRecognition y Word: Prefabs usados en la función TextRecognition.
  • VirtualButton: Vuforia puede entender Targets (objetivos) como botones que pueden ser presionados físicamente por el usuario. Éste prefab te ayudará a usar éste recurso.

3. Creando Nuestra Primera Experiencia de RA

El juego que desarrollaremos es simple, pero ilustra bien los principios de Realidad Aumentada, y nos enseñará algunos de los fundamentos de Vuforia. El objetivo del juego es encontrar y disparar cubos que están volando alrededor de la habitación. El jugador buscará los cubos usando su dispositivo y 'presionará' para disparar en los cuadros. No nos preocuparemos del marcador, nivel ni nada por el estilo, pero puedes profundizar en éstos aspectos del juego por tí mismo.

3.1. Preparando Unity para Vuforia

Antes de iniciar a experimentar, necesitaremos preparar a Unity para Vuforia. El proceso es muy simple, y básicamente necesitamos importar el paquete SDK de Vuforia y agregar el prefab ARCamera a nuestro proyecto.

  • Crea una cuenta de desarrollador en Vuforia.
  • Inicia sesión y descarga el SDK de Vuforia para Unity.
  • Abre Unity y crea un nuevo proyecto llamado "Shoot the Cubes".
  • Después de que se abra la ventana del proyecto en Unity, ve a Assets > Import Package > Custom Package y selecciona el SDK descargado.
  • Importa todo.
  • Borra el objeto Camera en la ventana Hierarchy.
  • Ve a License Manager (Gestor de Licencia) en el portal de desarrollador de Vuforia y crea una nueva licencia usando tu cuenta de desarrollador.
  • Copia la clave de licencia.
  • De regreso a Unity, en la ventana Project, ve a Assets > Vuforia > Prefabs > ARCamera. Selecciona el elemento y arrástralo a la ventana Hierarchy.
ARCamera PrefabARCamera PrefabARCamera Prefab
  • Con ARCamera seleccionado, en el panel Inspector, ve a Vuforia Behavior (Script), encuentra el campo App license key, y pega la licencia que creaste en el portal de desarrollador de Vuforia.
Paste the License Key on ARCamera prefabPaste the License Key on ARCamera prefabPaste the License Key on ARCamera prefab
  • Haz click en el botón Apply (aplicar) cerca de la parte superior del panel Inspector para agregar la clave de licencia a todos los prefabs de ARCamera en éste proyecto.
Apply the changes on the ARCamera prefabApply the changes on the ARCamera prefabApply the changes on the ARCamera prefab

3.2. Probando si Vuforia está Funcionando

Es momento de revisar si el entorno está funcionando correctamente.

Usando la Cámara de tu Computadora

Si tienes una webcam en tu computadora, puedes presionar el boton de reproducir de Unity para verificar si ARCamera está funcionando. Será posible reconocer objetivos usando la webcam; sin embargo, no será posible usar ningún sensor de datos para probar tu experiencia de RA. Si la visión de la cámara no muestra la ventana Game, es posible que tu cámara no sea compatible con el perfil de webcam proporcionado por ARCamera.

Press the PLAY button on Unity

Configurando la Aplicación para Ejecutarse en un Dispositivo

La mejor forma de probar tu aplicación de Vuforia es directamente en el dispositivo. Compilaremos el proyecto para Android, pero los mismos pasos aplican para dispositivos iOS.

  • Primero, necesitamos guardar la Escena en la que estamos trabajando. Ve a File > Save Scene.
  • Selecciona el directorio Assets y crea un nuevo directorio llamado Scenes.
  • Guarda ésta escena como ShootTheCubesMain.
  • Ve a File > Build Settings.
  • Selecciona Android y haz click en Switch Platform. Si ésta opción está deshabilitada, tendrás que descargar el SDK de Unity deseado para el dispositivo.
Unity Build SettingsUnity Build SettingsUnity Build Settings
  • Haz click en Player Settings y configura el proyecto en la ventana Inspector.
Unity Player SettingsUnity Player SettingsUnity Player Settings
  • Presta atención a algunas opciones: deshabilita Auto Graphics API y asegúrate que esté seleccionado OpenGLES2 para la opción Graphics API.
  • Escribe el Bundle Identifier (identificador de paquete).
  • Para dispositivos Android, asegúrate que el Minimum API Level seleccionado sea API 9 o mayor. También necesitarás usar ARMv7 para la opción Device Filter.
  • Si seguiste los pasos correctamente, el proyecto está listo para ser creado. Sin embargo, si ésta es la primera vez que esás compilando un proyecto Unity para Android o iOS, tienes que configurar Unity para esos dispositivos. Sigue ésta guia para Android y ésta para iOS.
  • Para ejecutar el proyecto, regresa a Build Settings y da click en Build and Run.

Después de la creación, la aplicación será instalada en tu dispositivo. Por ahora, todo lo que deberías esperar es ver la pantalla de la cámara en tu dispositivo sin ningún error. Si la tienes, todo salió perfectamente.

3.3. Usando el Prefab ARCamera

El objetivo del juego Dispárale a los Cubos es buscar y dispararle a cubos que vuelan usando la cámara y los sensores del dispositivo. Éste planteamiento es similar al usado en Pokémon GO. Para lograr ésto, sólo necesitaremos usar el prefab ARCamera de Vuforia.

Hay muchos scripts adjuntos al ARCamera. Por ahora, lo único que necesitarás entender es el script Vuforia Behavior. Veamos sus opciones:

  • App License Key: donde debería insertarse la clave de licencia de Vuforia.
  • Camera Device Mode: Controla la calidad de renderizado de los objetos.
  • Max Simultaneos Tracked Images: Define el número máximo de objetivos rastreados al mismo tiempo. Vuforia no recomienda más de cinco a la vez.
  • Max Simultaneos Tracked Objects: Define el número máximo de objetos rastreados al mismo tiempo. De nuevo, Vuforia no recomienda más de cinco al mismo tiempo.
  • Load Object Targets on Detection: Carga el objeto asociado con el objetivo tan pronto como el objetivo es detectado.
  • Camera Direction: Elige que cámara de dispositivo usar.
  • Mirror Video Background: Define si la pantalla de la cámara debe dar un efecto de espejo.
  • World Center Mode: La opción más relevante para nuestro proyecto. Define cómo el sistema debe localizar el centro del mundo.
    • SPECIFIC_TARGET: Usa un objetivo específico como una referencia para el mundo.
    • FIRST_TARGET: El primer objetivo detectado será usado como una referencia para el mundo.
    • CAMERA: Usa la cámara como un punto de referncia para el mundo.
    • DEVICE_TRACKING: Usa el sensor del dispositivo como una referencia para establecer las posiciones del mundo. Ésta es la opción que necesitamos elegir para nuestro pequeño proyecto.

Por ahora, todo lo que necesitarás cambiar en el ARCamera es el World Center Mode. Haz click en el elemento ARCamera en la sección hierarchy (jerarquía) y en el panel Inspector, cambia el World Center Mode a DEVICE_TRACKING.

3.4. Usando el Sensor del Dispositivo para Encontrar el Centro del Mundo.

Agreguemos un cubo al escenario y probemos si ARCamera está funcionando correctamente.

  • Asegúrate de que la posición y rotación de ARCamera esté establecido en los ejes X, Y, y Z.
ARCamera Transform OptionsARCamera Transform OptionsARCamera Transform Options
  • Crea un objeto Cube (cubo) desde Game Object > 3D Object > Cube.
Create a Cube ObjectCreate a Cube ObjectCreate a Cube Object
  • Mueve la Position (posición) en el eje Z a 10 y 0 en los ejes X y Y.
  • Escala (Scale) el objeto a 2 en los ejes X, Y, y Z.
  • Rota (Rotate) el cubo 45 grados en los ejes X y Y.
Change the Cube Position Rotation and ScaleChange the Cube Position Rotation and ScaleChange the Cube Position Rotation and Scale
  • Puedes presionar el botón de reproducir para verificar si el cubo está posicionado correctamente.
  • Una vez que estés seguro de que el cubo está posicionado correctamente, crea de nuevo el proyecto y pruébalo en el dispositivo. Para crear, ve a File > Build and Run.

Tendrás que mirar alrededor al rotar tu dispositivo para encontrar el cubo. Notarás que el objeto sigue en el mismo lugar, aún después de que rotaste el dispositivo alejándolo de él. Es como si el cubo "existiera" en el mundo real, ,pero sólo puede ser visto con la cámara del dispositivo.

The cube remain in place even after the device rotatesThe cube remain in place even after the device rotatesThe cube remain in place even after the device rotates

3.5. Estableciendo la Posición de los Elementos de Acuerdo a ARCamera.

El primer problema con nuestra aplicación hasta ahora es que el cubo puede aparecer en cualquier lado y el usuario tendrá que mirar alrededor para encontrarlo. Ya que el centro del mundo está definido de acuerdo a los sensores del dispositivo, no podemos estar seguros de la posición real de los elementos. Ésto se debe a que el usuario podría iniciar con el dispositivo en cualquier orientación, y por la forma en que la rotación se mide varía de dispositivo a dispositivo.

Para asegurarte de que las entidades de RA comiencen en la vista del usuario, el planteamiento más fácil es esperar a que Vuforia defina el centro del mundo y encuentre la rotación de ARCamera y luego arregle la ubicación de inicio de los elementos de acuerdo a esa orientación.

Crearemos un Spawn Manager para definir la posición de los cubos a ser generados. El manager o gestor definirá su posición de acuerdo a la rotación de ARCamera. Esperará hasta que se establezca la rotación, y luego se moverá 10 unidades al frente de la cámara.

  • Crea dos objetos vacíos con Game Object > Create Empty. Haz click derecho en uno de los objetos que acabas de crear y renómbralo _SpawnController.
  • Cambia el nombre del otro objeto vacío a _GameManager.
  • En la ventana Project, selecciona el directorio Assets y crea un nuevo directorio llamado Scripts.
  • En el directorio Scripts, crea un script C# llamado SpawnScript.
  • Arrastra el SpawnScript al _SpawnController.
  • Haz doble click en SpawnScript para editarlo.

Primero agrega el paquete de Vuforia.

Para accesar a ARCamera, utiliza Camera.main. Creemos una función para obtener la posición de la cámara y definir que el cubo sea generado a 10 unidades adelante de éste punto.

Cambiaremos la posición sólo una vez desde la función Start. ChangePosition es una corrutina que esperará unos instantes antes de establecer su posición.

Probemos el script:

  • De regreso en Unity, haz click en el objeto _SpawnController y utiliza Game Object > 3D Object > Sphere para insertar una esfera dentro de _SpawnController.
  • Selecciona la esfera y asegúrate de que su posición esté establecida en 0 en los ejes X, Y y Z.
  • Ahora vamos a encimar el cubo y _SpawnController para que puedas notar la importancia del script. Selecciona _SpawnCntroller y establece su posición en 0 en los ejes X y Y y en 10 en el eje Z, la misma posición que el cubo.

Los elementos comienzan a encimarse; sin embargo, una vez que crees y ejecutes la aplicación en un dispositivo, verás que el _SpawnController y su esfera aparecerán frente a la cámara, y el cubo estará en otro lugar. ¡Adelante pruébalo! Asegúrate de que estés viendo el dispositivo justo cuando inicie la aplicación.

4. Conclusión

Felicitaciones, has creado tu primera experiencia de Realidad Aumentada. Si, es un poco austera, ¡pero está funcionando! En éste tutorial aprendiste cómo usar el principal prefab de Vuforia en Unity, el ARCamera. También aprendiste cómo configurarlo y cómo usar los sensores del dispositivo para crear la ilusión de que un objeto virtual es insertado en el mundo.

4.1 ¿Qué Sigue?

En el próximo tutorial mejoraremos éste principio para crear un juego real y una experiencia más adictiva. Continuaremos desarrollando el juego Dispárale a los Cubos, agregando interactividad y explorando las posibilidades de Unity para crear un interesante juego de RA. Haremos los cubos se generen y vuelen alrededor, y dejaremos que el jugador los busque y los destruya al disparar un laser desde el dispositivo.

¡Nos vemos pronto!

Agradecimiento especial a Freepik por el diseño del gráfico vectorial con licencia Creative Commons CC BY-SA.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.