Creando un juego AR con Vuforia


[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); // Enable rendering: foreach (var component in rendererComponents) { component.enabled = true; } } protected virtual void OnTrackingLost() { var rendererComponents = GetComponentsInChildren<Renderer>(true); // Enable rendering: foreach (var component in rendererComponents) { component.enabled = false; } } 

¬°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); // Enable rendering: foreach (var component in rendererComponents) { component.enabled = false; } //Trigger our event OnTrackingLostEvent.Invoke(); } 

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?

Source: https://habr.com/ru/post/440592/


All Articles