Применение общих эффектов с встроенными фильтрами

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

Встроенные функции фильтрации

UI Toolkit предоставляет набор встроенных функций фильтров, которые можно использовать для применения общих эффектов к визуальным элементам. Они похожи на фильтры CSS.

filter: blur(<length>) | grayscale(<number>) | invert(<number>) | opacity(<number>) | sepia(<number>) | tint(<color>) | hue-rotate(<angle>) | contrast(<number>)

Следующий пример демонстрирует эффекты различных функций фильтров:

Оригинальное изображение	blur(20px)	grayscale(100%)	invert(100%)	opacity(50%)	sepia(100%)	tint(#00ff99)	hue-rotate(90deg)	contrast(200%)

Примечание:

• Функция tint является функцией фильтра, специфичной для Unity, которая затеняет элемент цветом. Эта функция не поддерживается в CSS.
• USS не поддерживает функции фильтров drop-shadow и CSS.

Применение встроенных фильтров к визуальным элементам

Вы можете применять встроенные фильтры к визуальным элементам в коде UI Builder, USS или C#. Вы также можете комбинировать несколько функций фильтра для создания сложных эффектов.

Примечание: Фильтры работают как последовательный конвейер, где каждый проход обрабатывает выход предыдущего прохода. Проход N может читать только из прохода N-1, а не из прохода N-2 или более раннего.

Применить фильтры в UI Builder

Вы можете применять встроенные фильтры к визуальным элементам непосредственно в UI Builder:

1. Откройте UI Builder и создайте новый файл UXML или откройте существующий.
2. Выберите визуальный элемент, к которому нужно применить фильтр.
3. В панели Inspector выберите Встроенные стили > Фильтр.
4. Нажмите кнопку Добавить (+), чтобы добавить функцию фильтра.
5. Выберите встроенную функцию фильтра из раскрывающегося меню, например blur, grayscaleили invert.
6. Установите параметры для функции фильтра, такие как радиус размытия или процент оттенков серого.
7. Повторите шаги 4-6, чтобы добавить дополнительные функции фильтрации, если это необходимо.

Применить фильтры с USS

Чтобы применить фильтр к визуальному элементу, используйте свойство filter в файле USS. Фильтры USS следуют синтаксису фильтра CSS. Например:

.builtin-blur {
    filter: blur(20px);
}

.builtin-blur-invert {
    filter: blur(5px) invert(100%);
}

Если вы объявляете несколько классов, каждый из которых задаёт фильтр, и применяете их к элементу, эффекты не складываются: приоритет получает фильтр, применённый последним.

Например, если к элементу применены оба следующих класса:

.blur {
    filter: blur(20px);
}

.sepia {
    filter: sepia(100%);
}

И вы применяете оба класса к элементу, например, <engine:VisualElement class="blur sepia" />. Элемент имеет только эффект сепии.

Дополнительные сведения см. в Предпочтение селекторов.

Применить фильтры в коде C#

Чтобы применить фильтры к визуальному элементу в коде C#, создайте список объектов FilterFunction и назначите его свойству style.filter визуального элемента. Например:

// Apply blur filter directly. This is equivalent to CSS: filter: blur(20px);. 
var blur = new FilterFunction(FilterFunctionType.Blur);
blur.AddParameter(new FilterParameter(20.0f));
staticBlurButton.style.filter = new List<FilterFunction> { blur };

Чтобы анимировать параметры фильтра со временем, вы можете использовать систему планирования Unity для обновления параметров фильтра в обратном вызове. Например, следующий код анимирует радиус размытия фильтра кнопки. Чтобы избежать ненужных распределений, кэшируйте список для повторного использования, как показано в следующем примере:

// Initialize cached filter list once.
var animatedBlurFilterList = new List<FilterFunction>(1);

// Animation variables.
float blurAmount = 1.0f;
float animationTime = 0f;
const float animationDuration = 2f;
const float maxBlur = 20f;
bool increasing = true;

// Use Unity's built-in scheduling system to animate the blur amount.
animatedBlurButton.schedule.Execute((timerState) => {
    float deltaTime = (timerState.deltaTime / 1000.0f);
    animationTime += deltaTime;
    
    // Calculate normalized time (0-1).
    float normalizedTime = (animationTime % animationDuration) / animationDuration;
    
    // Apply ease in-out sine curve and yoyo behavior.
    if (increasing)
    {
        blurAmount = 1f + (maxBlur - 1f) * Mathf.Sin(normalizedTime * Mathf.PI * 0.5f);
        if (normalizedTime >= 1f)
        {
            increasing = false;
            animationTime = 0f;
        }
    }
    else
    {
        blurAmount = maxBlur - (maxBlur - 1f) * Mathf.Sin(normalizedTime * Mathf.PI * 0.5f);
        if (normalizedTime >= 1f)
        {
            increasing = true;
            animationTime = 0f;
        }
    }
    
    // Create a new filter with the current blur value.
    var updatedBlur = new FilterFunction(FilterFunctionType.Blur);
    updatedBlur.AddParameter(new FilterParameter(blurAmount));

    // Clear and add the filter to reuse the cached list.
    animatedBlurFilterList.Clear();
    animatedBlurFilterList.Add(updatedBlur);
    animatedBlurButton.style.filter = animatedBlurFilterList;
}).Every(16); // ~60fps (16ms intervals)

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

• Создание и применение пользовательских фильтров
• Создать пользовательский вихревой фильтр