UI Toolkit · Советы по повышению продуктивности в Unity 6

UI Toolkit

Создавайте интерфейс по визуальному референсу Фон Canvas помогает оценить оформление элементов поверх заданного цвета или фонового изображения. Выберите UXML-файл в панели Hierarchy, а затем задайте Canvas background, приближённый к итоговому интерфейсу, чтобы оценивать изменения стиля в контексте. Для Canvas background доступно несколько вариантов: - Background Color - определённый цвет или оттенок игрового окружения. - Image - спрайт или текстура в качестве фона; удобно для воспроизведения макетов экранов и референсных изображений. - Camera - текущий игровой процесс на фоне, позволяющий оценить UI непосредственно в контексте игры.

Canvas UXML-документа: настройка внешнего вида с помощью параметров Color и Image

Ускорьте итерации при работе с файлами Photoshop с помощью PSD Importer Если многослойный PSD-файл импортирован в проект с помощью PSD Importer, Unity автоматически обновляет содержащиеся в нём спрайты при каждом сохранении файла. Благодаря этому можно быстро создать черновой вариант, дорабатывать его и сразу видеть изменения в Game view. Такой подход заметно экономит время и повышает качество результата: вы оцениваете его в контексте, не заменяя файлы и не обращаясь за помощью к другому разработчику команды.

Используйте эмодзи в игре С помощью тегов Rich Text в текст можно добавлять спрайты, например эмодзи. Для этого потребуется ассет спрайтов, аналогичный ассету Gradient. При импорте нескольких спрайтов упакуйте их в один атлас, чтобы сократить количество вызовов отрисовки. Убедитесь, что разрешение атласа спрайтов подходит для целевой платформы.

Импортируйте спрайты, создайте Sprite Asset в папке Assets/Resources и при необходимости настройте сведения о каждом глифе.

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

Чтобы использовать в проекте эмодзи операционной системы, выполните следующие действия:

1. Создайте Font Asset на основе шрифта целевой системы. В iOS он называется Apple Emoji (этот шрифт используется в примере), а в Android - Noto Color Emoji; в настоящее время поддерживается только COLRv0. Убедитесь, что для Font Asset задан тип Color, затем установите для Atlas Population Mode значение Dynamic OS. В этом режиме не требуется включать исходный шрифт в ассет, что экономит место. 2. Убедитесь, что для Font Asset включён параметр Clean Dynamic Data On Build. 3. В UI Builder включите Parse Escape Sequences и введите нужные эмодзи с помощью клавиатуры эмодзи macOS или Windows либо в формате UTF. Например, смайлик можно задать как \U0001F601. UTF-код каждого эмодзи указан в Character Table объекта Font Asset. 4. Сборка, запущенная в macOS, отображает эмодзи с помощью шрифта операционной системы.

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

Отображайте дополнительную информацию о Visual Element в UI Builder Нажмите кнопку с вертикальным многоточием ( ) в заголовке Hierarchy, чтобы отобразить дополнительные сведения об элементах UI.

В панели Hierarchy рядом с типом элемента появятся дополнительные сведения. Если включить соответствующие параметры, будут показаны селектор имени #options-bar и селектор класса стиля .options-bar.

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

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

Охватывайте больше рынков, внедряя локализацию на раннем этапе Процесс локализации можно упростить, интегрировав пакет Localization с UI Toolkit. Такая интеграция позволяет предоставлять игрокам содержимое для их региона независимо от того, где они находятся. Используйте раскрывающийся список Game View Locale для предварительного просмотра UI на разных языках и проверки правильности отображения элементов в каждой локали.

Предварительный просмотр локализации с помощью раскрывающегося списка Game View Locale

Стилизуйте весь интерфейс с помощью градиентов В UI Toolkit градиенты применяются с помощью тега <gradient>. Убедитесь, что параметр Rich Text включён: результат будет виден в UI Builder и в Game view. 1. Создайте ассет градиента через Create > Text Core > Gradient Color. Поместите файл в Assets/Resources или в любую вложенную папку Resources. 2. Создайте ассет Text Settings, на который будет ссылаться Panel Settings. Найдите в нём параметр Color Gradient Presets и укажите папку или вложенную папку Resources, где находится ассет градиента. 3. В UI Builder добавьте следующие теги Rich Text: <color=white><gradient="testColorGradient">Gradient Test</gradient></color>. Тег color возвращает белый цвет шрифта, чтобы градиент выглядел правильно. Имя в теге gradient должно совпадать с именем ассета, созданного на шаге 1. Убедитесь, что параметр Rich Text включён. 4. Результат изменений можно увидеть в UI Builder или в Game view.

Использование тега <gradient> в UI Toolkit

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

Такие смены состояния обычно вызываются действиями пользователя, однако псевдоклассы :enabled и :disabled можно менять программно. Это вручную запускает связанные с ними анимации USS и позволяет вызывать анимацию из кода в нужный момент.

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

Показывайте рамки вычисленных стилей в редакторе Ограничивающие рамки помогают выявлять ошибки компоновки и выравнивания, а также интерактивно отлаживать структуру UI в редакторе. Чтобы отобразить вычисленные ограничивающие рамки средствами UI Toolkit, выберите Window > UI Toolkit > Debugger и откройте UI Toolkit Debugger. Затем инструментом Pick Element выберите нужный элемент UI и включите Show Layout. Поверх UI в Game view появятся ограничивающие рамки и сведения о компоновке.

UI Toolkit Debugger содержит несколько удобных средств отладки UI.

Повторно используйте файлы UXML как шаблоны, чтобы ускорить работу Файлы UXML можно использовать аналогично префабам. Например, в проекте может быть UXML-макет со значком предмета и счётчиком количества, который требуется многократно создавать в инвентаре. Щёлкните любой UXML-файл правой кнопкой мыши и выберите создание Template. Затем шаблон можно добавить к любому другому визуальному элементу в панели Hierarchy или создать его экземпляр из кода. После создания шаблон доступен в Library и в окне Project.

Шаблоны - это повторно используемые UXML-файлы; они доступны в панели Library на вкладке Project

Дополнительные ресурсы Загрузите электронную книгу «Создание масштабируемого и производительного UI с помощью UI Toolkit в Unity 6», чтобы получить подробные рекомендации по разработке интерфейсов для самых разных устройств.

К электронной книге прилагается демонстрационный проект. UI Toolkit Sample - Dragon Crashers доступен в Unity Asset Store. Этот проект показывает, как применять UI Toolkit в собственных приложениях. Демонстрация содержит полнофункциональный интерфейс для фрагмента двухмерной мини-RPG Dragon Crashers и использует рабочий процесс UI Toolkit в Unity 6 во время выполнения. Кроме того, ознакомьтесь с проектом QuizU в Unity Asset Store и сопутствующими статьями: - Демонстрационный проект UI Toolkit QuizU - QuizU: паттерны состояний для управления ходом игры - QuizU: управление экранами меню в UI Toolkit - QuizU: паттерн Model View Presenter - QuizU: обработка событий в UI Toolkit - QuizU: советы по повышению производительности UI Toolkit