Применение эффектов маскировки в UI Toolkit

Маскирование — это метод, позволяющий управлять тем, какие части элемента 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: Stencil.

Маскирование по трафарету использует возможность GPU — буфер трафарета. С трафаретом связано состояние GPU, определяющее изменение изображения и его влияние на отображение. Когда у элементов одинаковое состояние трафарета, их можно объединить в один вызов отрисовки. Однако любое изменение состояния трафарета — например, вложенное маскирование — разрывает пакет. Разрывы пакетов заметно бьют по производительности, поскольку мешают эффективно отрисовывать несколько элементов одним вызовом. Свести число разрывов к минимуму крайне важно для оптимизации отрисовки.

Чтобы уменьшить количество разрывов пакета для маскировки вложенных шаблонов, рассмотрите возможность применения UsageHints.MaskContainer к элементу маскировки, который является предком всех масок.

На следующем рисунке показано количество пакетов в одноуровневой маске, вложенной маске и вложенной маске с применением MaskContainer. Желтый цвет обозначает элементы маскировки. Оранжевый цвет обозначает элемент маскировки с применением MaskContainer. Числа обозначают количество пакетов.

A: Одноуровневая маскировка (1 партия)
B: Вложенная маскировка (5 партий)
C: Вложенная маскировка с MaskContainer (2 партии)

Примечание: Если вы видите предупреждение “Глубина и шаблон буферы отключены в настройках плеера. В зависимости от платформы и графики API используемые, UI элементы могут не отображаться правильно. ", это означает, что UI Toolkit требует буферов глубины и шаблона для надлежащей поддержки маскировки и вложения.

Чтобы исправить это, перейдите к Настройки Игрока и создание возможностей Буферы глубины и шаблонаЭто обеспечивает UI элементы рендируются правильно на всех платформах и графиках APIs.

Дополнительные ресурсы

• UsageHints
• Внешний вид