[Hay GIF en 3D debajo del corte]La realidad aumentada (AR) se ha convertido de repente en un término muy popular. Gracias a Vuforia, los desarrolladores pueden
complementar fácilmente
el mundo físico con contenido digital.
Aunque el lanzamiento de
ARKit y
ARCore ayudó a aumentar la popularidad de la realidad aumentada, ya existían otras plataformas y SDK. Uno de ellos era Vuforia; y recientemente, Unity
firmó un acuerdo de asociación con Vuforia e integró esta plataforma AR en el motor del juego Unity.
En este tutorial, crearé un juego AR utilizando el SDK de Vuforia integrado con el motor de Unity. En el proceso, hablaré sobre los siguientes componentes clave:
- Configurar la transferencia de datos desde la cámara de realidad aumentada
- Seguimiento de imágenes: qué es y cómo funciona
- Adjuntar contenido digital a un objeto físico
- Cree interacciones personalizadas que se disparen según lo que vea la cámara
Nota: este tutorial sobre Vuforia supone que ya conoce los conceptos básicos del desarrollo en Unity. Si es nuevo en Unity, consulte el excelente tutorial de Introducción a Unity .
Desarrollo de juegos AR en Unity
Hay muchos dispositivos AR en el mercado, pero el objetivo principal de las aplicaciones AR es el espacio móvil de plataformas como iOS y Android. Es aquí donde la combinación de Unity y Vuforia es conveniente, en el desarrollo multiplataforma. Otra ventaja es que la aplicación se puede probar en el editor. Para esto, solo necesitas una cámara web.
Antes de comenzar, descargue la última versión de Unity e instale el
componente Vuforia Augmented Reality Support . Si usa
Unity Hub , puede agregar este componente a una versión ya instalada de Unity.
Llegar al trabajo
Ahora que tiene Unity, Vuforia y una cámara web, debe descargar un proyecto de muestra (
desde aquí ).
Después de la descarga, extraiga los archivos y abra el proyecto
Cómo hacer un juego AR usando Vuforia Starter en Unity. Cuando se carga el proyecto, abra la escena
Starter desde la carpeta
Escenas y mire la ventana Jerarquía:
Después de revisar la composición del proyecto, haga clic en el botón
Reproducir en el editor para completar el pedido en nuestro juego de pizza.
Genial, podemos jugar con pizza, pero nuestro verdadero desafío es convertir esto en un juego de AR.
Nota: los recursos de la interfaz de usuario para este tutorial se han descargado de shareicon.net
.
Conoce al chef Vuforia
Para hacer esto, necesitamos hacer que la pizza virtual aparezca en la imagen del rastreador que tenemos en el mundo real. Después de agregar el relleno al pedido, puede "servir" la pizza físicamente, sacándola de la visibilidad de la cámara ...
Pero todo tiene su tiempo. Primero debe reemplazar
la cámara principal con la
cámara AR . Retire la
cámara principal de la escena y luego
haga clic derecho en la
jerarquía .
Luego agregue
Vuforia -> AR Camera . Aparecerá esta ventana:
Haga clic en
Importar y espere a que el paquete Vuforia se importe al proyecto, y se agregarán bastantes archivos.
Puede ignorar los nuevos archivos en las carpetas
Editor y
Streaming Assets . Estas son solo plantillas; Los archivos que necesitamos están incluidos en el proyecto.
La carpeta
Vuforia contiene todos los prefabricados y scripts utilizados por la plataforma Vuforia que usaremos.
También vale la pena mencionar el archivo
VuforiaConfiguration dentro de la carpeta
Recursos . Este archivo se agregó porque se requiere una licencia para desarrollar la aplicación Vuforia. Sin embargo, si lo desea, puede obtener una licencia de desarrollador gratuita para
Vuforia Developer Portal .
Nota: si su proyecto no tiene una Clave de licencia de la aplicación, puede encontrarla en el archivo README. Copie la línea en el campo del inspector del archivo de
configuración de
Vuforia .
Ahora que tenemos la cámara AR en la escena, solo queda una cosa por hacer: ¡activar la realidad aumentada!
Vaya a
Editar -> Configuración del proyecto -> Reproductor . Desplácese hacia abajo hasta las opciones de
Configuración XR y asegúrese de que la casilla de verificación
Realidad aumentada de Vuforia esté marcada.
¡Haz clic en el editor de
Play y salúdate a ti mismo!
Nota: si hizo clic en reproducir y aparece la pantalla "Error de inicialización de Vuforia", intente reiniciar Unity. Este es un error aleatorio que aparece solo en algunos sistemas.
Introducción al reconocimiento de patrones
Admirarte es genial, por supuesto, pero ¿no íbamos a hacer un juego de pizza?
Por defecto, Vuforia funciona con
Reconocimiento de imagen . El reconocimiento de imagen, también llamado Reconocimiento de Rastreador o Rastreo de Imagen, es un proceso en el cual la cámara reconoce una imagen predefinida y sabe qué hacer con ella, por ejemplo, mostrar algo de contenido sobre ella. Esto funciona mejor cuando la imagen de seguimiento de alguna manera coincide con el contenido, por ejemplo, los planos de planta para el renderizado de edificios funcionan bien encima de la imagen con el edificio.
Cómo funciona: es muy importante elegir una imagen de buena calidad para el seguimiento. Al usar Vuforia, puede cargar la imagen seleccionada en el portal del desarrollador para verificar la calidad de su seguimiento, y esto debe hacerse
antes de comenzar el desarrollo. El portal del desarrollador asigna una calificación a la imagen, pero, lo que es más importante, muestra sus "puntos característicos". Para que el rastreador sea bueno, estos puntos característicos (puntos característicos) deben estar densamente distribuidos sobre la imagen y no debe haber ningún patrón repetitivo en ellos. En tiempo de ejecución, la cámara busca estos puntos característicos para calcular su ubicación en relación con la imagen.
Para este tutorial, la imagen y la base de datos de seguimiento ya están configuradas. La imagen de la pizza se encuentra en la carpeta Materiales que descargó anteriormente. Lo ideal es imprimirlo. O puede abrirlo en algún dispositivo digital y luego "mostrarlo" a la cámara. Así es como se ve la imagen en la base de datos de Vuforia Tracker:
Como puede ver, los puntos característicos están bien distribuidos. ¡También es pizza, lo cual es conveniente!
Agregar objetivos de imagen a la escena
¡Es hora de hacer la magia! Haremos que la pizza virtual aparezca encima de nuestra pizza. Nuevamente, use el menú
Crear en la
Jerarquía y seleccione
Vuforia -> Imagen .
Ahora tenemos un
Image Target GameObject en la escena. Mire este objetivo en el inspector y verá varios componentes. Los más importantes son
Image Target Behavior y
Default Trackable Event Handler . Examinaremos el segundo con más detalle más adelante, pero por ahora, asegúrese de que las opciones para la lista desplegable
Comportamiento del objetivo de imagen estén configuradas de la siguiente manera:
- La base de datos está establecida en RW_ItsaPizza
- Objetivo de imagen establecido en PizzaClipArt
¿Recuerdas los archivos agregados anteriormente al proyecto que pedí ignorar? Los encontraste! Vuforia está agregando varias bases de datos de muestra de Image Target para que podamos comenzar a desarrollarlas y usarlas como ejemplos, como la que estamos usando, ya agregada a los materiales.
Nota: el rastreador de Pizza es el único objetivo de imagen en su base de datos; sin embargo, puede haber cientos de imágenes en una base de datos. Además, puede haber varias bases de datos en una sola aplicación.
Ahora que hemos configurado la
cámara AR y el
rastreador de imágenes en la escena, ¡tenemos todo lo que necesita para que funcione la realidad aumentada! En el Editor, haga clic en el botón
Reproducir y coloque la imagen impresa frente a la cámara.
Tenemos pizza!
Adjuntar objetos del juego a los rastreadores como objetos secundarios
La pizza es un poco pequeña, pero está firmemente adherida a la imagen del rastreador. También puede notar que si elimina la imagen rastreada, la pizza permanecerá suspendida en el aire.
El hecho es que mientras la cámara web puede ver el
rastreador de imágenes , Vuforia puede actualizar la posición de la
cámara AR en la escena. Si desea ver esto en acción, configure el Editor de Unity para que las ventanas de
Juego y
Escena sean visibles al mismo tiempo, luego seleccione
Cámara AR y haga clic en Reproducir.
¿Cómo hacer que la pizza se comporte correctamente cuando la cámara está funcionando? Seleccione
ImageTarget en la Jerarquía. Verá que su escala en cada eje es
10 . Esto está controlado por el componente
Comportamiento del objetivo de imagen . En la sección avanzada, puede ver que el parámetro
Ancho tiene un valor de
10 . Se configuró cuando la imagen se cargó en el sitio web Vuforia Developer.
Sugerencia: ¿no entiendes por qué Image Target se configuró en el ancho 10 en este tutorial? Cuando el tamaño no es un factor significativo para la aplicación, establecerlo en 10 proporciona a la cámara una mayor probabilidad de seguimiento, al tiempo que mantiene una buena posición para el contenido entre los planos cercano y lejano de la cámara AR. Sin embargo, a veces es necesario que la realidad aumentada tenga una cierta escala. En este caso, debe establecer el tamaño del rastreador de imágenes para que coincida con las medidas físicas al cargar en el portal del desarrollador.
Ahora seleccione GameObject
Pizza en la
Jerarquía . Arrástrelo a
ImageTarget para que sea un niño. La escala cambiará a
(X: 0.1, Y: 0.1, Z: 0.1) . Devuélvalo a los valores
(X: 1, Y: 1, Z: 1) , y también cambie la Posición hasta
0.01 largo del eje
Y. Gracias a esto,
Pizza cumplirá con
ImageTarget .
Presione
Reproducir nuevamente y verá que la pizza está en la parte superior de la imagen, y también desaparece cuando la imagen desaparece del marco.
Explorando DefaultTrackableEventHandler
Este comportamiento se toma del
DefaultTrackableEventHandler de
ImageTarget . Abra el script y véalo.
El guión está bien comentado, pero vale la pena prestar atención a algunos aspectos:
- La función Inicio registra este script como un controlador de eventos para TrackableBehaviour (en este caso, ImageTargetBehaviour ).
- OnDestroy elimina este enlace.
- OnTrackableStateChanged es la función más importante. Su código le dice qué debe suceder cuando cambia el estado de seguimiento.
- OnTrackingFound y OnTrackingLost se llaman desde OnTrackableStateChanged . En DefaultTrackableEventHandler, alternan los componentes Renderer , Collider y Canvas de cualquier elemento secundario.
Cuando la cámara detecta una imagen, ya no solo mueve la
cámara AR ; ella también le ordena a GameObject
Pizza que active todos sus componentes de
Renderer , y cuando la imagen desaparece de la cámara, él nuevamente ordena apagarlos.
Resumen de esta información por ahora.
Crea tus propias acciones de seguimiento
¡Es hora de hacer algo con esta información!
Elimine el componente
DefaultTrackableEventHandler de
ImageTarget . Luego agregue
PizzaTrackableEventHandler , que se puede encontrar en la carpeta
Scripts . Luego abra
PizzaTrackableEventHandler . Este es un clon de
DefaultTrackableEventHandler , pero el código en
OnTrackingFound y
OnTrackingLost se ha eliminado.
¡ Debe resolver este problema!
Habilitar y deshabilitar los componentes de
Renderer es útil en casi todas las aplicaciones de AR, así que recuperemos ese código. Si se atasca, puede copiarlo desde
DefaultTrackableEventHandler o encontrarlo debajo del spoiler a continuación.
Código protected virtual void OnTrackingFound() { var rendererComponents = GetComponentsInChildren<Renderer>(true);
¡Estamos listos para convertir este proyecto en un juego de realidad aumentada!
Mire la interfaz de usuario y encuentre el botón que el jugador necesita presionar para completar su pizza.
Como puede ver, cuando se presiona un botón, se
GameManager.CompleteOrder() Event
GameManager.CompleteOrder() . En lugar de obligar al jugador a presionar el botón, puede asegurarse de que "sirvió" pizza para completar el pedido (movió el rastreador fuera de la visibilidad de la cámara).
Al comienzo de
PizzaTrackableEventHandler, agregue un
UnityEvent para llamar cuando la imagen pierda el seguimiento.
using Vuforia; using UnityEngine; using UnityEngine.Events; public class PizzaTrackableEventHandler : MonoBehaviour, ITrackableEventHandler { public UnityEvent OnTrackingLostEvent; ...
Ahora llamemos al evento en el método
OnTrackingLost :
protected virtual void OnTrackingLost() { var rendererComponents = GetComponentsInChildren<Renderer>(true);
Esto hace que
PizzaTrackableEventHandler sea más flexible, porque ahora podemos configurar la ejecución de cualquier acción si se pierde el seguimiento. Guarde
PizzaTrackableEventHandler , regrese al Editor de Unity y espere a que se complete la compilación. Cuando termine,
GameManager.CompleteOrder() cuando se pierda el rastreador de pizza de seguimiento. Finalmente, deshabilite o elimine
CompleteOrderButton en la interfaz de usuario.
Guarde la escena, haga clic en
Reproducir y sirva pizza.
A donde ir ahora
¡Felicitaciones, has completado el tutorial!
Un proyecto de ejemplo se puede descargar
desde aquí .
Para obtener más información sobre el desarrollo con Vuforia en Unity, consulte la
Biblioteca para desarrolladores de Vuforia o
el tutorial de Unity .
No olvide configurar una cuenta de desarrollador para usted en
el portal Vuforia . También puede intentar cargar varios rastreadores diferentes allí para verificar cómo se rastrean.
Para más detalles, lea sobre
botones virtuales . El sitio web de Vuforia tiene materiales de muestra. Comprueba si puedes crear estos botones virtuales para reemplazar la interfaz de usuario en un juego de pizza.
Proponga nuevas ideas para juegos de realidad aumentada. ¿Tal vez este es un juego de lucha de cartas en el que las criaturas saltan directamente de las cartas? ¿Qué pasa con la defensa de la torre? ¿Dónde controlas un helicóptero de combate con tu teléfono?