在 UI 工具包中应用遮罩效果
蒙版是一种技术，可让您控制 UI 元素的哪些部分可见。在 UI Toolkit 中，您可以使用 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 设置为蒙版元素的背景图像，如以下示例所示：
有关如何使用 SVG 图像作为背景图像的信息，请参阅设置背景图像。
注意：世界空间UI目前不支持任意形状遮罩。
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 命令：模板。
模板遮罩使用称为模具缓冲区 保存每像素值 8 位的内存存储。在 Unity 中，可以使用模具缓冲区来标记像素，然后仅呈现为通过模具作的像素。更多信息
请参阅术语表用于掩蔽作。模具具有与 GPU 关联的状态，该状态指示图像修改及其对呈现的影响。当元素共享相同的模具状态时，可以将它们批处理到单个绘制调用中。但是，模具状态的任何更改（如嵌套掩码）都会导致批处理中断。批量中断会显着影响性能，因为它会阻止多个元素在单个绘制调用中一起有效呈现。最大限度地减少批处理中断以优化渲染性能至关重要。
若要减少嵌套模具蒙版的批处理中断数，请考虑将UsageHints.MaskContainer在遮罩元素上，它是所有遮罩的祖先。
下图显示了单级掩码、嵌套掩码和嵌套掩码中的批数MaskContainer应用的。黄色表示遮罩元素。橙色表示遮罩元素，其中MaskContainer应用的。数字表示批次数。
A：单级掩蔽（1 批次）
B：嵌套掩码（5 批次）
C：使用 MaskContainer 的嵌套掩码（2 批次）
注意：
如果看到警告消息“深度和模具缓冲区在玩家设置设置，用于为 Unity 构建的最终游戏设置各种特定于玩家的选项。更多信息
请参阅术语表.根据正在使用的平台和图形 API，UI 元素可能无法正确呈现“，这意味着 UI 工具包需要深度和模具缓冲区才能正确支持掩码和嵌套。
要解决此问题，请转到 玩家设置（Player Settings） 并启用 深度（Depth） 和 模板缓冲区（Stencil Buffers）。这可确保 UI 元素在所有平台和图形 API 上正确呈现。