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.

Tutorial de Photoshop: como corregir imágenes
29/03/2019

Tutorial de Photoshop: como corregir imágenes

En éste post de daremos las claves para un buen retoque, no excesivo con herramientas y filtros en Photoshop.

Variables y funciones de scripting en Unity
13/03/2019
Jordi Mula

Variables y funciones de scripting en Unity

na de las partes más complicadas pero a la vez más importantes en el desarrollo del juego es la programación del mismo. Vamos a ver una pequeña introducción al sc...

10 consejos para mejorar tu perfil profesional
20/02/2019
Susana Chamorro

10 consejos para mejorar tu perfil profesional

Si estás interesado/a en mejorar tu perfil profesional hoy este post te interesará.