关于c#:Unity-UGUI的Mask遮罩组件的介绍及使用

3次阅读

共计 3014 个字符,预计需要花费 8 分钟才能阅读完成。

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 组件应用教程
正文完
 0