This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Recommended reading

  • CSDN home page
  • GitHub open source address
  • Unity3D plugin sharing
  • Jane’s address book
  • My personal blog
  • QQ group: 1040082875

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

The purpose of this series of articles is to document and analyze the various principles of UGUI:

  • UGUI rendering mode.
  • UGUI zoom calculation.
  • UGUI anchor location.
  • UGUI hierarchy rendering process.
  • UGUI event triggering principle.
  • UGUI layout automatic layout mode.

Second, the Event System

When UGUI elements are created, the Event System object is automatically generated, which passes events to the object based on mouse, touch, and keyboard input.

This Event System mounts two components by default:Event System, Standalone Input Module, as shown in the figure below:

2-1. The Event System component

attribute introduce
First Selected The first Object to be selected during execution. For example, after InputField is selected, press Play to Force the cursor on the InputField
Send Navigation Events Whether to enable the UI navigation function, which can be controlled by using up, Down, Left, Right, Cancel(Esc), and Sumit(Enter) on the keyboard
Drag Threshold Sensitivity. The lower, the more sensitive

2-2, Standalone Input Module component

The Standalone Input Module processes the Input mouse or touch event and distributes the event.

attribute introduce
Horizontal Axis Horizontal Axis represents the Horizontal Axis in the Input Module and can be set to the value in the Input Manager
Vertical Axis Represents Vertical Axis in the Input Module and can be set to the value in the Input Manager
Submit Button Represents a Submit Button in the Input Module that can be set to a value in the Input Manager
Cancel Button Represents the Cancel Button in the Input Module and can be set to the value in the Input Manager
Input Actions Per Second Maximum number of buttons and mouse slides that can be entered per second
Repeat Delay Delay of repeated input
Force Module Active Excitation module

2-3. Information display of EventSystem

After running the program, click on the EventSystem object and click on EventSystem in the Inspector view to display the selected object’s properties, location, camera receiving time and other information, as shown below:

2-4. Analysis of operation process

When creating UGUI interfaces, EventSystem acts like a message center designed for UGUI. It manages all UGUI components that can participate in message processing, such as Panel, Image, Button, and so on.

The EventSytem component is the core of the messaging mechanism.

StandaloneInputModule is the component responsible for generating input.

StandaloneInputModule inherits from the BaseInputModule implementation class. Unity has several similar implementation classes. You can also customize an implementation class for event handling.

However, there is still one part missing, which is how to determine to whom an event is addressed. EventSystem responds to user clicks, touches, drags, and so on, so how does EventSystem determine to whom these actions are directed, so you need a ray detection module to determine which UI the mouse is aiming at. This is the GraphicPaycaster component.

GraphicPaycaster is responsible for X-ray detection and computation of the UI under Canvas.

At this point, it is clear what EventSystem is like in the UGUI. An EventSystem object is responsible for managing all event-related objects. The EventSystem component is mounted to this object, and the StandaloneInputModule component is mounted to this object, the former is the management script, the latter is the input module. The Canvas is loaded with GraphicRaycaster, which is responsible for ray-related operations. All user operations are mapped to the UGUI component through ray detection. InputModule converts user operations into ray detection, and Raycaster finds the target object and notifies EventSystem. Finally, EventSystem sends an event for the target object to respond to.

The sorting process is shown in the figure below:

Graphic Raycaster

A Raycaster component is automatically mounted when building a Canvas, as shown below:Raycaster detects all the UI under the Canvas and detects if it has been hit.

In fact, X-ray detection is to specify the location and direction, projection a invisible line and determine whether there is a collision on the line.

attribute introduce
Ignore Reversed Graphics A graph facing away from the screen. Whether to ignore the graph in X-ray detection
Blocking Objects Block ray Object type
Blocking Mask The Layer checked will block rays

The following columns show the Blocked Objects, Blocking Mask properties.

For example, there is a Button and Cube position on the screen that deliberately overlaps. Now click the overlapped position and you will find that the Button will still be triggered:If the Cube Layer is changed to Test01, Blocked Objects is set to Three D, and Test01 is only checked as a Blocking Mask. Click the overlapping area again, it will be found that Cube will block ray detection, and the button will not receive ray at this time. And of course there would be no reaction:

4. Physics Raycaster

Add a Physics Raycaster component to the camera in the scene with the following valence properties:Physics Raycaster detects 3D GameObjects in the Scene through the Camera (must have a Collider Component). Objects that implement the Event Interfaces will receive Message notifications.

Next, let’s demonstrate Physics Raycaster with an example.

First, we need to use the script to detect the UI detection interface. There are two solutions, one is to use the IPointerDownHandler interface, and the other is to use BaseEventData to dynamically pass in the event information.

4-1. Use the IPointerDownHandler interface to pass monitoring

Create a new script eventtest.cs:

using UnityEngine;
using UnityEngine.EventSystems;
 
public class EventTest : MonoBehaviour.IPointerDownHandler
{
    public void OnPointerDown(PointerEventData eventData){ print(gameObject.name); }}Copy the code

Create a new object Cube and attach the EventTest script to the Cube:Clicking on Cube notifies the OnPointerDown method and passes in an event message.

4-2. Use BaseEventData to dynamically pass in event information

Create a new script eventTriggertest.cs:

using UnityEngine;
using UnityEngine.EventSystems;
 
public class EventTriggerTest : MonoBehaviour
{
    //BaseEventData Dynamically incoming event information
    public void OnPointerDown(BaseEventData eventData)
    {
        print("OnPointerDown--BaseEventData");
    }
 
    // Pass information
    public void OnPointerDown()
    {
        print("OnPointerDown--non");
    }
 
    // Pass in parameters
    public void OnPointerDown(int i)
    {
        print("OnPointerDown--int"); }}Copy the code

Create a new object Cube and attach the EventTriggerTest script to the Cube:Clicking on Cube notifies the OnPointerDown method and passes in an event message.