Unity UGUI的RectMask2D（2D遮罩）元件的介紹及使用

2023-07-22 21:00:52

Unity UGUI的RectMask2D（2D遮罩）元件的介紹及使用

1. 什麼是RectMask2D元件？

RectMask2D是Unity UGUI中的一個元件，用於實現2D遮罩效果。它可以限制子物件在指定的矩形區域內顯示，超出區域的部分將被遮罩隱藏。

2. RectMask2D的工作原理

RectMask2D元件通過裁剪子物件的渲染區域來實現遮罩效果。它使用一個矩形區域作為遮罩範圍，只有在該範圍內的子物件才會被顯示出來。

3. RectMask2D的常用屬性

Show Mask Graphic: 是否顯示遮罩的圖形，可以用於偵錯遮罩範圍。
Softness: 遮罩邊緣的柔化程度，值越大邊緣越柔化。
Padding: 遮罩範圍與子物件之間的邊距。

4. RectMask2D的常用函數

PerformClipping(): 執行裁剪操作，將子物件的渲染區域限制在遮罩範圍內。

5. 完整例子程式碼

例子1：基本使用

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RectMask2D rectMask;

    private void Start()
    {
        rectMask.enabled = true;
    }
}

操作步驟：

建立一個空物體，並新增RectMask2D元件。
將需要被遮罩的子物件作為該物體的子物件。
將RectMask2D元件拖拽到Example指令碼的rectMask變數上。
執行遊戲，子物件將只在遮罩範圍內顯示。

例子2：動態調整遮罩範圍

using UnityEngine;
using UnityEngine.UI;

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

    private void Update()
    {
        rectMask.rectTransform.sizeDelta = maskRect.sizeDelta;
    }
}

操作步驟：

建立一個空物體，並新增RectMask2D元件。
將需要被遮罩的子物件作為該物體的子物件。
建立一個UI元素，作為遮罩範圍的參考。
將RectMask2D元件拖拽到Example指令碼的rectMask變數上。
將遮罩範圍的RectTransform元件拖拽到Example指令碼的maskRect變數上。
執行遊戲，遮罩範圍將根據參考元素的大小動態調整。

例子3：遮罩範圍內的互動

using UnityEngine;
using UnityEngine.UI;

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

    private void Start()
    {
        button.onClick.AddListener(OnButtonClick);
    }

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

操作步驟：

建立一個空物體，並新增RectMask2D元件。
將需要被遮罩的子物件作為該物體的子物件。
建立一個Button，並將其作為子物件。
將RectMask2D元件拖拽到Example指令碼的rectMask變數上。
將Button元件拖拽到Example指令碼的button變數上。
在OnButtonClick函數中新增自定義的互動邏輯。
執行遊戲，只有在遮罩範圍內點選按鈕才會觸發互動。

例子4：遮罩範圍內的捲動檢視

using UnityEngine;
using UnityEngine.UI;

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

    private void Start()
    {
        scrollRect.enabled = true;
    }
}

操作步驟：

建立一個空物體，並新增RectMask2D元件。
將需要被遮罩的子物件作為該物體的子物件。
建立一個ScrollRect，並將其作為子物件。
將RectMask2D元件拖拽到Example指令碼的rectMask變數上。
將ScrollRect元件拖拽到Example指令碼的scrollRect變數上。
執行遊戲，可以在遮罩範圍內捲動檢視。

例子5：遮罩範圍內的動畫效果

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RectMask2D rectMask;
    public Animator animator;

    private void Start()
    {
        animator.enabled = true;
    }
}

操作步驟：

建立一個空物體，並新增RectMask2D元件。
將需要被遮罩的子物件作為該物體的子物件。
建立一個Animator，並將其作為子物件。
將RectMask2D元件拖拽到Example指令碼的rectMask變數上。
將Animator元件拖拽到Example指令碼的animator變數上。
建立動畫效果並在遮罩範圍內播放。

注意事項

RectMask2D元件只能作用於UGUI的子物件。
遮罩範圍的大小和位置可以通過RectTransform元件進行調整。
遮罩範圍的形狀可以通過修改遮罩物體的形狀來實現。

參考資料

Unity官方檔案：RectMask2D