← Руководство

Создание настраиваемого вихревого фильтра

Вы можете создавать настраиваемые фильтры для применения любого эффекта к визуальному элементу. Чтобы создать настраиваемый фильтр, определите функцию фильтра в ресурсе настраиваемого фильтра. Ресурс настраиваемого фильтра определяет параметры фильтра, пропуски и привязки параметров.

Этот пример демонстрирует пользовательский фильтр, созданный в окне Inspector ассета пользовательского фильтра. Вы также можете создать пользовательские фильтры в коде C#.

Примерный обзор

В этом примере создается пользовательский фильтр с эффектом вихревого движения, который искажает визуальный элемент, вращая его вокруг центральной точки.

Вы можете предоставить настраиваемым функциям фильтра параметры, установленные в стиле или непосредственно в UI Builder. Например, встроенная функция фильтра размытия имеет только один параметр: радиус размытия. Эта настраиваемая функция фильтра вихря имеет два параметра, угол и радиус вихря:

Угол: Указывает угол вихревого эффекта.
Радиус: Задает радиус эффекта вихревого движения.

В этом примере используется образец вихрь шейдер и материал для создания вихревого фильтра. Шейдер, который определяет эффект, включает в себя два свойства:_Angleи _Radius—для управления углом и радиусом вихревого потока. Файл материала, Swirl.mat, настроен на использование вихревого шейдера. Чтобы применить эффект, привязать свойства материала к параметрам фильтра.

Вы можете найти завершенные файлы для примера в этом хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

Создание настраиваемого ассета фильтра

Создайте ассет фильтрации и определите параметры фильтрации, пропуски и привязки параметров в окне ассета Inspector.

Создайте проект в Unity с любым шаблоном.
В папке Assets создайте папку SwirlFilter.
Загрузите и импортируйте следующие файлы в SwirlFilter папка:
- Swirl.shader
- Swirl.mat
Чтобы создать ассет FilterFunctionDefinition, щелкните правой кнопкой мыши папку SwirlFilter и выберите Создать > UI Toolkit > Определение функции фильтрации.
Переименуйте ассет в SwirlFilter.
В окне Inspector для ассета SwirlFilter установите Filter Name на swirl.
В разделе Параметры добавьте два параметра и установите Тип обоих параметров на float.
Установите имя первого параметра на Angle. Этот параметр контролирует угол вихревого движения.
Установите имя второго параметра на Radius. Этот параметр управляет радиусом вихревого движения.
В разделе Пассажи добавьте новый элемент и установите Материал на Swirl.shader.
В течение Привязки параметров раздел, добавить две связки.
Для первой привязки выполните следующие действия:
- Установите индекс с на 0.
- Установить Имущество до _Angle.
Для второй привязки выполните следующие действия:
- Установите индекс с на 1.
- Установить Имущество до _Radius.
Определить вихревой фильтр в окне Inspector

Создать документ UI и таблицу стилей

Чтобы получить эффект вихря, создайте файл UXML с двумя VisualElements с разными цветами фона. Первый VisualElement является родительским элементом, а второй VisualElement является дочерним элементом. Примените пользовательский фильтр к родительскому элементу, так чтобы дочерний элемент был затронут фильтром.

Создайте новый файл UI Toolkit USS с именем SwirlFilterExample.uss со следующим содержимым:

.outside {
    flex-grow: 1;
    position: absolute;
    height: 207px;
    width: 234px;
    top: 46px;
    left: 27px;
    background-color: rgb(255, 0, 0);
}
    
.inside {
    flex-grow: 1;
    position: absolute;
    height: 75px;
    width: 100px;
    top: 46px;
    left: 27px;
    background-color: rgb(0, 255, 247);
}

Создайте новый файл UI Toolkit UXML с именем SwirlFilterExample.uxml со следующим содержимым:

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="SwirlFilterExample.uss" />
    <engine:VisualElement class="outside">
        <engine:VisualElement class="inside" />
    </engine:VisualElement>
</engine:UXML>

Применить пользовательский фильтр в UI Builder

Чтобы применить пользовательский фильтр в UI Builder, добавьте функцию пользовательского фильтра в UI Builder и установите параметры.

Дважды щелкните файл SwirlFilterExample.uxml, чтобы открыть его в UI Builder.
В панели StyleSheets выберите + > Добавить существующие USS и выберите SwirlFilterExample.uss.
В панели Hierarchy выберите родительское VisualElement.
В панели Inspector выберите Встроенные стили > Фильтр.
В разделе Фильтр нажмите кнопку Add(+).
В течение Функция dropdown, выберите Custom.
Установите Определение на SwirlFilter.
В поле Угол установите значение угла, например 58.9.
В поле Радиус установите значение радиуса, например 2.3.

Применить фильтр для UI Builder
Вы можете настроить значения угла и радиуса, чтобы проверить эффект вихревого фильтра в ViewPort из UI Builder.

Сохранить функцию фильтра в USS

Вы можете сохранить функцию фильтра в файл USS вместо того, чтобы применять ее как встроенный стиль.

В панели Inspector родительского VisualElement щелкните в поле Список классов стилей и введите .filter-effect.
Выбрать Извлечение встроенного стиля в новый класс. Это добавляет следующий USS-класс к SwirlFilterExample.uss файл и применяет класс к родительскому VisualElement:
```
.filterEffect {
    filter: filter("SwirlFilter/SwirlFilterFunction.asset" 58.9 2.3);
}
```

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

USS свойства