Unity UGUI's GraphicRaycaster Raycaster Component Introduction

Introduction and use of GraphicRaycaster components of Unity UGUI

1. What is the GraphicRaycaster component?

GraphicRaycaster is a component in the Unity UGUI system that handles ray casting events. It can cast rays onto UI elements and detect if any UI elements are clicked or touched.

2. How GraphicRaycaster works

GraphicRaycaster detects click events of UI elements through ray casting. When a user clicks on the screen or touches the screen, the GraphicRaycaster emits a ray and then detects whether the ray intersects with the UI element. If intersected, the corresponding event will be triggered.

3. Common properties of GraphicRaycaster

Event Mask: Specifies which UI elements can receive ray casting events.
Blocking Objects: Specify which UI elements can prevent rays from continuing to pass.
Ignore Reversed Graphics: Whether to ignore the inverted graphics.
Blocking Mask: Specify which UI elements can prevent ray transfer.

4. Common functions of GraphicRaycaster

Raycast: Perform ray projection detection.
RaycastAll: Perform ray projection detection and return all intersecting UI elements.
RaycastNonAlloc: Perform ray casting detection and store intersecting UI elements in an array.

5. Complete example code

Example 1: Click the button to change the text color

using UnityEngine;
using ;
public class ButtonClickExample : MonoBehaviour
{
    public Button button;
    public Text text;
    private void Start()
    {
        (ChangeTextColor);
    }
    private void ChangeTextColor()
    {
         = ;
    }
}

Operation steps:

Create a Canvas object and add a Button and a Text component.
Drag and drop Button and Text components onto Button and Text fields respectively.
Create a new C# script and mount it on the Canvas object.
Implement the ChangeTextColor function in the script and change the text color to red.
Run the game, click the button to see if the text color changes.

Notes:

Make sure Canvas' Render Mode is set to Screen Space - Overlay.
Make sure the Raycast Target property of Button and Text components is true.

Example 2: Dragging an object

using UnityEngine;
using ;
public class DragObjectExample : MonoBehaviour, IDragHandler
{
    public void OnDrag(PointerEventData eventData)
    {
         = ;
    }
}

Operation steps:

Create a Canvas object and add an Image component.
Drag the Image component onto the field of the DragObjectExample script.
Create a new C# script and mount it on the Image object.
Implement the OnDrag function in the script, setting the position of the object to the mouse position.
Run the game, click and drag the object to observe whether the object follows the mouse.

Notes:

Make sure Canvas' Render Mode is set to Screen Space - Overlay.
Make sure the Raycast Target property of the Image component is true.

Example 3: Click the button to play sound effects

using UnityEngine;
using ;
public class ButtonClickSoundExample : MonoBehaviour
{
    public Button button;
    public AudioSource audioSource;
    public AudioClip clickSound;
    private void Start()
    {
        (PlayClickSound);
    }
    private void PlayClickSound()
    {
        (clickSound);
    }
}

Operation steps:

Create a Canvas object and add a Button component and an AudioSource component.
Drag and drop Button and AudioSource components onto the fields of the ButtonClickSoundExample script respectively.
Create a new C# script and mount it on the Canvas object.
Implement the PlayClickSound function in the script to play the click sound effect.
Run the game, click the button to see if the sound effects are played.

Notes:

Make sure Canvas' Render Mode is set to Screen Space - Overlay.
Make sure the Raycast Target property of the Button component is true.

Example 4: Click the button to display/hide objects

using UnityEngine;
using ;
public class ButtonToggleExample : MonoBehaviour
{
    public Button button;
    public GameObject targetObject;
    private void Start()
    {
        (ToggleObject);
    }
    private void ToggleObject()
    {
        (!);
    }
}

Operation steps:

Create a Canvas object and add a Button component and an object that needs to be displayed/hidden.
Drag the Button and the object to the fields of the ButtonToggleExample script respectively.
Create a new C# script and mount it on the Canvas object.
Implement the ToggleObject function in the script to switch the display/hidden state of the object.
Run the game, click the button to observe whether the display/hidden state of the object has changed.

Notes:

Make sure Canvas' Render Mode is set to Screen Space - Overlay.
Make sure the Raycast Target property of the Button component is true.

Example 5: Click the button to switch the scene

using UnityEngine;
using ;
using ;
public class ButtonSceneChangeExample : MonoBehaviour
{
    public Button button;
    public string sceneName;
    private void Start()
    {
        (ChangeScene);
    }
    private void ChangeScene()
    {
        (sceneName);
    }
}

Operation steps:

Create a Canvas object and add a Button component.
Drag the Button component to the field of the ButtonSceneChangeExample script.
Create a new C# script and mount it on the Canvas object.
Implement the ChangeScene function in the script and switch to the specified scenario.
Run the game, click the button, and observe whether it successfully switches to the specified scene.

Notes:

Make sure Canvas' Render Mode is set to Screen Space - Overlay.
Make sure the Raycast Target property of the Button component is true.

References

Unity official documentation:GraphicRaycaster
Unity official tutorial:UI - Event System

The above is the detailed information about the introduction of the GraphicRaycaster ray projection component of Unity UGUI. For more information about the Unity UGUI ray projection component, please follow my other related articles!