在 UI 工具包中应用遮罩效果

遮罩技术可用于控制__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary 元素的哪些部分可见。在 UI 工具包中，可以使用 USS 属性 overflow: hidden 来隐藏 UI 元素中超出另一个 UI 元素边界的部分。

使用元素进行遮罩

可以使用一个元素来遮罩另一个元素。要使用元素创建遮罩效果，请将遮罩元素添加为被遮罩元素的父元素。将 overflow 属性设置为遮罩元素上的 hidden。这会隐藏被遮罩元素在遮罩元素边界之外的部分。

以下示例展示了如何使用矩形和圆角形状来创建遮罩效果。

在此示例中，#MaskSquare 和 MaskRounded 元素是遮罩元素，Logo1 和 Logo2 元素是被遮罩元素。遮罩元素是被遮罩元素的父元素。该示例使用具有背景图像的 VisualElement 来演示遮罩效果。您可以将遮罩技术应用于任何元素，例如标签或按钮。

#MaskRounded 元素的 border-radius 属性设置为 50px。这会产生圆角遮罩效果。

该 UXML 如下所示：

<UXML>
    <VisualElement name="MaskSquare" >
        <VisualElement name="Logo1" />
    </VisualElement>
    <VisualElement name="MaskRounded" >
        <VisualElement name="Logo2"  />
    </VisualElement>
</UXML>

USS 如下所示：

#MaskSquare {
    overflow: hidden;
}

#MaskRounded {
    overflow: hidden;
    border-radius: 50px;
}

#Logo1, #Logo2 {
    background-image: url("unity-logo.png");
}

使用任意形状进行遮罩

要创建具有任意形状的遮罩效果，请将 SVG 设置为遮罩元素的背景图像，如下所示：

该 UXML 如下所示：

<UXML>
    <VisualElement name="MaskSVG" >
        <VisualElement name="Logo3" />
    </VisualElement>
</UXML>

USS 如下所示：

#MaskSVG {
    overflow: hidden;
    background-image: url("mask.svg");
}   

#Logo3 {
    background-image: url("unity-logo.png");
}

减少嵌套遮罩的批处理中断

当元素和一个或多个祖先都定义遮罩时，会发生嵌套遮罩。这些遮罩的交集定义了最终可见性。您可以使用此技术来创建复杂的视觉效果，或根据各种条件有选择地显示图像的某些部分。例如，您可以定义遮罩来显示元素的某些区域并隐藏其他被遮罩区域。

使用矩形形状进行遮罩时，Unity 使用轴对齐的矩形作为裁剪区域，这称为矩形裁剪。使用圆角或任意形状进行遮罩时，Unity 使用模板遮罩而不是矩形裁剪。模板遮罩将遮罩存储在模板中，这是一种特殊图像类型，每通道 8 位。模板中存储的形状定义了裁剪区域。有关更多信息，请参阅 ShaderLab 命令：模板。

模板遮罩使用称为模板缓冲区的 GPU 功能进行遮罩操作。模板具有 GPU 关联状态，决定了图像修改及其对渲染的影响。当元素共享相同的模板状态时，可以将其批处理到单个绘制调用中。但是，模板状态的任何变化（例如嵌套遮罩）都会导致批处理中断。批处理中断可能会显著影响性能，因为它会阻止多个元素在单个绘制调用中一起高效渲染。为了优化渲染性能，务必要最大限度地减少批处理中断。

要减少嵌套模板遮罩的批处理中断次数，请考虑对所有遮罩的祖先遮罩元素应用 UsageHints.MaskContainer。

下图显示了单级遮罩、嵌套遮罩和已应用 MaskContainer 的嵌套遮罩中的批处理次数。黄色表示遮罩元素。橙色表示应用了 MaskContainer 的遮罩元素。数字表示批处理次数。

A：单级遮罩（1 次批处理）
B：嵌套遮罩（5 次批处理）
C：使用 MaskContainer 进行嵌套遮罩（2 次批处理）

其他资源

• UsageHints
• 外观