Unity UGUI's RectMask2D mask component introduction

1. What is the RectMask2D component?

RectMask2D is a component in Unity UGUI for implementing 2D masking effects. It can restrict the sub-objects to be displayed in a specified rectangular area, and the portions beyond the area will be hidden by the mask.

2. How RectMask2D works

The RectMask2D component achieves masking effects by cropping the rendering area of the child object. It uses a rectangular area as the mask range, and only child objects within that range will be displayed.

3. Common properties of RectMask2D

Show Mask Graphic: Whether to display the mask graphics, it can be used to debug the mask range.
Softness: The degree of softening of the mask edge, the larger the value, the softer the edge.
Padding: The margin between the mask range and the sub-object.

4. Common functions of RectMask2D

PerformClipping(): Perform a crop operation to limit the rendering area of the child object to the mask range.

5. Complete example code

Example 1: Basic use

using UnityEngine;
using ;
public class Example : MonoBehaviour
{
    public RectMask2D rectMask;
    private void Start()
    {
         = true;
    }
}

Operation steps：

Create an empty object and add the RectMask2D component.
Take the sub-object that needs to be masked as the child object of the object.
Drag the RectMask2D component onto the rectMask variable of the Example script.
Run the game and the child objects will only be displayed within the mask range.

Example 2: Dynamically adjust the mask range

using UnityEngine;
using ;

public class Example : MonoBehaviour
{
    public RectMask2D rectMask;
    public RectTransform maskRect;

    private void Update()
    {
         = ;
    }
}

Operation steps：

Create an empty object and add the RectMask2D component.
Take the sub-object that needs to be masked as the child object of the object.
Create a UI element as a reference for mask scope.
Drag the RectMask2D component onto the rectMask variable of the Example script.
Drag the mask-range RectTransform component onto the maskRect variable of the Example script.
Run the game and the mask range will be dynamically adjusted according to the size of the reference element.

Example 3: Interaction within the mask range

using UnityEngine;
using ;

public class Example : MonoBehaviour
{
    public RectMask2D rectMask;
    public Button button;

    private void Start()
    {
        (OnButtonClick);
    }

    private void OnButtonClick()
    {
        ("Button Clicked!");
    }
}

Operation steps：

Create an empty object and add the RectMask2D component.
Take the sub-object that needs to be masked as the child object of the object.
Create a Button and use it as a child object.
Drag the RectMask2D component onto the rectMask variable of the Example script.
Drag the Button component to the button variable of the Example script.
Add custom interactive logic in the OnButtonClick function.
Run the game and the interaction will only be triggered by clicking the button within the mask range.

Example 4: Scroll view within the mask range

using UnityEngine;
using ;

public class Example : MonoBehaviour
{
    public RectMask2D rectMask;
    public ScrollRect scrollRect;

    private void Start()
    {
         = true;
    }
}

Operation steps：

Create an empty object and add the RectMask2D component.
Take the sub-object that needs to be masked as the child object of the object.
Create a ScrollRect and use it as a child object.
Drag the RectMask2D component onto the rectMask variable of the Example script.
Drag the ScrollRect component to the scrollRect variable of the Example script.
Run the game and scroll the view within the mask range.

Example 5: Animation effects within the mask range

using UnityEngine;
using ;
public class Example : MonoBehaviour
{
    public RectMask2D rectMask;
    public Animator animator;
    private void Start()
    {
         = true;
    }
}

Operation steps：

Create an empty object and add the RectMask2D component.
Take the sub-object that needs to be masked as the child object of the object.
Create an Animator and use it as a child object.
Drag the RectMask2D component onto the rectMask variable of the Example script.
Drag the Animator component to the animator variable in the Example script.
Create animated effects and play within the mask range.

Things to note

The RectMask2D component can only act on child objects of UGUI.
The size and position of the mask range can be adjusted by the RectTransform component.
The shape of the mask range can be achieved by modifying the shape of the mask object.

References

Unity official documentation:RectMask2D

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