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

Начните с UI Shader Graph

Вы можете использовать Shader Graph для создания пользовательских шейдеров для UI Чтобы понять, как UI Shader Graph Если вы не уверены, как это работает, попробуйте следующий простой пример, чтобы начать. Этот пример создает пользовательский шейдер, который применяет градиентный эффект к кнопке. Для более подробного обзора UI Shader Graph, см. Введение в UI Shader Graph.

Примечание: UI Shader Graph работает только с URP (Universal Render Pipeline).

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

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

Создание шейдера с градиентным эффектом

Когда вы создаете шейдер для элементов UI, вы обычно используете узел ветки Тип отображения для обработки различных типов рендеринга. Следующие шаги создают простой шейдер, который применяет эффект искажения UV к типу рендеринга кнопки в однотонном цвете.

Создайте проект с любым шаблоном URP.
В окне Project щелкните правой кнопкой мыши папку Assets и выберите Создать > Shader Graph > URP > UI Shader Graph. Это создаст ассет UI Shader Graph, настроенный для отображения UI.
Назовите новый ассет MyCustomShader.
Дважды щелкните MyCustomShader, чтобы открыть его в редакторе Shader Graph.
Выберите Создать узел > UI > Тип отображения Ветка.
Выберите Создать узел > UV > UV Искривление.
Подключите выход UV узла UV Distortion к входу Твердые узла Render Type Branch.
Подключите выход Цвет узла Render Type Branch к входу Base Color узла Fragment.
Подключите Альфа Выпуск продукции Ветвь типа рендеринга узел к Альфа вклада Фрагмент узел. С шейдером в 2000 году Главный Предварительный просмотр окно показывает результат шейдера, примененного к фону для SDF и растровый текст.

Пример простого графа шейдера
Сохранить шейдер.

Применить шейдер к элементам UI

Чтобы применить пользовательский шейдер к элементу UI, вам нужно создать новый материал, который использует ваш шейдер, а затем назначить этот материал элементу UI. Следующие шаги показывают, как назначить пользовательский шейдер, созданный в предыдущем разделе, кнопке в UI Builder. Вы также можете назначить пользовательские шейдеры с помощью скриптов USS или C#.

Щелкните правой кнопкой мыши в папке Assets и выберите Создать > Материал.
Назовите новый материал MyCustomMaterial.
В окне Inspector вашего нового материала выберите MyCustomShader из раскрывающегося списка Шейдер, чтобы назначить его материалу.
В меню выберите Окно > UI Toolkit > UI Builder открыть сессию UI Builder окно.
Из панели Библиотека перетащите элемент Кнопка в панель Hierarchy, чтобы добавить кнопку в ваш Документ UI.
В панели Inspector для кнопки из раскрывающегося списка Материал выберите MyCustomMaterial, чтобы назначить материал кнопке. В окне Видовой проем в окне UI Builder показана кнопка с примененным пользовательским шейдером.

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

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

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

Введение в UI Shader Graph
Shader Graph документация
-unity-material