User Interface de Unity: EventSystem
14/02/2019

User Interface de Unity: EventSystem

Programación y Diseño Web

En los últimos años Unity ha ido realizando una serie de avances y de mejoras que han marcado una gran diferencia respecto a versiones anteriores. Una de las partes en las que se trabajó para lograr este cambio de calidad en la versión 5 de Unity fue en la interfaz de usuario (UI: User Interface). 

 

¿Qué es realmente el EventSystem?

Como su nombre indica no es más que un sistema de gestión de eventos. Es decir, es un sistema complejo en el que los la entrada de datos (inputs) se combinan con raycasting (método en el que se traza una línea de un punto a otro y se detecta si en ese camino entre los dos puntos se encuentra algún objeto de por medio).  

Raycasting in Unity

Cuando añadimos un Canvas para crear al UI de nuestra escena en Unity, veremos que al Canvas se le añade de forma automática el componente Graphic Raycaster. Este componente es el que nos permitirá poder detectar si trazando ese rayo desde el punto indicado vamos a interactuar con algún objeto que forme parte del interfaz de usuario. Unity ofrece otra variedad de componentes de Raycasting como pueden ser: Physics Raycaster, nos permite detectar rayos sobre objetos 3D; Physics 2D Raycaster, que realizará lo mismo pero en este caso con objetos en 2D; Base Raycaster, que nos permitirá crear a partir de código nuestros propios sistemas de Raycasting.

Inputs en Unity

Para poder detectar entre qué puntos se basa a lanzar ese rayo, Unity hace uso de diferente hardware. Es decir, podemos controlar la entrada de datos a través del teclado, el ratón, los touches en una pantalla táctil, etc. Para las entradas de datos más comunes (los 3 ejemplos que hemos enumerado antes) Unity ha creado su propio sistema de control, haciendo que todas las acciones que realicemos con estos dispositivos sean analizadas por el mismo componente.

Cuando creemos un Canvas en nuestra escena veremos que de forma automática Unity añadirá también un objeto llamado EventSystem, este objeto será el encargado de gestionar esas entradas de datos, y de generar los eventos necesarios si se produce alguna interacción (la colisión de un rayo con un objeto de UI). Veremos que el objeto EventSystem tiene un componente de tipo Input Module (Standalone si estamos trabajando en un proyecto de tipo Standalone como podría ser para PC o Mac, o Touch si estamos trabajando en un proyecto para dispositivos móviles como podría ser Android o IOs).

Como hemos visto antes, estos módulos también poseen una versión Base, que nos servirá para poder crear nuestros propios módulos de gestión de entrada de datos. Hay que decir también que podemos combinar los diferentes tipos de módulos, es decir, podemos tener que un mismo EventSystem tenga un Standalone Input Module y un Touch Input Module, así el sistema nos permitiría interpretar los eventos generados en las versiones móviles y en las versiones standalone.

 

Gracias al EventSystem podemos detectar una gran variedad de eventos como pueden ser entre otros:

 

- PointerEnter: Parecido a los OnTriggerEnter o los OnColliderEnter, nos detecta cuando el cursor ha entrado en la zona de componente de UI

- PointerExit: Funciona igual que el anterior pero detectando cuando el cursor sale del componente de UI

- PointerDown: Detecta cuando hemos hecho clic con el ratón o hemos hecho touch sobre el control de UI.

- PointerUp: Detecta cuando hemos dejado de hacer clic con el ratón o hemos levantado el touch del control de UI.

- Drag: Cuando sin soltar el control de UI desplazamos el ratón o el mouse.

- Drop: Cuando soltamos el control de UI después de habernos desplazado.

- Scroll: Cuando realizamos la acción de scroll con la rueda del ratón.

- UpdateSelected: Cuando se actualiza el contenido de un control, como podría ser el texto del mismo.

 

Para poder usar estos eventos debemos definir triggers (disparadores) que son los encargados de llamar a la función correspondiente según lo que tengamos que hacer para cada uno de los eventos deseados. Estos triggers se pueden definir a través de código, pero también se pueden definir a través de elementos de UI dentro del componente EventTrigger, algunos de los controles de UI ya implementan este componente de forma nativa.

No hemos comentado cómo podemos interactuar a nivel de código con el sistema de eventos de entrada de datos de Unity (EventSystem), este es un apartado complejo pero en el que realmente se puede sacar un mayor provecho del sistema

¿Qué opinas sobre el sistema de gestión de Inputs de Unity, el EventSystem? Déjanos tu comentario

 

Curso relacionado: Curso Superior de Diseño y Desarrollo de Videojuegos con Unity 3D

Comparte en:

Ingeniero Técnico en Telecomunicaciones. Trabaja actualmente como Lead Game Developer y Game Designer en una compañía de videojuegos.

plataforma para tu web
17/09/2020
Carlos Yañez

Cómo elegir una plataforma para tu web

Donde y como alojar nuestra web es una de las decisiones más importante tanto a nivel económico como de funcionalidad.
En el post de hoy veremos las diferentes...

Cross Site Scripting en Ciberseguridad
30/07/2020
Rubén Bellido

Qué es el Cross Site Scripting en Ciberseguridad

El Cross Site Scripting o conocido por sus siglas XXS es una técnica de ciberataque muy popular en Internet. ¿Conoces este tipo de ataque o has sido atacado alguna v...

mapa conceptual web
21/07/2020
Carlos Yañez

Cómo hacer un mapa conceptual de una web

En el post de hoy intentaremos ver cómo aplicar un mapa conceptual cuando estamos en la fase de diseño y definición de nuestra web con el fin de entender los benefi...