UI Toolkit Shadows, Outlines & Glow

Свечение, контуры и тени для элементов вашего пользовательского интерфейса Toolkit.

Свечение, контуры и мягкие тени для элементов вашего UI Toolkit.

✔️ Свечение и контуры

Выберите два цвета и наслаждайтесь эффектом свечения. Выберите один и тот же цвет для обоих, и получится контур. ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: свечение НЕ является шейдерным эффектом BLOOM (UI Toolkit пока не поддерживает шейдеры). Это простой цветовой эффект vertex (как показано на видео). *Более подробная информация приведена ниже.

✔️ Тени

Если вам нужны настоящие прямоугольные тени, вы можете обернуть свои элементы в элемент управления тенями. Хотя вы также можете довольно точно имитировать тени с помощью манипуляторов неразрушающего свечения.

😎 Неразрушающий рабочий процесс для glow и outlines

Для этого не требуется изменять существующую иерархию пользовательского интерфейса. Он работает с манипуляторами и, следовательно, может быть добавлен к любому существующему элементу пользовательского интерфейса. Просто добавьте компонент в свой документ пользовательского интерфейса, и все готово к работе.

Информация: Для теней вам нужно будет использовать пользовательский элемент управления "Тень" (подробнее об этом ниже или в руководстве).

💫 Анимация

Используйте настройки анимации, чтобы оживить свой пользовательский интерфейс.

Вы также можете получить контроль над каждой вершиной для полной настройки (для этого требуется некоторое кодирование, примеры прилагаются).

✔️ Атрибуты USS

Управляйте каждым свойством с помощью пользовательских атрибутов свечения.

✔️ Удобные функции

* Наследование цветов границы: позволяет быстро добавлять контуры, соответствующие цвету границы (и вы также можете подкрашивать их).

* Разделение ширины свечения: управляйте шириной свечения с каждой стороны отдельно (полезно для эмуляции теней).

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

📚 Множество примеров и документации

Ознакомьтесь с Kamgam/UIToolkitGlow/Examples.

✔️ Поддерживает URP, HDRP и встроенные

Нет пользовательских шейдеров. Он генерирует геометрию и использует цвета вершин.

✔️ Полный исходный код

Я публикую этот ресурс с полным исходным кодом, потому что, как разработчик, я знаю, как раздражает отсутствие доступа к исходному коду. Если вам это нравится, пожалуйста, напомните другим о покупке плагина. Не копируйте и не вставляйте его везде (за исключением лицензионных частей MIT, которые вы можете скопировать). Спасибо тебе ❤️

✔️ Поддерживает Unity 2021.3+, 2022, Unity 6, Unity 6.3, ... LTS

Возможно, это работает и с более ранними версиями, но они больше не тестируются.

👇 Что вам следует знать* 👇

(Прочтите это перед покупкой)

😲️ Это не продукт uGUI или IMGUI. Это для нового набора инструментов пользовательского интерфейса.

😢️ Это (пока) не полнофункциональное решение для USS BOX SHADOW. Unity объявила, что со временем они добавят их (источник).

Поскольку контур нарисован внутри элемента, вам придется установить значение "ВИДИМЫЙ" для параметра "Переполнение", иначе сетка контура будет обрезана. Если вы хотите, чтобы переполнение было скрыто, то, пожалуйста, разместите дочерний элемент внутри элемента для отсечения.

⚠️ Свечение НЕ является эффектом шейдера BLOOM. К сожалению, UI Toolkit пока не поддерживает пользовательские шейдеры, и поэтому мы не можем добавить к нему эффекты постобработки. Свечение в этом активе основано на цвете вершин. Это будет выглядеть не так красиво, как эффект цветения или свечения на основе шейдеров. Пожалуйста, взгляните на изображения и видео выше, они взяты непосредственно из демонстрационных сцен Unity.

⚠️ Анимация выполняется с помощью вершинной анимации на процессоре (ограничение Unity в UI Toolkit). Будьте осторожны при анимации большого количества элементов одновременно. Обычно это не просто "Вы были предупреждены!". Если у вас возникнут какие-либо проблемы, пожалуйста, свяжитесь со службой поддержки. Возможно, нам удастся найти индивидуальное решение.

❗️ Если вам нужен точный контур, основанный на пиксельной информации изображения (альфа/прозрачность), то это не тот ресурс, который вам нужен. Он генерирует прямоугольные или закругленные контуры (или более сложные контуры с анимацией), но они не основаны на информации о пикселях (альфа / прозрачность) любого изображения.

⚠️ Требуется Unity 2021.3 или более поздней версии (настоятельно рекомендуется использовать версии LTS).

* Я знаю, что некоторые из этих ограничений раздражают. Большинство из них связано с отсутствием функций в UI Toolkit. Однако UI Toolkit все еще разрабатывается Unity, и я уверен, что со временем ситуация улучшится.

✍️ Использование

Worflow A (пользовательские элементы управления)

1) Добавьте элементы управления свечением или тенью в свой макет пользовательского интерфейса

2) Разместите содержимое внутри.

3) Готово

Worflow B (неразрушающий)

1) Добавьте GlowDocument в свой документ пользовательского интерфейса в сцене

2) Настройте новую конфигурацию glow (или повторно используйте существующую)

3) Задайте имя класса (например, "glow-100").

4) Добавьте класс в список классов в UI Builder (или в вашем UXML).

5) Готово

😎 ПОДСКАЗКА 1:

Вы можете использовать либо компонент UI Toolkit Glow, либо компонент UI Toolkit Shadow для обертывания ваших элементов, либо использовать компонент GlowDocument в вашем документе пользовательского интерфейса, который затем позволит вам добавлять и удалять эффекты с помощью имен классов.

🧐 ПОДСКАЗКА 2:

Используйте информацию о внешних вершинах в OnBeforeMeshWrite, чтобы анимировать только внешние вершины. Также в GlowManipulator есть удобный метод "DisplaceVertexOutwardsNormalized()" для перемещения вершин вдоль вектора, направленного наружу.

🤠 ПОДСКАЗКА 3:

Используйте цвета тени, чтобы имитировать свечение элементов пользовательского интерфейса.

Используйте GlowUtils.Зарегистрируйте функцию Toggleclassonhover(), чтобы легко добавлять контуры при наведении курсора мыши на элементы.