Unity UGUI的Mask（遮罩）組件的介紹及使用

1. 什麼是Mask組件？

Mask（遮罩）組件是Unity UGUI中的一個重要組件，用於限制子對象的可見區域。通過設置遮罩組件，可以實現一些特殊效果，如顯示部分圖片、裁剪文本等。

2. Mask組件的工作原理

Mask組件通過將子對象與遮罩對象進行比較，只顯示與遮罩對象重疊的部分，從而實現遮罩效果。遮罩對象可以是任意形狀的UI元素，如Image、RawImage等。

3. Mask組件的常用屬性

• Show Mask Graphic：是否顯示遮罩對象的圖形。
• Mask Interaction：遮罩對象的交互方式，可選擇None、Visible Inside Mask和Visible Outside Mask。
• Alpha Cutoff：遮罩對象的透明度閾值，用於控制遮罩的顯示範圍。

4. Mask組件的常用函數

• IsRaycastLocationValid：判斷指定位置是否在遮罩範圍內。
• GetModifiedMaterial：獲取經過遮罩處理後的材質。

5. 示例代碼

示例1：顯示部分圖片

using UnityEngine;
using UnityEngine.UI;

public class ImageMaskExample : MonoBehaviour
{
    public Image mask;
    public RawImage image;

    void Start()
    {
        mask.sprite = Resources.Load<Sprite>("MaskImage");
        image.texture = Resources.Load<Texture>("Image");
        image.transform.SetParent(mask.transform);
        mask.GetComponent<Mask>().showMaskGraphic = false;
    }
}

操作步驟：

1. 創建一個Image對象作為遮罩對象，設置其形狀為圓形。
2. 創建一個RawImage對象作為子對象，設置其圖片為需要顯示的圖片。
3. 將遮罩對象和子對象添加到Canvas中。
4. 將子對象的父對象設置為遮罩對象。
5. 設置Mask組件的Show Mask Graphic屬性為false。

示例2：裁剪文本

using UnityEngine;
using UnityEngine.UI;

public class TextMaskExample : MonoBehaviour
{
    public Text mask;
    public Text text;

    void Start()
    {
        mask.text = "Mask Text";
        text.text = "Hello World";
        text.transform.SetParent(mask.transform);
        mask.GetComponent<Mask>().showMaskGraphic = false;
    }
}

操作步驟：

1. 創建一個Text對象作為遮罩對象，設置其文本內容。
2. 創建一個Text對象作為子對象，設置其文本內容。
3. 將遮罩對象和子對象添加到Canvas中。
4. 將子對象的父對象設置為遮罩對象。
5. 設置Mask組件的Show Mask Graphic屬性為false。

示例3：動態遮罩

using UnityEngine;
using UnityEngine.UI;

public class DynamicMaskExample : MonoBehaviour
{
    public Image mask;
    public RawImage image;

    void Start()
    {
        mask.sprite = Resources.Load<Sprite>("MaskImage");
        image.texture = Resources.Load<Texture>("Image");
        image.transform.SetParent(mask.transform);
        mask.GetComponent<Mask>().showMaskGraphic = false;

        // 動態修改遮罩對象的形狀
        mask.rectTransform.sizeDelta = new Vector2(200, 200);
    }
}

操作步驟：

1. 創建一個Image對象作為遮罩對象，設置其形狀為矩形。
2. 創建一個RawImage對象作為子對象，設置其圖片為需要顯示的圖片。
3. 將遮罩對象和子對象添加到Canvas中。
4. 將子對象的父對象設置為遮罩對象。
5. 在代碼中動態修改遮罩對象的形狀。

示例4：遮罩交互

using UnityEngine;
using UnityEngine.UI;

public class InteractionMaskExample : MonoBehaviour
{
    public Image mask;
    public RawImage image;

    void Start()
    {
        mask.sprite = Resources.Load<Sprite>("MaskImage");
        image.texture = Resources.Load<Texture>("Image");
        image.transform.SetParent(mask.transform);
        mask.GetComponent<Mask>().showMaskGraphic = false;
        mask.GetComponent<Mask>().maskInteraction = MaskInteraction.VisibleInsideMask;
    }
}

操作步驟：

1. 創建一個Image對象作為遮罩對象，設置其形狀為圓形。
2. 創建一個RawImage對象作為子對象，設置其圖片為需要顯示的圖片。
3. 將遮罩對象和子對象添加到Canvas中。
4. 將子對象的父對象設置為遮罩對象。
5. 設置Mask組件的Mask Interaction屬性為Visible Inside Mask。

示例5：透明度閾值

using UnityEngine;
using UnityEngine.UI;

public class AlphaCutoffMaskExample : MonoBehaviour
{
    public Image mask;
    public RawImage image;

    void Start()
    {
        mask.sprite = Resources.Load<Sprite>("MaskImage");
        image.texture = Resources.Load<Texture>("Image");
        image.transform.SetParent(mask.transform);
        mask.GetComponent<Mask>().showMaskGraphic = false;
        mask.GetComponent<Mask>().alphaCutoff = 0.5f;
    }
}

操作步驟：

1. 創建一個Image對象作為遮罩對象，設置其形狀為矩形。
2. 創建一個RawImage對象作為子對象，設置其圖片為需要顯示的圖片。
3. 將遮罩對象和子對象添加到Canvas中。
4. 將子對象的父對象設置為遮罩對象。
5. 設置Mask組件的Alpha Cutoff屬性為0.5。

6. 註意事項

• 遮罩對象和子對象需要添加到同一個Canvas中。
• 子對象的父對象必須設置為遮罩對象。
• 遮罩對象的形狀可以通過修改RectTransform的sizeDelta屬性來調整。
• 遮罩對象的形狀可以是任意形狀的UI元素，如Image、RawImage等。

7. 參考資料

• Unity官方文檔：Mask
• Unity官方論壇：UGUI Mask組件使用教程

__EOF__