技術文章 » Unity UGUI的Mask（遮罩）元件的介紹及使用

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

2023-07-10 18:01:04

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. 參考資料