Создайте пользовательский интерфейс мирового пространства с помощью UI Toolkit в Unity 6.2

Этот видеоурок от Unity предоставляет общий обзор того, как создать пользовательские интерфейсы в пространстве мира с использованием UI Toolkit в Unity 6.2. Некоторые ключевые шаги, о которых вы узнаете, включают:

- Основы настройки проекта и открытия UI Builder

- Сохранение вашего первого документа UXML

- Как создать гибкий и поддерживаемый пользовательский интерфейс, создавая и применяя таблицы стилей (файлы USS) и повторно используемые классы стилей

Учебник по UI Toolkit Unity 6.2 также охватывает практический пример улучшения взаимодействия с пользователем, реализуя пользовательские эффекты наведения на кнопки с использованием псевдоклассов.

Наконец, он показывает полный рабочий процесс интеграции пользовательского интерфейса в 3D-сцену, настраивая документ UI и связанные с ним параметры панели для рендеринга в пространстве мира, в результате чего получается меню, которое физически существует в игровом окружении.

FAQ

Как начать работу с UI Builder?

Чтобы начать создание пользовательского интерфейса, откройте окно UI Builder и сохраните свою работу как актив UXML. Этот файл будет хранить структуру и иерархию ваших элементов пользовательского интерфейса.

Следуйте этим шагам, чтобы начать:

1. В главном меню редактора Unity перейдите к UI Builder: Окно > UI Toolkit > UI Builder

2. После открытия окна UI Builder сохраните ваш новый документ UI. Перейдите к Файл > Сохранить как... в меню UI Builder.

3. Выберите место в вашем проекте и сохраните файл. Это создаст актив .uxml, который вы будете использовать в качестве источника для вашего пользовательского интерфейса в сцене.

Вы можете увидеть этот пример в действии, перейдя непосредственно к этим разделам в видео:

(1:10) - Открытие окна UI Builder

(1:23) - Сохранение файла UXML

Если вы хотите узнать больше о UI Builder, обязательно посетите страницу документации Unity.

Как применить единообразные стили к нескольким элементам интерфейса?

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

Система включает три ключевых компонента:

- Таблица стилей (.uss файл): Создайте новую таблицу стилей в UI Builder и прикрепите ее к вашему основному контейнеру интерфейса. Этот файл будет содержать все ваши правила стилизации.

- Стиль классов: Чтобы создать повторно используемый стиль, выберите визуальный элемент в UI Builder. В Инспекторе в списке классов стилей введите новое имя класса (например, "menu-button") и добавьте его в список.

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

Вы можете увидеть этот пример в действии, перейдя непосредственно к этим разделам в видео:

(2:18) - Создание новой таблицы стилей

(2:57) - Создание нового класса стиля

(3:07) - Создание нового селектора USS из класса

(3:43) - Объяснение того, как изменения в классе стиля влияют на все назначенные элементы

Если вы хотите узнать больше о стилизации вашего пользовательского интерфейса с помощью Unity Style Sheet (USS), обязательно ознакомьтесь со страницей документации Unity.

Как создать пользовательские эффекты наведения для кнопок?

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

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

1. В UI Builder выберите кнопку, чтобы увидеть ее классы стилей по умолчанию в Инспекторе. Стандартный класс кнопки - unity-button.

2. Дважды щелкните по классу unity-button, чтобы добавить его селектор в ваш таблицу стилей. Это позволяет вам изменить внешний вид кнопки по умолчанию, например, сделать ее частично прозрачной.

3. Создайте новый селектор в вашей таблице стилей, добавив псевдокласс :hover к оригинальному классу: .unity-button:hover

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

Вы можете увидеть этот пример в действии, перейдя непосредственно к этим разделам в видео:

(6:29) - Введение в псевдоклассы

(6:54) - Поиск стандартного класса стиля .unity-button

(7:24) - Создание селектора псевдокласса :hover

(7:39) - Демонстрация окончательного эффекта наведения

Если вы хотите узнать больше о псевдоклассах, обязательно ознакомьтесь со страницей документации Unity.

Как добавить элемент UI Toolkit в мою сцену в качестве объекта World Space?

Unity 6.2 улучшает UI Toolkit с возможностью рендеринга элементов пользовательского интерфейса непосредственно в World Space. Этот процесс включает использование UI Document и GameObject для размещения вашего актива UXML в сцене.

Следуйте этой последовательности, чтобы создать UI в мировом пространстве:

1. В окне Иерархия щелкните правой кнопкой мыши и выберите UI Toolkit > UI Document. Это создаст новый GameObject в вашей сцене.

2. Выберите новый GameObject UI Document. В Инспекторе найдите поле Source Asset и назначьте ему ваш сохраненный файл .uxml.

3. Нажмите на актив, связанный с Настройками панели для UI Document. Это выделит актив в вашем окне проекта.

4. Выберите актив Настроек панели, чтобы просмотреть его свойства в Инспекторе. Измените Режим рендеринга с режима экранного пространства на Мировое пространство.

5. После переключения на Мировое пространство вы можете настроить компонент RectTransform GameObject UI Document, чтобы позиционировать, вращать и масштабировать плоскость UI в вашей 3D-сцене.

Вы можете увидеть этот пример в действии, перейдя непосредственно к этим разделам в видео:

(7:49) - Создание UI Document в сцене

(7:59) - Назначение исходного актива UXML

(8:08) - Доступ к Настройкам панели

(8:23) - Переключение на режим рендеринга мирового пространства

(8:58) - Демонстрация финального UI в мировом пространстве

Если вы хотите узнать больше о UI в мировом пространстве, обязательно ознакомьтесь со страницей документации Unity.