Набор инструментов пользовательского интерфейса: Новые и обновленные демо-версии для программистов и художников

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


QuizU - это ориентированный на программистов пример интерактивного приложения-викторины, который показывает, как компоненты UI Toolkit могут работать вместе, используя различные паттерны проектирования, в небольшой, но функциональной игре с несколькими экранами и управлением игровым потоком.
Демо-версия состоит из двух частей: 10 небольших, легко усваиваемых примеров, демонстрирующих различные аспекты UI Toolkit, и мини-викторина, объединяющая многие приемы из 10 сцен в полноценный проект.
Минималистичный визуальный стиль мини-игры позволяет сосредоточиться на механике реализации пользовательского интерфейса, не теряясь в деталях дизайна.
Игра-викторина показывает, как использовать паттерн state для потока игры, управлять несколькими экранами меню, использовать паттерн model-view-presenter, реализовать обработку событий в UI Toolkit и многое другое. Геймплей представляет собой очень простую игровую механику, но цель - показать и научить техникам реализации, которые вы можете использовать в своих собственных проектах.

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

Вторая часть демонстрации состоит из 10 небольших демо-сцен. Каждая демонстрационная сцена представляет определенную технику или функцию. Рассматривайте их как набор рецептов, которые будут вдохновлять и направлять вас, когда вы будете оценивать UI Toolkit для своего следующего проекта. Вот краткое описание возможностей UI Toolkit и техник, которые демонстрируют демонстрационные сцены:
- UXML и визуальные деревья: Файлы UXML образуют иерархическую структуру элементов пользовательского интерфейса. Эти визуальные деревья служат чертежом пользовательского интерфейса.
- Flexbox: Модель макета Flexible Box Layout Model (Flexbox) обеспечивает эффективную модель макета для динамического расположения элементов пользовательского интерфейса внутри контейнера.
- Таблицы стилей Unity (USS): USS позволяет разработчикам настраивать элементы пользовательского интерфейса с помощью предопределенных стилей. Перестроить пользовательский интерфейс - это просто поменять местами таблицы стилей.
- UQuery: UQuery упрощает процесс поиска в сложной иерархии элементов пользовательского интерфейса, обеспечивая беспрепятственную навигацию к определенным компонентам пользовательского интерфейса в визуальном дереве.
- Псевдоклассы: Псевдоклассы можно использовать для создания интерактивных и анимированных элементов пользовательского интерфейса с минимальным количеством дополнительного кода, добавляя дополнительный "сок" в ваш визуальный интерфейс (например, увеличение кнопки при наведении на нее курсора или изменение цвета текстового поля после выделения).
- Система событий UI Toolkit: UI Toolkit имеет собственную систему событий, разработанную для обработки щелчков, изменений и ввода указателя в пользовательском интерфейсе, даже в сложных иерархиях.
- Манипуляторы: Инкапсулируя связанные между собой обратные вызовы событий в один класс, манипулятор способствует многократному использованию и упрощает определение пользовательских взаимодействий (например, манипулятор нажатия и перетаскивания для системы инвентаризации, манипулятор жестов для эффекта "щипок - масштабирование" и т. д.).
- Пользовательские элементы управления: Демонстрация показывает, как определить и инстанцировать пользовательский VisualElement с помощью классов UxmlFactory и UxmlTraits. Эти пользовательские элементы управления можно повторно использовать с помощью скриптов или UI Builder.
Мы рекомендуем загружать QuizU с помощью Unity 2022 LTS. Вы также можете следить за развитием событий в нашей серии статей, опубликованных на Unity Discussions и сопровождающих демонстрацию. Статьи здесь:

В сентябре 2022 года мы запустили UI Toolkit Sample - Dragon Crashers (вы можете прочитать запись в блоге о запуске). Это демонстрация полнофункционального интерфейса над кусочком проекта 2D мини-РПГ Dragon Crashersдемонстрирует приемы использования UI Toolkit в ваших собственных приложениях. Это дополнение к электронной книге Проектирование и реализация пользовательских интерфейсов в Unityкоторая также выйдет в конце 2022 года.
Теперь вы можете скачать новую версию UI Toolkit Sample - Dragon Crashers для Unity 2022 LTS. Улучшения и обновления в этой последней версии включают:
- Поддержка ландшафтного и портретного режимов экрана во время работы с помощью тем и события GeometryChangedEvent в UI Toolkit
- Реализация API SafeArea для размещения функциональности пользовательского интерфейса в пределах полезной области экрана устройства
- Увеличено ограничение частоты кадров в секунду для мобильных устройств до 60 кадров в секунду
- Рефакторинг, упрощение селекторов и таблиц стилей USS
- Иконки с более высоким разрешением
- Исправлена позиция спавна VFX для разных соотношений сторон экрана и некоторые несоответствия курсора
- Рефакторинг паттернов проектирования для более чистой архитектуры пользовательского интерфейса
- Новые учебные материалы предоставляются через окно Инспектора учебников

Мы также добавили руководство пользователя для обновленного проекта. Это сделано в ответ на отзывы пользователей, которые просили улучшить содержание инструкций, чтобы помочь им понять техники и функции, используемые в демо-версии.
Наконец, теперь доступна видеопрограмма проекта, которая поможет вам сориентироваться в демо-версии. Проверьте:
Мы надеемся, что вы получите много полезных советов с помощью QuizU и обновленного образца UI Toolkit - Dragon Crashers. Все электронные книги по Unity для программистов, художников, технических художников и дизайнеров вы найдете в хабе "Лучшие практики Unity".