Work with EventSystem in Unity. Basic things in working with UI

Hello! I haven’t written anything for a long time, but now I wanted to tell you about a very convenient piece that many people don’t know about. This is the Event System in Unity. Many, for tasks in which the EventSystem is very convenient, use the usual Raycast. I will talk about how to use part of the EventSystem functionality (there are actually a lot of it) and how this tool allows you to quickly solve many tasks related to processing events of interfaces and objects. As always with a repository with examples. If you're interested - welcome under the cat!



In this article I will analyze and provide examples of working with events IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler, IPointerClickHandler, IDragHandler, IBeginDragHandler, IEndDragHandler (the full list of events can be found here ).

What is EventSystem? EventSystem is the system responsible for handling different events in the scene. Basically it allows you to:
')

• Determine which GameObject is “selected”
• Manage input methods that are used
• Manage reykastingom

In more detail just in this article we will analyze the third point, since it is the easiest and most convenient to use.

From the point of view of reykast, there are three main components in EventSystem:

• Graphic Raycaster - used to work with UI
• Physics 2D Raycaster - used to interact with physical objects in 2D
• Physics Raycaster - used to interact with physical objects in 3D

An important detail for all interactions, be it physics or ui, is that the EventSystem object is present on the scene.



Let's start with the simplest - with the UI system. With her EventSystem works the easiest and best. The fact is that when creating a Canvas, the unit immediately adds all the necessary components to the scene, such as the EventSystem itself and Graphic Raycaster.

In the case of the UI, the event system allows you to easily create your own buttons and basic interactions with different UI elements. For example, let's look at IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler, IPointerClickHandler, IDragHandler, IBeginDragHandler, IEndDragHandler.

In order for the UI element to respond to entry events (IPointerEnterHandler), exit (IPointerExitHandler) of the mouse cursor, you need to implement these interfaces into the required object. This helps in many cases when you need to select something, highlight, etc. Using the example with a test scene and Image, this allows you to make interactions like this in a few lines of code:

public void OnPointerEnter(PointerEventData eventData) { _Image.color = Color.blue; } public void OnPointerExit(PointerEventData eventData) { _Image.color = Color.white; } 

There are two other interfaces for handling events of clicking on a UI element: IPointerDownHandler, IPointerUpHandler.

Their implementation allows you to conveniently handle the events of clicking on an object with a mouse or a wheelbarrow on mobile platforms:

  public void OnPointerDown(PointerEventData eventData) { _Image.color = Color.green; } public void OnPointerUp(PointerEventData eventData) { _Image.color = Color.red; } 

EventSystem works with any component of the UI system that may be RaycastTarget. For example, Text and IPointerClickHandler click event (important, this event is similar to IPointerUpHandler, that is, it works when the mouse is raised, but the difference is that the cursor should be “released” strictly within the object):

 using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; [RequireComponent(typeof(Text))] public class UITextExample : MonoBehaviour, IPointerClickHandler { private Text _Text; private bool _IsClicked; private void Start () { _Text = GetComponent<Text>(); } public void OnPointerClick(PointerEventData eventData) { _Text.text = _IsClicked ? "Hello there!" : "General Kenobi"; _IsClicked = !_IsClicked; } } 

The most interesting events in my opinion are those that allow you to conveniently make Drag. This is a set of IDragHandler, IBeginDragHandler, IEndDragHandler interfaces. They are also very simple. The visual effect is highly dependent on the processing method, but these three events allow you to make a variety of interactions in a few minutes. In case the element you are going to move consists of different UI elements, it is important to disable the RaycastTarget checkbox on those elements that are not interactive. (Important: in the case of the UI system, you need to use the screenPosition from PointerEventData which comes in all methods of the mouse / tach-related event system)

 public class UIDragExample : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler { [SerializeField] private Text _Text; public void OnDrag(PointerEventData eventData) { transform.position = eventData.pointerCurrentRaycast.screenPosition; } public void OnBeginDrag(PointerEventData eventData) { _Text.text = "You dragging!"; } public void OnEndDrag(PointerEventData eventData) { _Text.text = "Drag me!"; } } 

In general, according to the UI system, everything is, in fact, there are still a few useful pieces from the point of view of the Event System, but I can write about them in future articles.

Work with physical objects differs only in two points. First, you need to carefully monitor that the EventSystem object is on the scene for it to work. Second, you need to hang the PhysicsRaycaster component on the main camera, so that all this also works on colliders. The rest is almost the same, a simple example you can find in the repository .

In general, EventSystem is a cool and handy tool that allows you to do many things many times faster than ordinary raikes. In addition, there is a lot of useful functionality in the EventSystem, such as the fact that you can override the input (for example, you are interested in a specific controller, say Leap Motion) and much more, which I may write in future articles.

Thanks for attention!