Unity UGUI的MaskableGraphic（可遮罩图形）组件的介绍及使用_unity ui遮罩

Unity UGUI的MaskableGraphic（可遮罩图形）组件的介绍及使用

1. 什么是MaskableGraphic组件？

MaskableGraphic是Unity UGUI中的一个组件，用于实现图形的遮罩效果。通过该组件，我们可以将一个图形对象的显示范围限制在一个指定的区域内，从而实现遮罩效果。

2. MaskableGraphic组件的工作原理

MaskableGraphic组件的工作原理是通过将图形对象与遮罩对象进行相交运算，将图形对象的显示范围限制在遮罩对象的范围内。具体的工作流程如下：

• 首先，将遮罩对象设置为图形对象的父对象，并将遮罩对象的RectTransform组件的大小设置为所需的遮罩范围。
• 然后，将图形对象的MaskableGraphic组件的属性设置为true，表示该图形对象可被遮罩。
• 最后，将图形对象的RectTransform组件的位置和大小设置为所需的显示位置和大小。

3. MaskableGraphic组件的常用属性

• maskable：是否可被遮罩，设置为true表示可被遮罩，设置为false表示不可被遮罩。
• maskMaterial：遮罩使用的材质。
• maskInteraction：遮罩的交互方式，可选值有None、VisibleInsideMask和VisibleOutsideMask。

4. MaskableGraphic组件的常用函数

• SetMaterialDirty()：标记材质为脏，使其在下一帧重新渲染。
• SetVerticesDirty()：标记顶点为脏，使其在下一帧重新生成。
• SetLayoutDirty()：标记布局为脏，使其在下一帧重新布局。
• SetAllDirty()：标记所有属性为脏，使其在下一帧重新渲染、生成和布局。

5. 完整例子代码

例子1：创建一个遮罩图形

using UnityEngine;
using UnityEngine.UI;

public class Example1 : MonoBehaviour
{
    public GameObject maskObject;
    public GameObject graphicObject;

    private void Start()
    {
        graphicObject.transform.SetParent(maskObject.transform);
        graphicObject.GetComponent<MaskableGraphic>().maskable = true;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

操作步骤：

1. 创建一个空的GameObject，命名为MaskObject。
2. 创建一个需要遮罩的图形对象，命名为GraphicObject。
3. 将GraphicObject的MaskableGraphic组件的maskable属性设置为true。
4. 将GraphicObject的父对象设置为MaskObject。

例子2：设置遮罩使用的材质

using UnityEngine;
using UnityEngine.UI;

public class Example2 : MonoBehaviour
{
    public GameObject maskObject;
    public GameObject graphicObject;
    public Material maskMaterial;

    private void Start()
    {
        graphicObject.transform.SetParent(maskObject.transform);
        MaskableGraphic maskableGraphic = graphicObject.GetComponent<MaskableGraphic>();
        maskableGraphic.maskable = true;
        maskableGraphic.maskMaterial = maskMaterial;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

操作步骤：

1. 创建一个空的GameObject，命名为MaskObject。
2. 创建一个需要遮罩的图形对象，命名为GraphicObject。
3. 将GraphicObject的MaskableGraphic组件的maskable属性设置为true。
4. 将GraphicObject的MaskableGraphic组件的maskMaterial属性设置为所需的材质。
5. 将GraphicObject的父对象设置为MaskObject。

例子3：设置遮罩的交互方式

using UnityEngine;
using UnityEngine.UI;

public class Example3 : MonoBehaviour
{
    public GameObject maskObject;
    public GameObject graphicObject;

    private void Start()
    {
        graphicObject.transform.SetParent(maskObject.transform);
        MaskableGraphic maskableGraphic = graphicObject.GetComponent<MaskableGraphic>();
        maskableGraphic.maskable = true;
        maskableGraphic.maskInteraction = MaskableGraphic.MaskInteraction.VisibleInsideMask;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

操作步骤：

1. 创建一个空的GameObject，命名为MaskObject。
2. 创建一个需要遮罩的图形对象，命名为GraphicObject。
3. 将GraphicObject的MaskableGraphic组件的maskable属性设置为true。
4. 将GraphicObject的MaskableGraphic组件的maskInteraction属性设置为所需的交互方式。
5. 将GraphicObject的父对象设置为MaskObject。

例子4：标记材质为脏

using UnityEngine;
using UnityEngine.UI;

public class Example4 : MonoBehaviour
{
    public GameObject graphicObject;

    private void Update()
    {
        graphicObject.GetComponent<MaskableGraphic>().SetMaterialDirty();
    }
}
1
2
3
4
5
6
7
8
9
10
11

操作步骤：

1. 创建一个需要遮罩的图形对象，命名为GraphicObject。
2. 在Update函数中调用GraphicObject的MaskableGraphic组件的SetMaterialDirty函数。

例子5：标记顶点为脏

using UnityEngine;
using UnityEngine.UI;

public class Example5 : MonoBehaviour
{
    public GameObject graphicObject;

    private void Update()
    {
        graphicObject.GetComponent<MaskableGraphic>().SetVerticesDirty();
    }
}
1
2
3
4
5
6
7
8
9
10
11

操作步骤：

1. 创建一个需要遮罩的图形对象，命名为GraphicObject。
2. 在Update函数中调用GraphicObject的MaskableGraphic组件的SetVerticesDirty函数。

6. 注意事项

• 遮罩对象的RectTransform组件的大小应与遮罩范围一致，否则可能导致遮罩效果不准确。
• 遮罩对象和图形对象的层级关系应正确设置，否则可能导致遮罩效果无法生效。
• 遮罩对象和图形对象的位置和大小应正确设置，否则可能导致遮罩效果不符合预期。

7. 参考资料

• Unity官方文档：MaskableGraphic