Advertisement
  1. Code
  2. Augmented Reality

Cree un juego de realidad aumentada de Estilo Pokémon GO con Vuforia: Objetivos de imagen

by
Read Time:19 minsLanguages:
This post is part of a series called Create a Pokémon GO Style Augmented Reality Game With Vuforia.
Create a Pokémon GO Style Augmented Reality Game With Vuforia: Part 2
Tips and Tricks for Augmented Reality With Unity and Vuforia

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En este tutorial volveremos a la biblioteca de Realidad Aumentada (AR) de Vuforia, explorando uno de sus recursos más interesantes: el objetivo de la imagen. Vamos a ampliar el juego Shoot the Cubes que creamos en lecciones anteriores, añadiendo un nuevo nivel donde el jugador necesita para defender su base de atacar cubos.

Este tutorial se puede completar solo, aunque si quieres una introducción a AR con Vuforia y Unity3D, echa un vistazo a las publicaciones anteriores de la serie.

Objetivos de imagen

Cualquier imagen puede ser una imagen de Vuforia. Sin embargo, cuanto más detallada e intrincada sea la imagen, mejor será reconocida por el algoritmo.

Muchos factores serán parte del cálculo de reconocimiento, pero básicamente la imagen debe tener un nivel razonable de contraste, resolución y elementos distintivos. Una fotografía del cielo azul no trabajaría muy bien, pero una imagen de una cierta hierba trabajaría agraciado. Los blancos de imagen se pueden enviar con la aplicación, se suben a la aplicación a través de la nube o se crean directamente en la aplicación por parte del usuario.

Cómo añadir un destino

Empecemos añadiendo un elemento ImageTarget a nuestro proyecto Unity.

Primero, descargue los recursos del curso desde el botón en la barra lateral. A continuación, en el proyecto Unity, cree una nueva escena llamada DefendTheBase: en la ventana Project, seleccione la carpeta Scenes y haga clic en Create > Scene. Ahora abra esa escena y elimine todos los objetos de escena predeterminados de la jerarquía.

A continuación agregaremos una luz y una cámara. Haga clic en Add > Light > Directional Light para añadir una luz direccional. Seleccione esta nueva luz y configure Soft Shadow como la opción Shadow Type.

Después de eso, arrastre y suelte un objeto ARCamera de Vuforia > Prefabs. Seleccione el objeto ARCamera y, en el panel del inspector, establezca la clave de App License Key creada en la página del desarrollador de Vuforia (consulte el primer tutorial para obtener instrucciones). Seleccione DEVICE_TRACKING para la World Center Mod.

Centro Mundial.Por último, arrastrar y soltar un ImageTarget a la jerarquía de Vuforia > Prefabs.

Ahora tenemos que añadir una base de datos de Vuforia. Primero, vaya a https://developer.vuforia.com/target-manager. Haga clic en Add Database y elija un nombre.

Hay tres tipos de base de datos para elegir:

  1. Device (Dispositivo): La base de datos se guarda en el dispositivo y todos los destinos se actualizan localmente.    
  2. Cloud: Base de datos en los servidores de Vuforia.    
  3. VuMark: Base de datos exclusiva para los objetivos de VuMark. También se guarda en el dispositivo.

En este caso, elija la opción Device (Dispositivo) y haga clic en create (crear).

Seleccione la nueva base de datos para poder comenzar a agregarle objetivos. Ahora es el momento de agregar objetivos a la base de datos. Por ahora, solo usaremos la opción de una sola imagen Single Image.

Navegue hasta los archivos previamente descargados, seleccione ImageTarget1 y establezca Width en 1 y haga clic en Add. (Nota: Si prefiere crear su propio objetivo de imagen, lea primero la guía).

Vuforia DatabaseVuforia DatabaseVuforia Database

Ahora puede descargar la base de datos, seleccionando Unity Editor como la plataforma elegida. Abra el archivo y seleccione todos los elementos a importar. También debemos preparar nuestra escena Unity para reconocer ImageTarget con esta base de datos que hemos creado.

En el editor Unity, haga clic en el objeto ImageTarget. En primer lugar, busque y expanda Image Target Behavior (Comportamiento de destino de imagen) en el inspector de objetos. Seleccione un Type de Predefined. Elija el destino de imagen que creamos anteriormente para la Database (base de datos). Finalmente, asegúrese de que las opciones Enable Extended Tracking (Habilitar seguimiento extendido) y Enable Smart Terrain (Habilitar terreno inteligente) estén deshabilitadas.

Image Target settingsImage Target settingsImage Target settings

El prefabricado ImageTarget está hecho de una serie de componentes, incluyendo algunos scripts como Image Target Behavior, Turn Off Behavior y Default Tracker Event Handler. Si desea comprender profundamente cómo funciona el sistema, lea esos scripts e intente comprender su relación con otros componentes.

Sin embargo, para este tutorial no excavaremos demasiado profundamente. Solo tendremos que concentrarnos en el Default Tracker Event Handler, que recibe llamadas cuando cambia el estado de seguimiento de destino de la imagen. Así que utilicemos este script como base para crear nuestro propio comportamiento de script.

Cree una copia de este script que podemos extender. Primero seleccione Default Tracker Event Handler, haga clic en options y seleccione Edit Script. Ahora, haga una copia del guión. Si utiliza MonoDevelop, haga clic en File > Save As Archivo y guárdelo como ImageTargetBehavior, guardándolo en la carpeta Scripts.

La Script TargetBehaviorScript

No necesitaremos el espacio de nombres Vuforia en nuestro script. Quite la línea "namespace Vuforia" y los corchetes. Esto significa que tendremos que hacer referencia explícita al espacio de nombres de Vuforia cuando queramos acceder a sus clases:

El método más importante en esta clase será el método OnTrackableStateChanged que recibe llamadas cuando el objetivo de la imagen es encontrado o perdido por el dispositivo de la cámara. De acuerdo con el estado de destino, llama a OnTrackingFound o OnTrackingLost, y tendremos que editar esos métodos también. Pero primero, pensemos en cómo queremos que el objetivo de la imagen se comporte.

En este juego, el usuario defenderá una base que aparece en un objetivo de imagen. Consideremos la siguiente mecánica del juego: 

  •   Una vez que el objetivo es reconocido por el sistema, la base aparece y los enemigos comienzan a desovar y volar hacia la base en un estilo kamikaze.
  • Cada vez que un enemigo golpea la base, la base tomará algún daño y el enemigo será destruido.
  • Para ganar el juego el usuario debe disparar y destruir a todos los enemigos antes de que la base se destruya.
  • Si el objetivo de la imagen se pierde (ya no es visible desde la cámara del dispositivo), el juego iniciará un temporizador de cuenta regresiva. Si el temporizador llega a cero, el juego se pierde. Mientras el objetivo se pierde, todos los enemigos dejarán de avanzar hacia la base.

Así que tendremos que adaptar la mecánica del juego a lo que hemos construido en el último tutorial. Vamos a crear la lógica de desove del enemigo en la siguiente sección con un objeto vacío denominado _SpawnController, usando la misma lógica adoptada en la primera parte del juego.

Por ahora, veamos el seguimiento de la lógica encontrada.

De vuelta en el editor Unity, podemos crear el objeto base que será generado por el controlador spawn.

En primer lugar, en el objeto ImageTarget, deshabilite la script Default Trackable Event Handler.

A continuación, haga clic en Add Component y seleccione el Target Behavior Script. En el panel de Hierarchy, haga clic con el botón derecho en ImageTarget y cree un cubo nuevo denominado "Base". Este cubo debe insertarse dentro del objeto ImageTarget.

Asegúrese de que la base tiene Box Collider y Mesh Renderer habilitados.

Opcionalmente, también podría insertar un objeto Plane dentro de ImageTarget usando la función ImageTarget enviada anteriormente en Vuforia como textura. Esto crearía un efecto interesante, proyectando sombras del objetivo y creando una experiencia más rica.

Hierarchy and Image Target final settingsHierarchy and Image Target final settingsHierarchy and Image Target final settings

Adaptación del SpawnScript

Ahora vamos a adaptar el _SpawnController utilizado en el último tutorial. Guardar la escena actual y abrir ShootTheCubesMain desde el último tutorial. En el panel Hierarchy, seleccione _SpawnController y arrástrelo a la carpeta Prefabs para convertirlo en Unity Prefab.

Guarde esta nueva escena y vuelva a abrir DefendTheBase. Arrastre _SpawnController de la carpeta de prefabricados al panel Hierarchy. Con el _SpawnController seleccionado, haga clic en  Add Tag en el panel Inspector. Asigne un nombre a la nueva etiqueta _SpawnController y aplíquela al objeto.

En la ventana Proyecto, seleccione el elemento Cube en la carpeta Prefab y establezca su Tag, de nuevo en su inspector, en 'Enemy'.

Set Cubes tag to EnemySet Cubes tag to EnemySet Cubes tag to Enemy

Por último, abra la carpeta Scripts y abra SpawnScript. Necesitamos hacer que este guión se adapte a la escena cargada.

A continuación, necesitamos crear dos métodos públicos para recibir llamadas de TargetBehaviorScript cuando se encuentra o pierde el destino:

  • Se llamará BaseOn (Vector3 basePosition) cuando la cámara encuentre el objetivo y se muestre el objeto Base. Cambiará la posición de desove, iniciará el proceso e informará a todos los cubos que se agregaron previamente a la etapa en que la base es visible.

  • El método BaseOff() se utilizará cuando se pierde el destino. Detendrá el proceso de estadificación e informará a todos los elementos del cubo que la base se ha perdido.

La posición de SetPosition (System.Nullable<Vector3> pos)utiliza la posición actual del objetivo para modificar los ejes y, x, y z del objeto y también puede recibir un valor nulo null cuando la escena cargada es ShootTheCubesMain.

InformBaseOnToCubes() e InformBaseOffToCubes() son responsables de informar a todos los cubos escalonados del estado base actual.

Los métodos SpawnLoop() y SpawnElement() utilizan casi la misma lógica que el último tutorial.

Creando los enemigos

Ahora tendremos que crear algunos enemigos. Utilizaremos el objeto Cube que creamos en el último tutorial, realizando algunas modificaciones en su script.

En la carpeta Prefabs, agregue un objeto Cube a la jerarquía. A continuación, seleccione el objeto y edite el CubeBehaviorScript.

Preservaremos casi la misma lógica en este script, pero con las siguientes diferencias:

  • El Cubo perseguirá a la Base cuando el objetivo sea encontrado por la cámara.
  • Cuando el Cube golpea la Base, se destruirá y causará algún daño a la Base.
  • El script necesita saber el nombre de la escena cargada y adaptarse en consecuencia.

Si el nombre de las escenas es DefendTheBase, debe encontrar el objeto Base y comenzar a moverse hacia él.

Los CubeSettings() también necesitan adaptarse de acuerdo a la escena cargada. El Cube sólo orbita en el eje y para la escena DefendTheBase.

Vamos a agregar alguna nueva lógica al método RotateCube(). Los objetos del cubo girarán alrededor de la base mientras el objetivo sea visible. Cuando el objetivo no está visible, continuarán girando alrededor de la cámara, utilizando la misma lógica que en el último tutorial.

Para mover el objeto hacia la base, debemos comprobar primero si la base está presente, y luego aplicar los pasos de posición al objeto.

El método DestroyCube() es el mismo que antes, pero ahora agregaremos un nuevo método -el método TargetHit (GameObject) que se llamará cuando se golpee la base. Tenga en cuenta que el BaseHealthScript referencia en TargetHit() no se ha creado todavía.

Finalmente, agregaremos los métodos públicos que se llamarán cuando el cubo tome un golpe, cuando choque con la base o cuando la base cambie de estado.

Controlar la salud de la base

Los enemigos están siendo escenificados y volando hacia la base, pero no causan ningún daño cuando chocan-ni a la base ni al enemigo. Necesitamos crear un script para responder a las colisiones y también para agregar una barra de salud a la pantalla, por lo que el usuario sabe lo bien que están haciendo.

Vamos a empezar a añadir la barra de salud. En el panel Hierarchy del editor Unity, haga clic en Create > UI > Slider. Se agregará un nuevo elemento de Canvas a la jerarquía. Contiene elementos de la interfaz de usuario, incluido el nuevo control deslizante. Expanda Canvas y seleccione el deslizador.

Cambie el nombre del elemento deslizante a UIHealth. En el panel Inspector, expanda Transformar Rect y fije Width a 400 y Height a 40. Ajuste Pos X a -220, Pos Y a 30 y Pos Z a 0.

Ahora expanda la secuencia de comandos deslizante en la jerarquía. Deseleccione la opción Interactable. Para el Target Graphic, haga clic en el pequeño "punto" en el lado derecho y seleccione la Background.

  • Establezca el valor mínimo Min Value en 0 y el valor máximo Max Value en 100.
  • Seleccione Números enteros Whole Numbers.
  • Establezca el valor Value en 100.
UIHealth SettingsUIHealth SettingsUIHealth Settings

Ahora, expanda el panel Deslizante para exponer sus elementos secundarios: Fondo Background, Área de relleno Fill Area y Handle Slide Area.

  • Eliminar área de la diapositiva de la manija Handle Slide Area.
  • Seleccione Fondo Background y ajuste su Color a un tono de color verde más oscuro, como # 12F568FF.
  • Expanda Área de relleno Fill Area y seleccione el objeto Relleno Fill y establezca su color en #7FEA89FF.

Éste es cómo la Game Window debe mirar con la barra de la salud.

Game window with health barGame window with health barGame window with health bar

El Script de base Health

El código es muy simple; Solo resta el daño hecho por los enemigos de la cantidad total de la salud. Una vez que la salud llega a cero, el jugador pierde el juego. También agregará una animación de rotación a la Base. Cree un nuevo script C# llamado MyBase.

Ahora necesitamos agregar y configurar el script.

Seleccione la base en la jerarquía, haga clic en Add Component y agregue una Audio Source. Ahora arrastre MyBase al elemento Base y, en el panel Inspector, expanda MyBase. Seleccione un efecto de sonido para la explosión y pulse. He utilizado el clip de explosión utilizado en el último tutorial, pero siéntase libre de añadir su propio. Finalmente, en el control Health Slider, seleccione el elemento UISlider.

Base settingsBase settingsBase settings

Defensa de la Base

Nuestra nueva experiencia de juego está casi terminada. Sólo necesitamos disparar algunos láseres para empezar a defender nuestra base. ¡Vamos a crear un script para el láser!

Primero arrastre el _PlayerController de la carpeta Prefab a la jerarquía. Expanda _PlayerController y seleccione _LaserController. En el panel Inspector, busque Laser Script y haga clic en Edit.

Lo único que necesitamos cambiar en este guión es la posición del láser.

Probando el juego

Eso fue un montón de trabajo, pero ahora es el momento de jugar el juego! Imprima la imagen de destino e intente ejecutar su juego en su teléfono o tableta. Diviértete un poco con él y ¡ve si puedes llegar a algunas maneras de mejorar el juego!

En este punto, usted tiene una buena comprensión de cómo funciona el sistema Vuforia y cómo usarlo con Unity. Espero que haya disfrutado de este viaje tanto como yo. ¡Te veo pronto!

Para obtener más información sobre Realidad Aumentada con Vuforia y Unity, echa un vistazo a nuestro curso de video aquí ¡en Envato Tuts+!

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.