创建自定义漩涡过滤器

您可以创建自定义滤镜以将您想要的任何效果应用于视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表.要创建自定义过滤器，请在自定义过滤器资产中定义过滤器函数。自定义筛选器资产定义筛选器参数、通道和参数绑定。

此示例演示了在自定义过滤器资产的检查器一个 Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
请参阅术语表窗。还可以在 C# 代码中创建自定义筛选器。

示例概述

此示例创建具有漩涡效果的自定义滤镜，该滤镜通过围绕中心点旋转视觉元素来扭曲视觉元素。

您可以提供带有参数的自定义过滤器函数，在样式中设置或直接在 UI Builder 中设置。例如，内置的模糊滤镜功能只有一个参数：模糊半径。此自定义漩涡滤波器函数有两个参数，漩涡的角度和半径：

角度：设定漩涡效果的角度。
半径：设定漩涡效果的半径。

此示例使用示例漩涡着色器和material（材质）定义表面应如何渲染的资产。更多信息
请参阅术语表以创建漩涡过滤器。这着色器在 GPU 上运行的程序。更多信息
请参阅术语表，它定义了效果，包括两个属性——_Angle和_Radius- 以控制漩涡的角度和半径。材料文件Swirl.mat，配置为使用漩涡着色器。要应用效果，请将材质属性绑定到滤镜参数。

您可以在此 GitHub 存储库中找到该示例的已完成文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容：

创建自定义过滤器资产

创建筛选器资产，并在资产的“检查器”窗口中定义筛选器参数、通道和参数绑定。

使用任何模板在 Unity 中创建项目。
在Assets文件夹中，创建一个名为SwirlFilter.
下载以下文件并将其导入到SwirlFilter文件夹：
- 漩涡着色器
- 漩涡垫
要创建FilterFunctionDefinition资源，右键单击SwirlFilter文件夹，然后选择“创建>UI 工具包”>“筛选器函数定义”。
将资产重命名为SwirlFilter.
在 Inspector 窗口中，用于SwirlFilter资产，请将过滤器名称设置为swirl.
在“参数”部分中，添加两个参数并将两个参数的“类型”设置为float.
将第一个参数的名称设置为Angle.这控制了漩涡的角度。
将第二个参数的名称设置为Radius.这控制漩涡的半径。
在 通道（Passes）分段中，添加一个新元素，并将 材质（Material） 设置为Swirl.shader.
在“参数绑定”部分中，添加两个绑定。
对于第一个绑定，请执行以下作：
- 将索引设置为0.
- 将属性设置为_Angle.
对于第二个绑定，请执行以下作：
- 将索引设置为1.
- 将属性设置为_Radius.
在“检查器”窗口中定义漩涡过滤器

创建 UI 文档和样式表

要获得漩涡效果，请创建一个包含两个具有不同背景颜色的 VisualElements 的 UXML 文件。第一个 VisualElement 是父元素，第二个 VisualElement 是子元素。将自定义过滤器应用于父元素，以便子元素受过滤器的影响。

创建一个名为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>

创建一个名为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 Builder 中应用自定义过滤器

要在 UI Builder 中应用自定义过滤器，请将自定义过滤器功能添加到 UI Builder 并设置参数。

双击SwirlFilterExample.uxml文件以在 UI Builder 中打开它。
在“样式表”面板中，选择“+”>“添加现有 USS”，然后选择SwirlFilterExample.uss.
在“层次结构”面板中，选择父级 VisualElement。
在“检查器”面板中，选择“内联样式”>“筛选器”。
在“过滤器”部分中，单击“添加”（+） 按钮。
在函数下拉列表中，选择Custom.
将“定义”设置为SwirlFilter.
在“角度”字段中，设置角度值，例如58.9.
在“半径”字段中，设置半径值，例如2.3.

在 UI Builder 中应用漩涡过滤器

您可以调整角度和半径值，以查看漩涡滤镜在视口用户在屏幕上应用的可见区域。
请参阅术语表的 UI Builder。

将过滤功能保存到 USS

您可以将过滤器功能保存到 USS 文件，而不是将其应用为内联样式。

在父 VisualElement 的“检查器”面板中，单击“样式类列表”字段，然后输入.filter-effect.
选择“将内联样式提取到新类”。这会将以下 USS 级添加到SwirlFilterExample.uss文件并将类应用于父 VisualElement：
```
.filter-effect {
    filter: filter("SwirlFilter/SwirlfFilterFunction.asset" 58.9 2.3);
}
```

添加资源

USS 属性

USS 颜色关键字

USS 自定义属性（变量）

手册

创建自定义漩涡过滤器

示例概述

先决条件

创建自定义过滤器资产

创建 UI 文档和样式表

在 UI Builder 中应用自定义过滤器

将过滤功能保存到 USS

添加资源