Введение в UI Toolkit
Содержание
UI Toolkit предлагает значительные преимущества по сравнению с традиционными uGUI (Unity UI) и устаревшими IMGUI (для инструментов редактора) системами. Она предоставляет более современную, гибкую и ориентированную на производительность альтернативу, которая лучше масштабируется для большинства проектов. Она также может поддерживать весь ваш производственный поток, обрабатывая как инструменты редактора, так и игры или приложения runtime.
Некоторые из его преимуществ по сравнению с устаревшими системами UI включают:
Быстрая итерация: Работайте и итерируйте быстрее с глобальным управлением стилями и возможностями авторства в реальном времени.
Производительность рендеринга: Получите больше контроля над производительностью вашей игры с помощью Render Hints и динамических атласов текстур.
Лучшее сотрудничество: Отдельная логика (C# код), UI структура (Unity XML, или UXML, документы), и стилизация (через Unity таблицу стилей или USS) для уменьшения конфликтов и улучшения коллективной работы.
Повторное использование: Обмен и повторное использование стилей и виджетов внутри или между проектами, а также между Редактором и временем выполнения.
Дизайн, вдохновленный вебом
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 и проверки взаимодействий.