Bienvenido a este Codelab sobre cómo agregar interacciones personalizables en Spatial. Al construir un metaverso, es fundamental poder añadir interacciones adaptadas al tipo de metaverso que estés creando. En este Codelab, aprenderás a incorporar interacciones que se activan mediante un trigger utilizando el SDK de Spatial en Unity. Estas interacciones pueden configurarse a través de funciones predefinidas de los GameObjects, mediante animaciones o mediante la creación de scripts para manipular el comportamiento de la interacción.

En Spatial puedes personalizar las interacciones a través de el objeto Interactable o Trigger Event. Un trigger event en Spatial es un evento que se activa cuando un objeto con un collider marcado como trigger detecta la entrada, permanencia o salida de otro objeto dentro de su área de influencia. En otras palabras, un trigger es una zona de interacción invisible en el espacio 3D que no bloquea ni colisiona físicamente con otros objetos, pero que puede registrar cuándo otros objetos la atraviesan. Estos eventos se utilizan para desencadenar acciones en el metaverso, como activar animaciones, reproducir sonidos, o añadir otro tipo de interacción.

Para agregar un trigger event da click derecho sobre la ventana Hierarchy -> Spatial -> Trigger Event. Esto pondrá en escena un rayo el cual corresponde a la interacción personalizada que posteriormente vas a construir.

En Spatial un Interactable es un compponente con el cual los usuarios pueden interactuar basados en proximidad. Para añadirlo a tu escena basca con dar click derecho sobre la ventana Hierarchy -> Spatial -> Interactable.

Para esta interacción puedes hacer que una vez el usuario llegue a un punto de interés en tu metaverso, la forma en como está iluminado cambie para que le permita ver con más claridad los objetos. Esta función se puede activar mediante un trigger event en la ubicación deseada.

Para esta interacción, primero debes añadir el Trigger Event, puedes darle un nombre reconocible. Luego lo ubicas en el área deseada y le cambias el tamaño del collider para que detecte al usuario cuando se aproxima.

Después, debes añadir un tipo de luz, en este caso agregaremos un Spot Light. Para ello, da click derecho en la ventana de jerarquía y selecciona Light -> Spot Light. Luego la ubicas en el punto deseado. Ahora, es momento de configurar las características de la luz en la ventana inspector como se ve en la siguiente imagen.

Luego, seleccionas tu trigger event y te diriges a la ventana Inspector para añadir el evento de entrada.

Una vez creado el evento de entrada, arrastra el GameObject de la luz hasta el Unity Event y, en el espacio de la función, selecciona Light -> bool enabled. Marca la casilla que aparece para indicar que, al activarse este evento, la luz se encienda. Realiza este procedimiento como se muestra en la siguiente imagen.

Repite el mismo proceso para el On Exit Event para desactivar la luz una vez el usuario salga del espacio. Solo que esta vez, dejas desmarcada la casilla que aparece junto al espacio donde se vincula el GameObject.

Para que al cargar la escena la luz se encuentre apagada, selecciona el GameObject de la luz en la jerarquía y desmarca la siguiente opción en el inspector.

Es hora de probar tu escena en Spatial.

Otra interacción que puedes construir es que cuando el usuario entre a un espacio específico los objetos cercanos puedan flotar a su alrededor. Este tipo de interacción puede funcionar para metaversos con temática fantástica. Para ello, vas a hacer flotar las flores de un florero que está decorando la escena. Esta interacción se construye a través de una animación.

Para comenzar, agrega el Trigger Event a la escena y colócalo en la posición deseada. También puedes ajustar su escala para ampliar el área de interacción y facilitar el acceso al usuario.

Luego, debes crear la animación de las flores. Para ello dirígete a Window -> Animation -> Animation.

Ahora, selecciona el GameObject al cual le quieres crear la animación y selecciona Create, tal y como se muestra en la imagen.

Después, selecciona Add Property, el objeto del florero que se quiere animar, luego transform y finalmente position. Esto para cambiar la posción de cada una de las flores.

Puedes comenzar a ubicar tus fotogramas clave de transformación dependiendo el efecto que quieras lograr.

Ahora, puedes repetir ese proceso para cada uno de los elementos del florero que quieras animar.

Ahora dirígete a la venta Project y busca el Animator. Este animator lo puedes identificar con el nombre del GameObject que animaste. Da doble click sobre este para abrirlo.

Se abrirá la siguiente ventana, ahora añadiremos un estado en reposo para que siempre que cuando el usuario se acerque al trigger event esta animación se detenga.

Para crear el estado en reposo da click derecho, luego Create State -> Empty y cambia el nombre a Reposo.

Ahora, crea las transiciones entre el estado flotar y reposo tal como se muestra en la siguiente imagen. Adicionalmente, marca el estado Reposo como el estado por defecto de la animación, de esta manera la animacion no iniciará hasta que el usuario entre a la zona del trigger event.

Luego, crea dos triggers para que la animación se detenga e inicie. Este proceso lo puedes ver en la siguiente imagen.

Después, añade los triggers a las condiciones de cada transición como se muestra en la siguiente imagen.

Vuelve a dar click sobre cada una de las lineas de transición y desmarca la opción en el Inspector Has Exit Time. Esto para que el estado de la animación solo dependa del trigger.

Ahora, vuelve a tu escena. En la ventana de jerarquía da click sobre tu trigger event y en la ventana Inspector agrega tu animación en la parte de On Enter Event como se muestra en la siguiente imagen.

Repite el mismo proceso para On Exit Event. Solo que esta vez el trigger es DejarFlotar.

Es momento de probar tu escena en Spatial.

Con el componente Interactable puedes hacer que el usuario active alguna interacción al oprimir una tecla en el computador o un botón en los controles del casco de realidad virtual. Para este ejemplo, vas a poder hacer que un objeto de la escena cambie de color al activar la interacción. Para iniciar agrega el componente Interactable desde la jerarquía como se muestra en la sección Trigger Event e Interactable de este Codelab. Luego, ajusta la posición del componente en el GameObject Vivi.

En la ventana Inspector verás los componentes modificables del objeto Interactable. Allí podrás modificar el radio de la zona de interactividad y el texto que va a aparecer como guia para el usuario. En esa ventana, ajusta el radio de la zona hasta el tamaño deseado y cambia el texto para mayor claridad.

Ahora, despliega la opción On Interact Event y crea un Unity Event y añade el GameObject Vivi.

Ahora, es momento de cambiar de color al GameObject, para ello, puedes duplicar el material que dal el color al GameObject y modificarlo.

Luego, puedes añadir el cambio de color al interactable.

Ya puedes probar la escena en Spatial.

¡Felicitaciones por completar este codelab sobre cómo agregar Interacciones personalizables en Spatial! Ahora sabes añadir interacciones con trigger a tu proyecto en Spatial. Esperamos que esta guía te haya sido de gran ayuda y te invitamos a seguir creando proyectos XR.