Введение в UI Toolkit

Вы можете использовать UI Toolkit для разработки пользовательского UI и расширений для Unity Editor, и runtime UI для игр и приложений.

Дизайн, вдохновленный вебом

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

С помощью UI Toolkit вы можете отделить структуру, стиль и поведение вашего UI, подобно тому, как вы можете с HTML, CSS и JavaScript:

UXML

UXML — это язык разметки, вдохновленный HTML и XML, который определяет структуру UI и многоразовые шаблоны. Хотя вы можете построить UI в C#, рекомендуется использовать UXML.

USS

USS — это таблицы стилей, которые применяют визуальные стили и правила макета к UI. Подобно CSS, USS поддерживает подмножество стандартных свойств CSS. В то время как вы можете определять стили в C#, рекомендуется использовать USS.

Архитектура сохранённого режима

UI Toolkit работает в архитектуре сохраняемого режима: интерфейс строит иерархическую структуру и держит её в памяти. Фреймворк выполняет отрисовку и обновления интерфейса на основе состояния этого дерева. Вот что означает сохраняемый режим подробнее:

Декларативная структура

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

Сохранение состояния

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

Обработка событий

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

Привязка данных

UI Toolkit поддерживаетa система связывания данных который позволяет связать свойства UI элементов к источникам данных. Это означает, что при изменении данных, UI Это похоже на то, как фреймворки, такие как React или Angular, обрабатывают привязку данных в веб-разработке.

Двигатель макета

UI Toolkit использует a движок макета на основе CSS Флексбокс модель. Это позволяет определить, как UI Элементы располагаются и размериваются в их родительских контейнерах. Мотор макета автоматически рассчитывает размер и расположение элементов на основе их свойств, что облегчает создание адаптивных дизайнов.

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

Библиотека UI управления

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

Текст и шрифты

UI Toolkit поддерживаетa текстовая система Вы можете использовать системные шрифты или импортировать пользовательские шрифты, а также применять стили, такие как жирный, курсив или подчеркивание. Текстовая система разработана для бесперебойной работы с движком макета, обеспечивая правильный поток текста в вашем UI.

Поддержка редактора и runtime UI

UI Toolkit позволяет создать UI, который работает без сбоев в обоих редакторах Редактор и runtime UI. Одни и те же элементы UI, стиль и система макета применяются в обоих сценариях, уменьшая дублирование и обеспечивая последовательность. Независимо от того, создаете ли вы игровые меню, дисплеи heads-up (HUDs) или пользовательские инструменты редактора, UI Toolkit предоставляет возможность адаптировать ваш UI для различных контекстов.

UI инструменты и ресурсы

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

UI Отладчик

UI Отладчик является диагностическим инструментом, который напоминает отладочный вид веб-браузера. Используйте его для изучения иерархии элементов и получения информации об их основных UXML структуры и USS стилей.

UI Builder

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

UI образцы

Библиотека образцов кода для UI элементы управления, которые можно просмотреть в редакторе под Окно > UI Toolkit > Образцы.

Функции и обязанности

В студии UI Toolkit может использоваться в различных дисциплинах, при этом каждая роль способствует определенным частям процесса.

UX/UI Дизайнеры

UX/UI дизайнеры отвечают за общий внешний вид UI. Они создают wireframes, макеты и прототипы, чтобы определить пользовательский опыт.

Дизайнеры используют UI Builder для визуального дизайна UI и создают UXML и USS файлы для структуры и стиля.

Разработчики

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

Разработчики используют C# для создания настраиваемой функциональности, обработки взаимодействия пользователей и привязки данных. Они также используют UI Toolkit’s API взаимодействовать с UI контроля, созданных дизайнерами, и разработать индивидуальные UI управления, которые дизайнеры могут использовать и настраивать в своих проектах.

Технические художники

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

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

QA/Тестирование

QA/тестер тестирует UI, чтобы убедиться, что он функционирует правильно и соответствует спецификациям конструкции.

Тестировщики используют отладчик UI для проверки иерархии UI и проверки взаимодействий.

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

• Начните с UI Toolkit
• UI Toolkit примеры
• 📺 Видео: UI Toolkit Серия уроков: Подсказки и Поп-опции
• 📺 Видео: UI Toolkit Серия уроков: Меню вкладок
• 📺 Видео: UI Toolkit Серия уроков: Манипулятор перетаскивания
• 📺 Видео: UI Toolkit Серия уроков: UI Toolkit События
• 📺 Видео: UI Toolkit Серия уроков: SVG Поддержка
• 📺 Видео: UI Toolkit Серия уроков: Shader Graph UI
• 📺 Видео: UI Toolkit Серия уроков: Режим рендеринга космического пространства