Стилизация

Стилизация

Изменение свойств стиля непосредственно в UI Builder

Создав каркасные макеты из визуальных элементов, можно перейти к оформлению или сохранить параметры форматирования в виде повторно используемых стилей. Именно в работе со стилями UI Toolkit раскрывает свои основные возможности. Предпочтительно оформлять визуальные элементы через файлы Unity Style Sheet (USS), создаваемые командой Assets > Create > UI Toolkit > StyleSheet. Это аналог веб-файлов CSS с похожим форматом правил. Таблицы USS делают дизайн гибче, упрощают повторное использование и обеспечивают единообразие стилей во всём проекте. Файлы USS определяют размеры, цвета, шрифты, интервалы, границы и положение элементов.

Селекторы USS Пока файл USS не создан, все изменения оформления сохраняются непосредственно в ресурсе UXML как встроенные стили. Они меняют вид только конкретного визуального элемента и не могут повторно использоваться в проекте. Если, например, в проекте сотни кнопок, обновлять стиль каждой по отдельности долго и неэффективно. Вместо этого определите селектор USS. Селекторы позволяют таблицам стилей UI Builder совместно использовать и применять оформление ко множеству элементов в UXML-ресурсах.

Преобразование встроенных стилей в селекторы

Встроенные стили переопределяют остальные стили.

Нажмите Add Style Class to List, введите имя и преобразуйте все встроенные стили элемента в селектор, начинающийся с жёлтой точки «.». Теперь свойства оформления сосредоточены в одном селекторе, который можно применять к другим кнопкам и элементам во всём проекте. Любое изменение селектора автоматически отразится на всех связанных элементах, поэтому такой подход легко масштабировать и сопровождать.

Извлечение всех свойств Inline Style в селектор

Чтобы вынести в новый селектор отдельное встроенное свойство, щёлкните вертикальное многоточие ( ) рядом с ним и выберите Extract Inlined Style to Selector / Add Class. Свойство будет преобразовано в селектор.

Извлечение Inline Style отдельного свойства в селектор

Создание новых селекторов Селекторы находят в визуальном дереве элементы, соответствующие заданным условиям, после чего UI Toolkit применяет к ним изменения стиля. Чтобы добавить селектор, щёлкните поле Add new selector… в левом верхнем углу UI Builder:

Справка по селекторам USS при создании нового селектора

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

- Тип C# элемента. Такие селекторы работают по типу: Button, Label, ListView и т. д. Используются стандартные имена Type из области Library без специальных символов перед именем; селекторы типов отображаются белым. Например, Button применит стиль ко всем элементам типа Button. - Имя или ID. Такой селектор применяет оформление ко всем элементам с одинаковым именем. Перед именем ставится знак решётки #, а сам селектор отображается синим. Например, #title применит стиль ко всем элементам Hierarchy с именем title. Примечание. В отличие от ID в HTML, атрибуты name в UXML не обязаны быть уникальными: UI Toolkit поддерживает UXML-шаблоны и повторно используемые компоненты, поэтому несколько элементов могут иметь одинаковое имя и стиль.

- Класс стиля. Селектор Style Class задаёт повторно используемый стиль, который можно применить к любому визуальному элементу, добавив имя класса в его свойство Class List. Перед именем ставится точка, а селектор отображается жёлтым. Например, чтобы применить класс .smallFont к элементу, добавьте smallFont в его Class List.

- Прямой дочерний элемент. Если после первого условия поставить >, второму условию будут сопоставляться только непосредственные дочерние элементы. Например, селектор #title > Label применит стиль к элементам Label, которые являются прямыми дочерними элементами #title. Элементы Label за пределами этого родителя или глубже в иерархии затронуты не будут. - Потомок на любой глубине. Этот селектор похож на предыдущий, но второе условие применяется к любому потомку независимо от его глубины в иерархии родителя. Примечание. По возможности избегайте чрезмерно широких селекторов, особенно заканчивающихся на * или нацеленных на общие классы Unity вроде .unity-button. Глубокие селекторы потомков могут снижать производительность, если проверяют значительную часть визуального дерева.

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

Список доступных псевдоклассов приведён по ссылке. . Если визуальный элемент соответствует нескольким селекторам, действует селектор с наибольшей специфичностью. В USS приоритет определяется в следующем порядке: 1. Inline Styles. Стили, назначенные непосредственно элементу, например в UXML или коде, имеют наивысший приоритет и переопределяют все селекторы USS. 2. Селекторы ID (#id). Это наиболее специфичные селекторы USS; они применяются к элементам с соответствующим свойством name. 3. Селекторы классов (.className). Применяются к элементам, у которых соответствующий класс добавлен в Class List. 4. Селекторы типов C#, например Button или Label. Они применяются ко всем элементам указанного типа. Если элемент имеет встроенный стиль и одновременно соответствует ID-селектору #title, встроенный стиль переопределяет ID-селектор. Если элемент соответствует селектору класса и селектору типа, приоритет имеет селектор класса. Если несколько селекторов одинаковой специфичности переопределяют одно свойство, решающим становится их порядок в таблице USS: преимущество имеет селектор, расположенный ниже по списку. Подробнее о приоритетах селекторов см. в документации.

Совет: дополнительные сведения в Hierarchy Щёлкните вертикальное многоточие ( ) в заголовке Hierarchy, чтобы вывести дополнительные сведения об элементах UI.

Фильтрация разных селекторов в Hierarchy

В области Hierarchy рядом с Type элемента можно отобразить дополнительные сведения. При включении соответствующих параметров появляются селектор имени #options-bar и селектор класса стиля .options-bar. Некоторые селекторы начинаются с префикса .unity-. Это стандартные стили, применяемые ко всем элементам. Определённые пользователем селекторы переопределяют их значения.

Селекторы, назначенные элементам В инспекторе можно увидеть селекторы, которым соответствует выбранный в Hierarchy элемент. Приоритет имеет селектор в нижней части списка. Разверните подробности, чтобы узнать, какие параметры стиля он изменяет.

Для выбранного визуального элемента в инспекторе показаны соответствующие селекторы

Редактирование селекторов При изменении селектора Style выберите Style Class в области Style Sheet, а не визуальный элемент в Hierarchy. Иначе вы измените встроенный стиль конкретного элемента, но не сам Style Class.

Дважды щёлкните Style Class в инспекторе, чтобы убедиться, что выбран именно он.

Двойной щелчок по Style Class в инспекторе снимает выделение с элемента и выбирает селектор Style. Параметры селектора редактируются так же, как встроенные стили в UXML: выберите селектор в области StyleSheets и задайте переопределения. Изменённые значения выделяются жирным шрифтом и белой линией.

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

Редактирование селектора USS

Многочисленные параметры форматирования позволяют менять основной вид элементов и шрифтов. Расширенные возможности UI Toolkit сокращают потребность в специально подготовленных спрайтах. В UI Builder к элементам можно добавлять контуры, скруглённые углы, настройки изображения и цвета границы. Среди прочих возможностей - эффекты фаски и замена изображения курсора.

UI Toolkit предлагает несколько эффектов оформления, не требующих дополнительных текстур.

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

Примените ко всем кнопкам один стиль, а затем переопределите только уникальные части. Например, каждый Button может задать собственный значок через Background > Image. Такие переопределения представляют собой свойства встроенного стиля (Inline Style).

Совет: встроенные стили имеют приоритет над селекторами Встроенный стиль всегда имеет приоритет над селекторами. Если после применения селектора оформление не меняется, проверьте, нет ли у элемента переопределений.

Переменные USS Переменные USS экономят время, когда одно значение требуется вручную задавать в разных свойствах. При изменении переменной обновляются все использующие её свойства USS. Начиная с Unity 6.1 такие переменные можно настраивать и в редакторе UI Builder.

В Unity 6.1 переменные селекторов USS можно создавать и редактировать в UI Builder

Можно создавать переменные следующих типов: float, color, string, ссылка на ресурс для фоновых изображений, размерность в пикселях, градусах, процентах и других единицах, а также enum. Область видимости переменной ограничена её селектором: использовать переменные из других селекторов нельзя, однако сам селектор можно применить к любому числу элементов.

Назначение свойству переменной вместо непосредственного значения

Анимация переходов USS Переходы между экранами меню заметно улучшают визуальное восприятие интерфейса и удобство работы с ним. В UI Toolkit их довольно легко настроить с помощью свойства Transition Animations в Inspector. Для анимации можно задать Property, Duration, Easing и Delay. После настройки переход будет автоматически воспроизводиться при изменении соответствующих стилей во время выполнения. Например, рассмотрим переход между состояниями кнопки: псевдокласс :hover для селектора класса .green-button. У каждого состояния заданы свои размер и цвет. Чтобы определить переход при наведении указателя, настройте Transition Animations для селектора .green-button:hover в нижней части Inspector. В результате кнопка будет плавно реагировать на перемещения указателя.

С помощью Transition Animations можно плавно переходить от одного стиля к другому.

Transition Animations выполняет интерполяцию между стилями со следующими параметрами:

- Property: определяет, какое свойство интерполировать. По умолчанию выбрано значение all, но в раскрывающемся списке можно указать отдельное свойство. В приведённом выше примере состояние :hover изменяет только свойства Color и Transform. Полный перечень доступен в списке анимируемых свойств. - Duration: длительность перехода в секундах или миллисекундах. Чтобы переход был виден, значение Duration должно быть больше 0. - Easing Function: функция сглаживания определяет, как анимация развивается во времени, и позволяет имитировать естественное движение - например, ускорение, замедление или упругость. Благодаря сглаживанию переход выглядит плавнее и естественнее, чем при простой линейной интерполяции с постоянной скоростью.

Эта памятка поможет наглядно представить доступные функции (визуализация предоставлена сайтом https://easings.net/).

- Delay: задержка в секундах или миллисекундах перед началом перехода. - Add Transition: каждое свойство нового состояния можно анимировать отдельно, задав для него собственные длительность, задержку и функцию сглаживания. Нажмите Add Transition, чтобы добавить в цепочку ещё один анимированный переход. Так можно одновременно запускать несколько перекрывающихся переходов, делая движение более естественным и менее механическим.

Совет: события переходов Для анимируемых визуальных элементов можно регистрировать обратные вызовы событий перехода. Они необходимы для более сложных сценариев, например последовательного или циклического воспроизведения. Ниже перечислены распространённые события и моменты их отправки: - TransitionRunEvent: отправляется при создании перехода. - TransitionStartEvent: отправляется после завершения фазы задержки, когда начинается переход. - TransitionEndEvent: отправляется после завершения перехода.

- TransitionCancelEvent: отправляется при отмене перехода. Подробнее о переходах USS см. в документации

Для анимации визуальных элементов дополнительный код не требуется: псевдоклассы (:active, :inactive, :hover и другие) могут иметь собственные селекторы. Когда псевдокласс изменяет стиль, все заданные переходы автоматически анимируют это изменение. Например, кнопка может увеличиваться или уменьшаться при наведении (:hover) либо нажатии (:active), а элементы - постепенно исчезать или становиться невидимыми в зависимости от действий пользователя и других событий. Набор псевдоклассов предопределён; создавать собственные псевдоклассы нельзя.

Смена стилей по требованию При любых других событиях игры оформление также можно изменять из кода с помощью API элементов UI. Например, чтобы выбирать стиль в зависимости от редкости персонажа, используйте методы RemoveFromClassList и AddToClassList.

if (character.rarity == RarityType.Legendary) {
    visualElement.RemoveFromClassList("common");
    visualElement.AddToClassList("legendary");
}

Кроме того, можно задействовать псевдоклассы :active и :inactive, зависящие от состояния активности визуального элемента, и применять переходы USS при смене этого состояния. Так они могут представлять состояния «до» и «после».

Кнопки панели меню в примере UI Toolkit Sample - Dragon Crashers используют PointerEventClick для запуска некоторых переходов вручную.

Совет: переопределение стандартных селекторов Unity Более сложные визуальные элементы, например представление Tab, состоят из родительского элемента и заранее определённых системой дочерних элементов. При добавлении содержимого такие элементы ведут себя особым образом, а применённые стили могут выглядеть недоступными для редактирования, поскольку созданы Unity. Любой стандартный селектор можно переопределить: дважды щёлкните используемый селектор и создайте его копию для редактирования в своей таблице стилей USS.

Темы Если вы хотите создать сезонную версию интерфейса или предложить несколько цветовых схем, упростить работу помогут таблицы стилей темы Theme Style Sheets (TSS). Чтобы создать файл TSS, выберите Create > UI Toolkit > TSS theme file.

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

В этом примере элементов интерфейса в стиле Хэллоуина тема Halloween TSS сначала наследуется от Unity Default Runtime TSS, а затем добавляет тематические таблицы стилей для шрифтов и кнопок.

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

Показанная на снимке экрана тема Halloween TSS использует файл Halloween-buttons.uss. Однако в нём нет селектора .button-accept, применённого к кнопке, поэтому для неё используется соответствующий селектор исходной темы.

Создать новую тему на основе существующей можно следующим образом:

1. Создайте файл TSS и добавьте в него тему, от которой нужно наследоваться, а также новый файл USS для этой темы. 2. В UI Builder в разделе StyleSheets нажмите Add Existing USS и выберите файл, который будет использовать новая тема. 3. Скопируйте селектор, который должна переопределить новая тема. 4. Вставьте его в файл USS новой темы, затем щёлкните правой кнопкой мыши и выберите Set as Active USS. 5. Отредактируйте селектор в новом файле USS. 6. В раскрывающемся списке UI Builder можно посмотреть стиль, применяемый той или иной темой.

Выберите тему, которую нужно применить в области просмотра UI Builder.

Для использования во время выполнения укажите новую тему в поле Theme Style Sheet инспектора Panel Settings.