Unity 6.3
0 онлайн 38 гостей 3 в системе
Вход
← Руководство

Обзор интерфейса UI Builder

Чтобы открыть окно UI Builder:

  • Выберите Окно > UI Toolkit > UI Builder. Это откроет документ UXML, который ранее был загружен с UIBuilder.
  • В окне Project дважды щелкните файл UXML.

На следующем рисунке показан пример окна UI Builder:

UI Builder главное окно
UI Builder главное окно

Открыть и сохранить UI Документы (UXML)

Чтобы открыть документ UI в UI Builder:

  • Используйте меню Файл в панели инструментов UI Builder Видовой проем и выберите Open….
  • В течение Project вкладка Библиотека панели, щелкните правой кнопкой мыши документ и выберите Открыть в UI Builder.

Чтобы открыть Документ UI (UXML) в текстовом редакторе по умолчанию или IDE:

  • Используйте inlineStyle значок файла.
    1. Перейти к Project окно > Активы.
    2. Щелкните стрелку в середине значка файла UXML.
    3. Дважды щелкните значок файла inlineStyle.
  • Используйте Открыть с IDE кнопка.
    1. В UI Builder перейдите на вкладку Библиотека > Project.
    2. Откройте папку Ассеты.
    3. Щелкните правой кнопкой мыши Документ UI (UXML) и выберите Открыть с IDE.
  • Используйте UXML Предварительный просмотр Сэр.
    1. В UI Builder убедитесь, что ваш Документ UI (UXML) загружен.
    2. Перейдите в панель UXML Предварительный просмотр.
    3. Выберите значок в правом верхнем углу панели UXML Предварительный просмотр.
    UXML Панель предварительного просмотра
    UXML Панель предварительного просмотра

В настоящее время открытые и действующие UI Документ (UXML) имя ассета отображается в Hierarchy как элемент корневого дерева, в Canvas заголовок внутри Видовой проем, и в UXML Предварительный просмотр панели в нижней части Видовой проемЗвездочка (*) рядом с именем указывает на несохраненные изменения.

Чтобы сохранить Документ UI (UXML):

  • Используйте меню File > Save в панели инструментов Видовой проем панели UI Builder.
  • Используйте Ctrl/CMD + S. Также вам будет предложено сохранить Scene в Редакторе.

Примечание: Unity сохранение всего проекта не сохраняет активный UI Документ (UXML) открыто в 1996 году UI Builder.

StyleSheets

Селекторы StyleSheets и USS в UI Toolkit используются для совместного использования и применения стилей ко многим элементам и UI Документам (UXML).

На панели StyleSheets, обозначенной номером 1, можно:

  • Добавление, изменение порядка или удаление StyleSheets (USS) в текущем Документе UI (UXML).
  • Создавайте, изменяйте порядок, копируйте или удаляйте селекторы USS в StyleSheets для совместного использования стилей между различными элементами.

Hierarchy

Панель Hierarchy 2 содержит древовидное представление иерархии элементов текущего документа. Она включает в себя всю иерархию, показанную в текстовом представлении UXML документа UI Document, и дополняет её. Помимо элементов, созданных непосредственно из UXML, панель Hierarchy также содержит динамически созданные элементы, которые существуют только во время выполнения UI. Например, панель Hierarchy включает элементы экземпляра Template (другого документа, созданного внутри текущего), тогда как UXML содержит лишь один тег <Instance>.

Панель Hierarchy можно использовать для:

  • Выберите элементы для проверки или редактирования.
  • Вырезать, скопировать, удалить или изменить порядок элементов.
  • Открытие шаблонных документов в качестве поддокументов для редактирования на месте (в контексте).
  • Проверяйте сразу у многих элементов списки стилевых классов, атрибуты name и локально прикреплённые StyleSheet.

Элементы отображаются в дереве в соответствии с их атрибутами name. Если атрибут name элемента не установлен, он отображается в соответствии с его типом C#. Вы можете дважды щелкнуть элемент, чтобы быстро переименовать его.

Нажмите значок и в правом верхнем углу заголовка панели Hierarchy, чтобы открыть меню параметров отображения.

  • Выберите Тип, чтобы заставить Hierarchy отображать тип C# каждого элемента, независимо от того, имеет ли он имя.
  • Выбрать Список классов чтобы рядом с каждым элементом отображался список его стилевых классов Hierarchy вступление.
  • Выберите Attached StyleSheets для отображения любых локально прикрепленных StyleSheets рядом с их элементом.

Библиотека

Панель Библиотека с номером 3 похожа на окно Project в Unity Editor. На ней перечислены доступные элементы UI.

  • На вкладке Стандарт перечислены стандартные встроенные элементы, предоставляемые Unity. Эти элементы включают стандартный стиль, который работает со всеми поддерживаемыми Unity Editor и темами времени выполнения.

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

  • На вкладке Project перечислены пользовательские ассеты .uxml в проекте. Здесь также отображаются все пользовательские элементы C#, наследуемые от VisualElement. Чтобы предварительно просмотреть элемент на вкладке Project панели Библиотека, наведите на него указатель. Предварительный просмотр появится справа от панели Библиотека.

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

  • Перетащите его в панель Hierarchy.
  • Перетащите элемент на Canvas в 2000 году Видовой проем.
  • Двойной щелчок по элементу. Это добавляет элемент в качестве родственника выбранного элемента. Если ничего не выбрано, элемент добавляется в корень Документа UI (UXML).

Вы можете выбрать элементы в окне Hierarchy или в окне Canvas. В окне Hierarchyудерживайте нажатой клавишу Ctrl(macOS:Cmd), чтобы выбрать дополнительные элементы.

Видовой проем

Видовой проем — это панель 4, которая отображает результат UI Document (UXML) на плавающем изменяемом в размере Canvas в режиме редактирования. Панель инструментов содержит меню команд UI Builder, параметры Видовой проем, селектор Theme и кнопку Предварительный просмотр. Дополнительные параметры UI Builder находятся в правом верхнем углу Видовой проем в меню ⋮; там же расположена ссылка на параметры UI Builder в разделе Project Настройки редактора Unity.

Навигация в окне просмотра

Пан и зум для навигации в окне Видовой проем. UI Builder сохраняет состояние текущего панорамирования и масштаба каждого UI-документа (UXML) и восстанавливает их после перезагрузки окна UI Builder, перезагрузки домена или при закрытии и повторном открытии того же UI-документа.

Когда вы создаете и открываете новый документ, UI Builder сбросает состояния панорамирования и масштабирования.

Для панорамирования выполните одно из следующих действий:

  • Щелкните правой кнопкой мыши и перетащите Видовой проем.
  • Нажмите и удерживайте Ctrl/Cmd + Альт/Вариант и нажмите и перетащите в Видовой проем.

Чтобы увеличить или уменьшить масштаб, поместите указатель мыши в Видовой проем и выполните одно из следующих действий:

  • Поместите указатель мыши в окно Видовой проеми поверните колесо мыши.
  • Нажмите и удерживайте Альт/Вариант и перетащите правой кнопкой мыши. Перетащите вниз, чтобы увеличить, и вверх, чтобы уменьшить.

Настройка Canvas

Canvas — это место, где вы можете редактировать, просматривать и взаимодействовать с UI Документом (UXML), который вы создаете. Если вы не можете его увидеть, выберите Fit Viewport на панели инструментов Видовой проем, чтобы вывести его на экран. Заголовок Canvas отображает имя загруженного в данный момент UI Документа (UXML). Звездочка (*) рядом с именем указывает на несохраненные изменения.

Чтобы изменить размер Canvas:

  • В окне Видовой проемперетащите края или углы.
  • Выберите заголовок Canvas, чтобы отобразить окно Inspector холста, в котором вы можете ввести ширину и высоту холста.

Чтобы привести размер Canvas в соответствие с размером окна Unity Game, установите флажок Match Game View.

CanvasSizeSettings
CanvasSizeSettings

Вы можете изменить фон Canvas, чтобы облегчить редактирование UI.. Чтобы изменить фон, выберите Canvas в панели Inspector. Вы можете установить его как сплошной цвет, определенную текстуру (модель из UI Designer) или живой вид из Camera в открытом Unity Scene:

CanvasBackgroundSettings
CanvasBackgroundSettings

Любые настройки, относящиеся к Canvas, такие как размер, не сохраняются как часть UI Документа (UXML), но хранятся в отдельном файле настроек для следующего открытия того же UI Документа (UXML).

Предварительный просмотр со светлой или темной темой

По умолчанию UI Builder использует тему Runtime по умолчанию Unity. Вы можете просмотреть UI со светлой или темной темой Редактора. Для этого убедитесь, что Editor Extension Authoring включено, а затем выберите Dark Editor Theme или Light Editor Theme из раскрывающегося списка тем в панели инструментов Видовой проем.

Темы выпадающего меню управления в Viewport
Темы выпадающего меню управления в Viewport

Тема Активного Редактора — это светлая или темная тема, которую вы настроили в Unity Editor.

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

Предварительные просмотры кода

По мере того, как вы строите UI, UI Builder автоматически генерирует базовый UXML и USS текста и отображает их в UXML Предварительный просмотр и USS Предварительный просмотр хлеб 5.

Inspector

Панель Inspector с номером 6 в UI Builder похожа на окно Inspector редактора Unity. Панель Inspector отображает содержимое, которое немного различается в зависимости от объекта, выбранного в UI Builder:

  • Элементы отображают раздел атрибутов для атрибутов элемента (UXML), раздел StyleSheets для назначения классов стилей и просмотра примененных стилей из StyleSheets, и раздел Встроенные стили для редактирования встроенных свойств стилей элемента.
  • USS Селекторы отображают раздел Style Selector для изменения строки запроса селектора и раздел Стилы для редактирования свойств стиля.
  • Canvas отображает раздел Canvas Размер для изменения размера Canvas, раздел Canvas Фон для изменения фона экрана во время редактирования, и раздел Настройки Документа для настройки времени редактирования для каждого документа.

Включить создание расширений редактора для документов UI (UXML)

По умолчанию новые Документы UI (UXML), созданные в UI Builder, имеют в UXML сохраненную настройку, которая помечает их как UI только для выполнения:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">

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

Создать UI на 2000 год Unity Editor, как пользовательский редактор Windows или пользовательских инспекторов, вы можете включить Создание расширения редактора к дополнительным Только редактор контроля в Стандарт вкладка Библиотека Сэр.

Чтобы включить создание расширений редактора:

  • Выберите заголовок Canvas, чтобы отобразить окно Inspector холста, где вы выбираете Настройки документа > Создание расширения редактора:

EditorExtensionAuthoringPanelSettings

  • В меню панели Библиотека выберите Editor Extension Authoring.

Примечание: В отличие от других Canvas настройки, эта настройка сохраняется в editor-extension-mode атрибут корневого элемента UI Документ (UXML).

Чтобы по умолчанию включить Editor Extension Authoring для любых новых UI Documents (UXML):

  1. Перейдите в Изменить > Project Настройки > UI Builder.
  2. Выберите Включить авторство расширения редактора по умолчанию.

UI Документы (UXML), которые вы создаете вне UI Builder, например, в текстовом редакторе или IDE, не имеют атрибута Editor Extension Authoring до тех пор, пока вы не откроете их в UI Builder. Однако вы можете добавить атрибут editor-extension-mode вручную в свой UI Документ (UXML) в текстовом редакторе или IDE в любой момент. Когда вы открываете внешне созданный UI Документ (UXML) в UI Builder в первый раз, атрибут Editor Extension Authoring устанавливается по умолчанию, как указано в настройках проекта UI Builder.

Дополнительные ресурсы