Unity 6.3
0 онлайн 111 гостей 3 в системе
Вход
← UI системы Шаг 165 из 317

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

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

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

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

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

Пример эффекта вихревого фильтра
Пример эффекта вихревого фильтра

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

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

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

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

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

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

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

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

  1. Создайте проект в Unity с любым шаблоном.

  2. В папке Assets создайте папку SwirlFilter.

  3. Загрузите и импортируйте следующие файлы в SwirlFilter папка:
    • Swirl.shader
    • Swirl.mat

  4. Чтобы создать ассет FilterFunctionDefinition, щелкните правой кнопкой мыши папку SwirlFilter и выберите Создать > UI Toolkit > Определение функции фильтрации.

  5. Переименуйте ассет в SwirlFilter.

  6. В окне Inspector для ассета SwirlFilter установите Filter Name на swirl.

  7. В разделе Параметры добавьте два параметра и установите Тип обоих параметров на float.

  8. Установите имя первого параметра на Angle. Этот параметр контролирует угол вихревого движения.

  9. Установите имя второго параметра на Radius. Этот параметр управляет радиусом вихревого движения.

  10. В разделе Пассажи добавьте новый элемент и установите Материал на Swirl.shader.

  11. В течение Привязки параметров раздел, добавить две связки.

  12. Для первой привязки выполните следующие действия:

    • Установите индекс с на 0.
    • Установить Имущество до _Angle.

  13. Для второй привязки выполните следующие действия:

    • Установите индекс с на 1.
    • Установить Имущество до _Radius.
    Определить вихревой фильтр в окне Inspector
    Определить вихревой фильтр в окне Inspector

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

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

  1. Создайте новый файл 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);
}

  2. Создайте новый файл 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 и установите параметры.

  1. Дважды щелкните файл SwirlFilterExample.uxml, чтобы открыть его в UI Builder.

  2. В панели StyleSheets выберите + > Добавить существующие USS и выберите SwirlFilterExample.uss.

  3. В панели Hierarchy выберите родительское VisualElement.

  4. В панели Inspector выберите Встроенные стили > Фильтр.

  5. В разделе Фильтр нажмите кнопку Add(+).

  6. В течение Функция dropdown, выберите Custom.

  7. Установите Определение на SwirlFilter.

  8. В поле Угол установите значение угла, например 58.9.

  9. В поле Радиус установите значение радиуса, например 2.3.

    Применить фильтр для UI Builder
    Применить фильтр для UI Builder

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

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

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

  1. В панели Inspector родительского VisualElement щелкните в поле Список классов стилей и введите .filter-effect.

  2. Выбрать Извлечение встроенного стиля в новый класс. Это добавляет следующий USS-класс к SwirlFilterExample.uss файл и применяет класс к родительскому VisualElement:

    .filterEffect {
    filter: filter("SwirlFilter/SwirlFilterFunction.asset" 58.9 2.3);
}

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

← Предыдущий шагUSS переходы фильтра