Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development

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

by
Read Time:12 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
Create a Pokémon GO Style Augmented Reality Game With Vuforia: Image Targets

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

En el post anterior de ésta serie, aprendimos cómo configurar Vuforia y comenzamos a desarrollar un juego de RA (Realidad Aumentada) desde cero, adoptando una lógica similar a la utilizada en Pokémon Go!

Hemos comenzado a desarrollar un juego de Realidad Aumentada llamado Shoot the Cubes (Dispárale a los Cubos). Ahora es momento de mejorar el juego al agregar interacción y hacer la experiencia más adictiva. Nos concentraremos principalmente en las posibilidades que nos ofrece Unity, dejando a un lado las especificaciones de Vuforia. Tener experiencia con el motor de Unity no es un requisito.

1. Haciendo que los Cubos cobren Vida

Comencemos a trabajar en nuestro juego. Hasta ahora hemos logrado crear una escena de Realidad Aumentada que se mueve con el dispositivo del usuario. Mejoraremos ésta aplicación al hacer que se generen los cubos y vuelen, y al permitir al jugador buscarlos y destruirlos con un disparo láser.

1.1. Generando los Elementos

Ya hemos establecido una posición inicial del _SpawnController de acuerdo a la rotación de la cámara del dispositivo. Ahora estableceremos una área alrededor de éste punto donde se generarán nuestros cubos. Ahora actualizaremos el SpawnScript para hacer que _SpawnController instancie los elementos cubos con diferentes tamaños y posiciones aleatorias, relativas a _SpawnController.

Editemos la clase SpawnScript, añadiendo algunas variables al control del proceso de generación.

Crearemos una corrutina llamada SpawnLoop para gestionar el proceso de generación. También será responsable de establecer la posición inicial del _SpawnController cuando el juego inicia. Nota que el método Random.insideUnitSphere causa que los cubos sean instanciados en ubicaciones aleatorias dentro de una área esférica alrededor del _SpawnManager.

Finalmente, editamos la función Start(). Asegúrate de remover la línea de StartCoroutine(ChangePosition() ); y remplazarla con una llamada para iniciar la corrutina SpawnLoop.

Ahora de regreso en Unity tendrás que crear un prefab cube (cubo) para ser instanciado por el script.

  • Crea un directorio llamado Prefabs en la ventana Project.
  • Cambia la escala del elemento Cube (cubo) en todos los ejes a 1 y cambia la rotación a 0 en todos los ejes.
  • Arrastra el Cube al directorio Prefabs.
  • Borra el Cube (cubo) de la ventana Hierarchy.
  • Selecciona el _SpawnController y arrastra el prefab Cube desde el directorio Prefabs al campo M Cube Obj, localizado en el área SpawnScript del inspector.


Finalmente, borra la Sphere (esfera) localizada dentro del _SpawnManager.

Ahora, si presionas reproducir en Unity y ejecutas el proyecto en el dispositivo, deberías ver los cubos generándose.

1.2. Rotando los Cubos

Necesitamos agregar movimiento a esos cubos para hacer las cosas más interesantes. Rotemos los cubos alrededor de sus ejes y sobre el ARCamera. También sería magnífico agregar algún factor aleatorio sobre el movimiento del cubo para crear una sensación más orgánica.

Arrastra el Prefab Cube desde el directorio Prefabs a la ventana hierarchy (jerarquía).

  • En el directorio Scripts crea un nuevo C# Script llamado CubeBehaviorScript.
  • Arrastra el Script al prefab Cube y ábrelo para editarlo.

Cada cubo tendrá características aleatorias. El tamaño, velocidad de rotación y dirección de rotación serán definidas aleatoriamente, usando algunas referencias previamente establecidas. Creemos algunas variables del controlador e inicialicemos el estado del cubo.

Ahora es momento de añadir algo de movimiento a nuestro cubo. Hagámoslo rotar alrededor de sí mismo y alrededor del ARCamera, utilizando la velocidad y la dirección de la rotación definida antes.

Para hacerlo más orgánico, el cubo se escalará del tamaño cero después de que es generado.

2. Bucando y Destruyendo

Esos cubos son demasiado felices volando de esa manera. ¡Debemos destruirlos con disparos láser! Creemos un arma en nuestro juego y comencemos a dispararles.

2.1. Disparando un Láser

El disparo del láser debe estar conectado al ARCamera y a su rotación. Cada vez que el jugador 'presiona' la pantalla del dispositivo, un láser será disparado. Usaremos la clase Physics.Raycast para verificar si el láser impactó el objetivo y si fue así mermaremos su salud.

  • Creemos un nuevo objeto vacío llamado _PlayerController y otro objeto vacío llamado _LaserController dentro de él.
  • Agreguemos un C# script llamado LaserScript dentro del directorio Scripts y lo arrastramos a _LaserController.

Dentro de LaserScript, usaremos un LineRenderer para mostrar el rayo láser, usando un punto de origen conectado a la parte inferior del ARCamera. Para obtener el punto de origen del rayo láser_el cañón del arma virtual-obtendremos el Transform de la cámara en el momento cuando un láser es disparado y lo mueve 10 unidades hacia abajo.

Primero, creemos algunas variables para controlar los ajustes del láser y obtener mLaserLine.

La función responsable para disparar es Fire() . Esa será llamada cada vez que el jugador presione el botón fire. Nota que Camera.main.transform está siendo usado para obtener la posición y la rotación de ARCamera y que el láser esté posicionado 10 unidades abajo de ella. Ésto posiciona al láser en la parte inferior de la cámara.

Pare verificar si el objetivo fue impactado, utilizaremos un Raycast.

Por último, es tiempo de verificar si el botón de disparar fue presionado y llama a los efectos del láser cuando el disparo es ejecutado.

De regreso en Unity necesitaremos añadir un componente LineRenderer al objeto _LaserController.

  • Selecciona _LaserController y en la ventana Inspector, haz click en Add Component. Nómbralo "Line Renderer" y selecciona el nuevo componente.
  • Crea un nuevo directorio llamado Materials, y crea un nuevo material dentro de él llamado Laser.
  • Selecciona el material Laser y cámbialo a cualquier color que desees.
  • Selecciona el _LaserController y arrastra el material Laser al campo Materials del componente LineRenderer.
  • Aún en LineRenderer, bajo Parameters establece Start With en 1 y End With en 0.

Si pruebas el juego ahora deberías ver un láser siendo disparado desde la parte inferior de la pantalla. Si gustas agrega un componente AudioSource con un efecto de soido láser a _LaserController para aderezarlo.

2.1. Impactando los Cubos

Nuestros láseres necesitan impactar sus objetivos, infligir daño y eventualmente destruir los cubos. Necesitaremos agregar un RigidBody a los cubos, aplicar fuerza y daño contra ellos.

  • Drag (Arrastra) el prefab Cube desde el directorio prefabs a cualquier lugar en el Stage (Escenario).
  • Select (Selecciona) el Cube y selecciona Add Component en la ventana Inspector. Nombra el nuevo componente "RigidBody" y selecciónalo.
  • En el componente RigidBody establece Gravity y Is Kinematic en Off.
  • Aplica esos cambios en el prefab.

Ahora editemos el script CubeBehavior para crear una función que se encargará de infligir daño al cubo y otra para destruirlo cuando la salud caiga debajo de 0.

Bueno, el cubo puede ser dañado y destruído. Editemos el LaserScript para infligir daño al cubo. Todo lo que tenemos que hacer es cambiar la función Fire() para llamar al método Hit del script CubeBehavior.

3. Conclusión

¡Felicidades! ¡Nuestro juego de Realidad Aumentada está terminado! Si, el juego puede ser más prolijo, pero las bases están ahí y la experiencia general es muy adictiva. Para hacerlo más interesante pudieras añadir una explosión de partículas como lo hice en el video, y también, podrías agregar un sistema de marcador o incluso un sistema de onda con un temporizador para hacerlo más desafiante. ¡Los próximos pasos te corresponden a tí!

3.1. ¿Qué sigue?

Creamos un interesante experimento de RA usando Vuforia en Unity, sin embargo aún tenemos muchas funcionalidades sensacionales que cubrir. No vimos ninguno de los recursos más sofisticados de Vuforia: Targets, Smart Terrain, Cloud, etc. Mantente al tanto de los próximo tutoriales, donde cubrirermos más de esas características, siempre usando el mismo planteamiento paso por paso.

¡Nos vemos pronto!

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.