Стиль

Содержание

• USS селекторов

  • Преобразовать существующие встроенные стили в селекторы
  • Создать новые селекторы
  • Селекторы, назначенные элементам
  • Редактирование селекторов
  • Переопределение стилей
  • USS переменные

• USS переходы анимации

• Смена стилей по запросу

• Темы

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

Добавление стиля к визуальным элементам предпочтительно осуществляется с помощью Unity таблица стилей (USS) файлы (Активы > Создать > UI Toolkit > StyleSheet). Они являются Unity эквивалент веб CSS Они также добавляют гибкость к процессу проектирования, делая его легким для повторного использования и стилей согласованных по всему проекту в масштабе.

Файлы USS определяют размер, цвет, шрифт, промежутки, границы или расположение элементов.

Селекторы USS

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

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

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

Используйте Добавить класс стиля в список кнопка для ввода и преобразования всех встроенных стилей элемента в селектор (начиная с “.Этот селектор теперь централизует свойства стиля, позволяя применять последовательные стили к другим кнопкам (или другим элементам) по всему проекту. Любые изменения, сделанные в селекторе, будут автоматически отражаться на всех связанных элементах, делая процесс масштабируемым и поддерживаемым.

Чтобы извлечь конкретные встроенные стили в новый селектор, нажмите на вертикальный многоточие (⋮) рядом со свойством и выберите Извлечение встроенного стиля в селектор / Добавление класса, что превращает это свойство в селектор.

Создание новых селекторов

Селекторы запрашивают в визуальном дереве любые элементы, соответствующие заданным критериям поиска. UI Toolkit Вы можете добавить новый селектор, нажав на поле, в котором вы хотите добавить новый селектор. Добавить новый селектор… в левом верхнем углу UI Builder:

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

• Элемент C# тип: Эти селекторы работают по типу (Button, Label, ListView и т.д.) Селектор соответствует имеющимся по умолчанию названиям типов в панели Библиотеки. Они не имеют специальных символов перед именем. Селекторы классов отображаются белым цветом. Например, Кнопка применит стиль ко всем элементам типа Кнопка

• Имя или ID: Эти селекторы могут применять стиль ко всем элементам с одним и тем же именем. Селекторы имен имеют предшествующий символ хэша “#” и отображаются синим цветом. Например, #title будет применять стиль ко всем элементам в Hierarchy с именем название.

  • Примечание: UXML атрибуты имен (в отличие от HTML IDs) не нужно быть уникальным, потому что UI Toolkit поддержки UXML шаблоны и многоразовые компоненты, позволяющие нескольким элементам иметь одно и то же имя и стиль.

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

• Прямой дочерний элемент: Если вы добавите > после критерия соответствия, то будут затронуты только прямые дочерние элементы, соответствующие второму критерию после символа >. Например, селектор #title > Меткаприменит стиль к любому типу Метки внутри элементов с именем #title. Любая Метка вне этого родительского элемента или глубже в иерархии не будет затронута.

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

  • Примечание: Избегайте чрезмерно широких селекторов, когда это возможно (особенно тех, которые заканчиваются на * или нацелены на общие классы Unity, такие как .unity-button). Глубокие дочерние селекторы могут потенциально замедлить производительность, если они оценивают большую часть визуального дерева.

• Pseudo-class: Псевдоклассы позволяют задать разные стили для визуальных элементов, когда те меняют состояние, — например, когда на них наводят указатель мыши или когда они получают фокус. Псевдоклассы обозначаются двоеточием : и изменять существующие селекторы.

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

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

Иерархия специфичности в USS выглядит следующим образом:

1. Встроенные стили: стили, применённые непосредственно к элементу (например, в UXML или через код), имеют наивысший приоритет и переопределяют все селекторы USS.

2. Селекторы и ID Селекторы (#id): Это наиболее специфические селекторы USS, которые применяются к элементам с уникальным свойством имени.

3. Селекторы классов (.className): применяются к элементам, у которых соответствующий класс добавлен в их Список классов.

4. C# Селекторы типа (e.g., Button, Label): применяются ко всем элементам указанного типа.

Например, если у элемента есть встроенный стиль и он при этом соответствует селектору идентификатора #title, встроенный стиль переопределит селектор идентификатора. Аналогично, если элемент соответствует и селектору класса, и селектору типа, приоритет будет у селектора класса.

Если возникает ничья, когда одно и то же свойство пытаются переопределить несколько селекторов с одинаковой специфичностью, решает порядок в таблице стилей USS: приоритет получают селекторы, расположенные ниже в списке.

Дополнительную информацию о приоритете селекторов можно найти в документация.

💡 Совет: Дополнительная информация о Hierarchy

Нажмите на вертикальный многоугольник (и) в заголовке Hierarchy для дальнейшей визуализации элементов UI.

В панели Hierarchy рядом с элементом Тип отображается дополнительная информация. При установленном флаге отображаются селектор имени #options-bar и селектор класса стиля .options-bar.

Вы можете заметить, что некоторые селекторы начинаются с .unity- префикс. Это стили по умолчанию, применяемые ко всем элементам. Любые заданные селекторы переопределяют эти значения.

Селекторы, назначенные элементам

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

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

При модификации селектор стиля, убедитесь, что вы выбрали Класс стиля в 2000 году Таблица стилей панели – не визуальный элемент от Hierarchy. В противном случае, вы измените встроенный стиль для конкретного элемента, а не для самого Класса Стилей.

Вы можете дважды щелкнуть Класс Стиля в Inspector, чтобы отменить выбор элемента и выбрать вместо этого Селектор Стиля.

Так же, как и при изменении параметров как встроенных стилей непосредственно в UXML, вы можете изменять параметры в селекторах, выбирая их в панели StyleSheets и модифицируя с переопределениями. Изменения также будут показаны жирным шрифтом с белой линией рядом с ними. Чтобы отменить значение, вы можете сделать это из меню вертикальных многоточий (r) рядом со свойством.

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

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

Переопределение стилей

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

Например, если у вас есть сотни элементов Button, но каждый из них имеет другую иконку, вам не нужно создавать новый селектор для каждого из них. Это подорвало бы цель (удобство) создания стилей для повторного использования.

Вместо этого примените один и тот же стиль ко всем кнопкам, а затем переопределите те части каждой из них, которые уникальны (например, каждый элемент Button может переопределить Фон > Изображение использует свой собственный значок). Эти переопределения являются Встроенный стиль свойства.

💡 Совет: Встроенные стили имеют приоритет над селекторами

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

Переменные USS

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

Вы можете создавать переменные типа: float, color, string, asset reference (для фоновых изображений), размеров (например, пикселей, градусов, процентов и т.д.) и enums. Переменные имеют область применения на уровне селекторов; вы не можете использовать переменные, присутствующие в других селекторах, но сами селекторы могут быть применены к такому количеству элементов, которое необходимо.

USS анимации переходов

USS анимации переходов

Добавление переходов на экраны меню может значительно улучшить визуальное оформление и пользовательский опыт. UI Toolkit делает это относительно простым с помощью свойства Transition Animations в Inspector.

Для настройки анимации можно настроить свойства Свойства, Продолжительность, Смягчение и Задержка. После настройки переход автоматически применяется, когда соответствующие стили изменяются во время выполнения.

Подумайте о переходе между псевдо-классами Button – Направление: псевдокласс поверх .green-кнопка Выбор класса. Каждый стиль имеет свой размер и цвет.

Чтобы задать переход для состояния наведения мыши, селектор .green-button:hover имеет Анимации Перехода, расположенные в нижней части Inspector. Результатом является Кнопка, анимирующаяся при движении указателя.

Переход Animation интерполирует между стилями со следующими параметрами:

• Имущество: Это определяет, что интерполировать. По умолчанию все, но вы можете выбрать конкретное свойство в раскрывающемся списке. В приведенном выше примере Направление: состояние меняет только Цвет и Transform свойстваСм. полный список анимированных свойств.

• Продолжительность: Это длина перехода, выраженная в секундах или миллисекундах. Чтобы он был видимым, Duration должен быть установлен выше 0.

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

Используйте следующий лист, чтобы помочь вам визуализировать доступные функции (визуализация предоставлена https://easings.net/):

• Задержка: Определяется в секундах или миллисекундах, это указывает, сколько времени ждать перед началом перехода.

• Добавить переход: Каждое свойство нового состояния можно анимировать по отдельности — с разной длительностью, задержкой и функцией сглаживания.

  • Нажмите кнопку Добавить переход для цепной анимации перехода. Это позволяет запускать несколько переходов одновременно, что делает их более естественными и менее механическими.

💡 Совет: Переходные события

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

Ниже приведены некоторые типичные события перехода с пояснениями, когда они отправляются:

— TransitionRunEvent: Отправляется при создании перехода — TransitionStartEvent: Отправляется при завершении фазы задержки перехода и начале перехода — TransitionEndEvent: Отправляется при завершении перехода — TransitionCancelEvent: Отправляется при отмене перехода

Подробнее о переходах USS читайте в этой документации.

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

Псевдоклассы предопределены, и вы не можете создавать свои собственные.

Смена стилей по требованию

Для любых других событий в вашей игре вы также можете изменить стиль в коде, используя методы из UI Элемента APIs.

Например, для изменения стиля, основанного на редкости персонажа, можно использовать методы RemoveFromClassList и AddToClassList.

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

Дополнительно можно вызвать псевдокласс :active или :inactive который опирается на состояние включённости визуального элемента, чтобы получить USS-переходы при изменении состояния. Так они могут отражать состояние до и после.

💡 Совет: Переопределение Unity селекторов по умолчанию

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

Темы

Если вы хотите сделать сезонную версию UI или предложить различные цветовые стили, Theme Style Sheets (TSS) может упростить этот процесс. Создайте TSS через Create > UI Toolkit > TSS файл темы.

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

Наследованные темы означают, что если в новой теме отсутствуют таблицы стилей с селекторами по сравнению с первоначальной, то будет применен стиль последней. Это облегчает настройку. Например, вы можете создать новую тему, которая модифицирует только шрифты, оставляя остальную часть UI (такую как цвета, заполнение или рамки) стилизованной в соответствии с первоначальной темой. Этот подход полезен для таких сценариев, как реализация светлого/темного режима, настройка по персонажам UI или создание тем событий для конкретной игры.

Порядок работы по созданию новых тем на основе существующих мог бы быть следующим:

1. Создайте новый файл TSS и добавьте тему для наследования и новый файл USS для использования этим новым файлом TSS.

2. В UI Builder > StyleSheetsнажмите Добавить существующие USS и выберите ту, которую будет использовать новая тема.

3. Скопируйте селектор, который будет переопределять новая тема.

4. Вставьте его в USS, который использует новая тема, затем щелкните правой кнопкой мыши и выберите Настроить как активный USS.

5. Редактировать селектор в новом USS.

6. Вы можете увидеть стиль, используемый одной темой или другой из выпадающего списка в UI Builder.

Во время выполнения, укажите ссылку на вашу новую тему в поле Theme Style Sheet в Panel Settings Inspector.