Engine & platform

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

THOMAS KROGH-JACOBSEN / UNITY TECHNOLOGIESProduct Marketing Core Tech
Nov 27, 2023|9 Мин
Набор инструментов пользовательского интерфейса: Новые и обновленные демо-версии для программистов и художников
Эта веб-страница была переведена с помощью машинного перевода для вашего удобства. Мы не можем гарантировать точность или надежность переведенного контента. Если у вас есть вопросы о точности переведенного контента, обращайтесь к официальной английской версии веб-страницы.

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

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

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

Пример экрана персонажа из UI Toolkit Sample - Dragon Crashers показывает, как сочетание GameObjects и UI Elements делает экран динамичным и интересным для использования.
Пример экрана персонажа из UI Toolkit Sample - Dragon Crashers показывает, как сочетание GameObjects и UI Elements делает экран динамичным и интересным для использования.
Новый: QuizU демо для UI Toolkit
Проект QuizU - это игра на основе UI Toolkit.
Проект QuizU - это игра на основе UI Toolkit.

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

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

Минималистичный визуальный стиль мини-игры позволяет сосредоточиться на механике реализации пользовательского интерфейса, не теряясь в деталях дизайна.

Игровая мини-игра для демонстрации паттернов проектирования

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

Сыграйте в QuizU, чтобы увидеть, как паттерны проектирования и UI Toolkit могут работать вместе.
Сыграйте в QuizU, чтобы увидеть, как паттерны проектирования и 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 и сопровождающих демонстрацию. Статьи здесь:

Обновлено: Образец набора инструментов пользовательского интерфейса - Dragon Crashers (2022 LTS)
Изображение, демонстрирующее отзывчивый пользовательский интерфейс в альбомном и портретном режимах в примере Unity UI Toolkit
Обновлено для Unity 2022 LTS: Отзывчивый пользовательский интерфейс в альбомном и портретном режимах

В сентябре 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 для разных соотношений сторон экрана и некоторые несоответствия курсора
  • Рефакторинг паттернов проектирования для более чистой архитектуры пользовательского интерфейса
  • Новые учебные материалы предоставляются через окно Инспектора учебников
Изображение, показывающее, как API SafeArea работает в Unity UI Toolkit, помогая вам удерживать функциональность пользовательского интерфейса в пределах полезной области экрана вашего устройства
В демо-версии используется API SafeArea, который позволяет ограничить функциональность пользовательского интерфейса в пределах полезной площади экрана устройства.
Новое руководство пользователя и видеоурок для демоверсии

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

Наконец, теперь доступна видеопрограмма проекта, которая поможет вам сориентироваться в демо-версии. Проверьте:

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