Cómo crear un juego de RA con la Fundación de RA de Unity

1. Descripción general

ARCore es el framework de Google para crear experiencias de realidad aumentada en smartphones. Puedes usar AR Foundation de Unity para compilar aplicaciones de RA multiplataforma.

Qué compilarás

En este codelab, compilarás un juego simple con AR Foundation. El objetivo del juego es recolectar paquetes con un auto que controlas con tu dispositivo portátil.

Sin embargo, esto no sucederá en un mundo completamente virtual. Combinarás átomos físicos y bits digitales para crear un nuevo tipo de experiencia de jugador creando un juego que comprenda el entorno que rodea al jugador.

Al final de este codelab, tu juego podrá hacer lo siguiente:

  • Detecta aviones del mundo real y dibuja un campo de juego sobre ellos.
  • Proyecta rayos desde la vista de la cámara y detecta intersecciones con planos.
  • Reacciona a las condiciones de iluminación del mundo real para darle más realismo a tu juego.

Qué aprenderás

  • Cómo configurar un proyecto que usa AR Foundation de Unity
  • Cómo usar ARPlaneManager para suscribirse a planes nuevos
  • Cómo usar Raycast para encontrar intersecciones con geometría virtual
  • Cómo usar ARLightEstimationData para iluminar la escena

Requisitos

2. Configura tu entorno de desarrollo

En este paso, prepararás tu entorno para el desarrollo con AR Foundation de Unity.

Asegúrate de que tu dispositivo sea compatible con la RA

Las experiencias de RA en dispositivos Android se ejecutan con ARCore, que está disponible en dispositivos compatibles con ARCore. Asegúrate de que tu dispositivo de desarrollo sea compatible con la RA. También puedes usar una instancia de Android Emulator compatible con AR configurada correctamente.

Cómo configurar la depuración por USB en tu dispositivo

Deberás habilitar las Opciones para desarrolladores en tu dispositivo para ejecutar apps de depuración. Si aún no lo hiciste, consulta la documentación de Android sobre cómo habilitar las opciones para desarrolladores y la depuración por USB.

Instala Unity (2020.3 LTS)

En tu estación de trabajo, instala Unity 2020 LTS. En este codelab, se muestran capturas de pantalla de la IU de Unity en la versión 2020.3 (LTS). Es posible que otras versiones de Unity funcionen, pero pueden requerir pasos adicionales. Es posible que se vea diferente a las capturas de pantalla que se muestran aquí.

Crea un proyecto nuevo

Crea un proyecto nuevo con la plantilla Universal Render Pipeline. Asigna un nombre descriptivo y una ubicación adecuada, y presiona CREAR.

Instala los frameworks requeridos

Puedes encontrar AR Foundation de Unity en Unity Package Manager.

  1. Para abrirlo, haz clic en Window > Package Manager.

  1. En esta ventana, instala los paquetes que usarás en este codelab. Para ver las versiones más recientes de estos frameworks, expande su entrada con el ícono ►. Instala las versiones más recientes de cada uno de estos frameworks:
    • AR Foundation
    • Complemento XR de ARCore

Cuando termines, el Administrador de paquetes debería verse de la siguiente manera:

Instala el paquete inicial

Para este codelab, proporcionamos un paquete de inicio que contiene prefabs y secuencias de comandos que acelerarán algunas partes del codelab para que puedas concentrarte en cómo usar AR Foundation.

  2. Para instalar el paquete de inicio, abre Assets > Import Package > Custom Package… y abre starter-package.unitypackage.
  3. En la ventana emergente, asegúrate de que todo esté seleccionado.
  4. Haz clic en Importar.

Cómo cambiar la configuración de compilación

Como la aplicación se ejecutará en Android, cambia la plataforma de compilación a Android:

  1. Abre File > Build Settings.
  2. En el panel Platform, selecciona Android.
  3. De manera opcional, habilita Development Build y Script Debugging para conservar la información de depuración mientras se ejecuta tu app.
  4. Haz clic en Switch Platform.

Cómo cambiar la configuración del proyecto

AR Foundation debe configurarse para inicializar los sistemas de XR durante el inicio.

  1. Abre Edit > Project Settings… y haz clic en la sección XR Plug-in Management.
  2. En la pestaña Android, habilita ARCore.

  1. En el panel de la izquierda, haz clic en la sección Reproductor.
  2. En la pestaña Android, en Other Settings, quita Vulkan de Graphics APIs.

  1. Las apps que requieren RA y usan ARCore requieren un nivel de API mínimo de 24. Desplázate hacia abajo y busca Minimum API Level. Establece el nivel de API mínimo en 24.

Agrega los elementos de escena necesarios

La plantilla de Universal Render Pipeline incluye algunos objetos del juego que no usarás en este instructivo.

  1. Borra todos los objetos del juego en SampleScene.

  1. Agrega objetos de AR Foundation. Haz clic con el botón derecho en el panel Hierarchy. Usa este menú para agregar lo siguiente:
  • XR > AR Session: Este objeto controla el ciclo de vida de una experiencia de RA.
  • XR > AR Session Origin: Este objeto transforma las coordenadas de RA en coordenadas del mundo de Unity.
  • Luz > Luz direccional: Proporciona una fuente de luz para iluminar los objetos del juego.

Tu jerarquía debería verse de la siguiente manera:

  1. Expande el objeto AR Session Origin que creaste en la jerarquía y selecciona el objeto AR Camera. En el inspector, cambia su etiqueta a MainCamera.

Configura la renderización

La canalización de renderizado universal de Unity necesita un cambio para ser compatible con AR Foundation.

  1. En el panel Project, navega por Assets > Settings para encontrar el recurso ForwardRenderer.

  1. Selecciona ForwardRenderer.
  2. En el panel Inspector, usa Add Renderer Feature para agregar un AR Background Renderer Feature. Este componente renderizará la transmisión de la cámara en tu escena.

Verifique la configuración

  1. Asegúrate de que el dispositivo esté enchufado y de que la depuración por ADB esté activada.
  2. Haz clic en File > Build And Run…. Esto subirá la aplicación a tu dispositivo y la iniciará cuando se haya instalado.
  3. Deberías ver el feed de la cámara en la pantalla del dispositivo.

En el siguiente paso, comenzarás a agregar funcionalidad a tu app.

3. Cómo detectar planos en el mundo real

Ahora que se configuró una escena básica, puedes comenzar a desarrollar el juego. En este paso, detectarás planos y los dibujarás en la escena.

Agrega un componente ARPlaneManager

Un objeto ARPlaneManager detecta objetos ARPlane y crea, actualiza y quita objetos del juego cuando cambia la comprensión del entorno por parte del dispositivo.

  1. Con el panel Hierarchy, crea un GameObject vacío.
  2. Cámbiale el nombre a Driving Surface Manager. Este componente mostrará aviones hasta que el jugador seleccione uno.
  3. Selecciona el nuevo objeto del juego. En el panel Inspector, haz clic en Add Component para agregar un AR Plane Manager.

  1. Configura ARPlaneManager estableciendo el campo Plane Prefab:
    1. Haz clic en el botón junto a None para que aparezca la ventana Select GameObject.
    2. Selecciona la pestaña Assets y busca Driving Surface Plane.

Este prefab del paquete de inicio proporciona una textura de piso arenosa que se usará como decoración del plano.

  1. Cambia Detection Mode a Horizontal. Esto configura el ARPlaneManager para que solo proporcione planos horizontales, lo que es ideal para conducir.

Agrega un componente ARRaycastManager

Un ARRaycastManager expone la funcionalidad de raycast. En el siguiente paso, usaremos este objeto para proporcionar los controles al usuario.

  1. Asegúrate de que el objeto llamado Driving Surface Manager esté seleccionado en el panel Hierarchy.
  2. En el Inspector, haz clic en Add Component para agregar un componente ARRaycastManager a tu objeto de juego.

No se requiere ninguna configuración adicional para este componente.

Agrega un componente de DrivingSurfaceManager

Un DrivingSurfaceManager es un script de ayuda del paquete de inicio que permite seleccionar un ARPlane. Una vez que se selecciona un ARPlane, se ocultan todos los demás planos y se inhabilitan los planos nuevos.

  1. Asegúrate de que el objeto llamado Driving Surface Manager esté seleccionado en el panel Hierarchy.
  2. En el Inspector, haz clic en Add Component para agregar un componente DrivingSurfaceManager a tu objeto de juego.

No se requiere ninguna configuración adicional para este componente.

Ejecuta la app

  1. Haz clic en File > Build And Run… para probar los cambios.
  2. Apunta el dispositivo hacia una superficie horizontal del mundo real y muévelo para mejorar la comprensión del mundo por parte de ARCore.

  1. Cuando ARCore detecte un plano, deberías ver una textura de tierra que cubre las superficies del mundo real. ARPlaneManager crea una instancia del Plane Prefab determinado para cada plano detectado. El arquetipo Driving Surface Plane tiene un componente ARPlaneMeshVisualizer que crea una malla para un ARPlane determinado.

En el siguiente paso, usarás un plano detectado como campo de juego.

4. Realiza una prueba de posicionamiento en los planos detectados

En el paso anterior, programaste una aplicación que puede detectar aviones. Estos planos se reflejan en la escena del juego. Ahora, agregarás interactividad con estos planos creando una mira y un automóvil que conducirá sobre la superficie del plano detectado.

Crea un retículo de puntería

El esquema de control de esta app implica que el jugador apunte el teléfono hacia una superficie. Para brindar comentarios visuales claros sobre la ubicación designada, usarás un retículo de puntería.

Para "pegar" esta retícula a un plano de RA, usa una prueba de posicionamiento. Una prueba de impacto es una técnica que calcula las intersecciones cuando se proyecta un rayo en una dirección determinada. Usarás una prueba de detección de intersección en la dirección de la vista de la cámara.

Agrega el retículo

  1. En el panel Project, cerca de la parte inferior de la pantalla, ve a Assets > Starter Package.
  2. Coloca el prefab de retículo en la escena arrastrándolo al panel de jerarquía del proyecto.
  3. Selecciona la retícula en la jerarquía.
  4. En el inspector, haz clic en Add Component. Agrega la secuencia de comandos ReticleBehaviour del paquete de inicio. Esta secuencia de comandos contiene código estándar para controlar la retícula.
  5. La secuencia de comandos ReticleBehaviour depende del Driving Surface Manager que creaste antes, por lo que debes agregar la dependencia haciendo clic en el selector de Driving Surface Manager. Selecciona la pestaña Escena y elige el Driving Surface Manager.

Edita el ReticleBehaviour

La secuencia de comandos ReticleBehavior posicionará el retículo en el plano que se encuentra en el centro de la ventana gráfica del dispositivo.

  1. Abre la secuencia de comandos ReticleBehaviour.cs haciendo doble clic en el campo Script.
  2. Determina el centro de la pantalla con Camera's ViewToScreenPoint. Edita el método Update() para agregar lo siguiente:
var screenCenter = Camera.main.ViewportToScreenPoint(new Vector3(0.5f, 0.5f));
  1. Usa este punto para realizar un raycast. Agrega lo siguiente:
var hits = new List<ARRaycastHit>();
DrivingSurfaceManager.RaycastManager.Raycast(screenCenter, hits, TrackableType.PlaneWithinBounds);

La variable hits contendrá objetos ARRaycastHit que describen puntos en los objetos de seguimiento que se intersecan con ray.

  1. Determina el punto de intersección de interés consultando la lista de hits. Prioriza el plano bloqueado que se incluye en DrivingSurfaceManager y, si no existe, usa el primer plano alcanzado. Agrega lo siguiente al final de Update():
CurrentPlane = null;
ARRaycastHit? hit = null;
if (hits.Length > 0)
{
    // If you don't have a locked plane already...
    var lockedPlane = DrivingSurfaceManager.LockedPlane;
    hit = lockedPlane == null
        // ... use the first hit in `hits`.
        ? hits[0]
        // Otherwise use the locked plane, if it's there.
        : hits.SingleOrDefault(x => x.trackableId == lockedPlane.trackableId);
}
  1. Si hit contiene un resultado, mueve la transformación de este GameObject a la posición de impacto.
if (hit.HasValue)
{
    CurrentPlane = DrivingSurfaceManager.PlaneManager.GetPlane(hit.Value.trackableId);
    // Move this reticle to the location of the hit.
    transform.position = hit.Value.pose.position;
}
Child.SetActive(CurrentPlane != null);

Cómo probar la retícula

  1. Haz clic en File > Build And Run… para probar los cambios.
  2. Cuando apuntes el dispositivo hacia un plano, deberías ver que el retículo sigue los movimientos de la cámara.

Crea un automóvil

El jugador controlará un auto de juguete que se dirigirá hacia la ubicación de la retícula. En el paquete de inicio, se proporcionan un modelo y un comportamiento para este automóvil.

Agrega un CarManager a tu escena

  1. En la Hierarchy, crea un GameObject vacío nuevo.
  2. Cámbiale el nombre a Car Spawner.
  3. Selecciona el objeto que creaste. En el panel Hierarchy, haz clic en Add Component para agregar el componente CarManager.
  4. Haz clic en el selector de cada campo para configurar las dependencias de CarManager:
    • Car Prefab: En Assets, selecciona Car Prefab.
    • Reticle: En Scene, selecciona Reticle Prefab.
    • Driving Surface Manager: En Scene, selecciona Driving Surface Manager.

Este comportamiento de CarManager genera un auto de juguete en el plano en el que se encuentra la retícula. Si quieres, consulta el script CarBehaviour para saber cómo se programó el auto.

Prueba de conducción

  1. Haz clic en File > Build And Run para probar los cambios.
  2. Cuando presiones un plano, deberías ver un automóvil pequeño en esa ubicación. El auto seguirá la retícula.

Agrega el elemento del juego

Ahora que el jugador puede controlar una entidad en la escena, asígnale un destino al que conducir.

  1. Crea un nuevo GameObject vacío en la jerarquía.
  2. Cámbiale el nombre a Package Spawner.
  3. Selecciona el objeto que creaste. En el panel Hierarchy, haz clic en Add Component para agregar el componente PackageSpawner.
  4. Haz clic en el selector de cada campo para configurar las dependencias de PackageSpawner:
    • Prefab de paquete: En Assets, selecciona Prefab de paquete.
    • Driving Surface Manager En Scene, selecciona Driving Surface Manager.

Este comportamiento de PackageSpawner genera un paquete nuevo en una ubicación aleatoria en un ARPlane bloqueado si aún no hay un paquete.

Prueba el juego

  1. Haz clic en File > Build And Run para probar los cambios. 2. Después de crear un automóvil, debería aparecer un paquete.
  2. Conduce tu auto hasta el paquete.
  3. Aparecerá uno nuevo en una ubicación aleatoria.

5. Configura la Estimación de iluminación

Ahora que completaste el juego básico, agrega un toque de realismo a tu escena de RA. En este paso, usarás la API de Lighting Estimation de ARCore para detectar la iluminación presente en el mundo real según los fotogramas de la cámara entrantes. Esta información se usará para adaptar la iluminación de la escena y que coincida con la iluminación del mundo real.

Habilita la estimación de iluminación

  1. En Hierarchy, expande AR Session Origin y selecciona el objeto AR Camera.
  2. En el Inspector, expande la secuencia de comandos AR Camera Manager.
  3. Cambia el campo Estimación de iluminación a Todo.

Cómo modificar la luz direccional

  1. En Hierarchy, selecciona el objeto Directional Light.
  2. Agrega el componente LightEstimation. Este componente del paquete de inicio proporciona código estándar para suscribirse a los cambios de iluminación.
  3. En la función FrameReceived(), agrega lo siguiente:
ARLightEstimationData lightEstimation = args.lightEstimation;

if (lightEstimation.averageBrightness.HasValue)
    Light.intensity = lightEstimation.averageBrightness.Value;

if (lightEstimation.averageColorTemperature.HasValue)
    Light.colorTemperature = lightEstimation.averageColorTemperature.Value;

if (lightEstimation.colorCorrection.HasValue)
    Light.color = lightEstimation.colorCorrection.Value;

if (lightEstimation.mainLightDirection.HasValue)
    Light.transform.rotation = Quaternion.LookRotation(lightEstimation.mainLightDirection.Value);

if (lightEstimation.mainLightColor.HasValue)
    Light.color = lightEstimation.mainLightColor.Value;

if (lightEstimation.mainLightIntensityLumens.HasValue)
    Light.intensity = lightEstimation.averageMainLightBrightness.Value;

if (lightEstimation.ambientSphericalHarmonics.HasValue)
{
    RenderSettings.ambientMode = AmbientMode.Skybox;
    RenderSettings.ambientProbe = lightEstimation.ambientSphericalHarmonics.Value;
}

Prueba tus cambios

  1. Haz clic en File > Build And Run para probar los cambios.
  2. Cuando mires los objetos en la escena, notarás que tienen color según la iluminación del entorno.
  3. Si es posible, intenta modificar la iluminación. Por ejemplo, intenta apagar las luces de la habitación en la que te encuentras. Deberías ver cómo la iluminación de los objetos se adapta al cambio en la iluminación del mundo real.

6. Conclusión

¡Felicitaciones! Llegaste al final de este codelab sobre AR Foundation de Unity.

Temas abordados

  • Cómo configurar un proyecto básico con AR Foundation de Unity y el canal de renderizado universal
  • Cómo usar ARPlaneManager para suscribirse a planes nuevos
  • Cómo usar Raycast para encontrar intersecciones con la geometría virtual.
  • Cómo usar ARLightEstimationData para iluminar la escena

Próximos pasos

Tareas adicionales

Si quieres expandir el juego que creaste aquí, estas son algunas ideas que puedes seguir:

  • Agrega un contador de puntuación a tu juego modificando un TextMeshPro cuando un PackageManager genera un paquete nuevo.
  • Habilita la superposición de rendimiento para consultar la información de rendimiento cuando se ejecute tu juego.
  • Primero, usa Raycasts persistentes para colocar objetos nuevos en la escena. Cuando se detecte un plano en esa área, el objeto se actualizará para ajustarse a ese plano.