Попробуйте новый пример UI Toolkit – теперь доступен в Asset Store
В Unity 2021 LTS UI Toolkit предлагает набор функций, ресурсов и инструментов, которые помогут вам создавать и отлаживать адаптивные пользовательские интерфейсы в широком диапазоне игровых приложений и расширений редактора. Его интуитивно понятный рабочий процесс позволяет создателям Unity в разных ролях – художникам, программистам и дизайнерам – как можно быстрее начать разработку пользовательского интерфейса.
Смотрите наш предыдущий блог для объяснения основных преимуществ UI Toolkit, таких как улучшенная масштабируемость и производительность, которые уже используются студиями, такими как Mechanistry, для их игры Timberborn.
Хотя Unity UI остается основным решением для позиционирования и освещения пользовательского интерфейса в 3D-мире или интеграции с другими системами Unity, UI Toolkit для пользовательского интерфейса в реальном времени уже может принести пользу игровым проектам, стремящимся к производительности и масштабируемости с Unity 2021 LTS. Он особенно эффективен для пользовательского интерфейса в пространстве экрана – наложение и хорошо масштабируется на различных разрешениях экранов.
Вот почему мы рады объявить о двух новых учебных ресурсах, чтобы лучше поддержать разработку пользовательского интерфейса с UI Toolkit:
- Пример UI Toolkit – Dragon Crashers: Демо теперь доступно для бесплатной загрузки из Asset Store.
- Дизайн и реализация пользовательского интерфейса в Unity: Эту бесплатную электронную книгу можно скачать здесь
Читать далее, чтобы узнать о некоторых ключевых функциях, входящих в проект примера UI Toolkit.
Пример UI Toolkit демонстрирует, как вы можете использовать UI Toolkit для своих собственных приложений. Это демо включает полнофункциональный интерфейс на фрагменте 2D-проекта Dragon Crashers, мини-RPG, используя рабочий процесс UI Toolkit Unity 2021 LTS в реальном времени.
Некоторые действия, иллюстрированные в проекте примера, показывают вам, как:
- Стилизация с помощью селекторов в файлах таблицы стилей Unity (USS) и использование UXML шаблонов
- Создание пользовательских элементов управления, таких как круговой измеритель или вкладочные представления
- Настройте внешний вид элементов, таких как ползунки и кнопки-переключатели
- Используйте Render Texture для эффектов наложения UI, анимаций USS, сезонных тем и многого другого
Чтобы попробовать проект после добавления его в ваши активы, введите Игровой режим. Обратите внимание, что интерфейсы UI Toolkit не отображаются в представлении сцены. Вместо этого вы можете просмотреть их в Игровом представлении или UI Builder.
Меню слева помогает вам перемещаться по экранам модального главного меню. Этот вертикальный столбец кнопок предоставляет доступ к пяти модальным экранам, которые составляют главное меню (они остаются активными при переключении между экранами).
Хотя некоторая интерактивность возможна, например, исцеление персонажей путем перетаскивания доступных зелий в сцене, игровой процесс был минимизирован, чтобы обеспечить постоянное внимание к примерам UI.
Давайте более подробно рассмотрим интерфейсы в строке меню:
- Экран домой служит в качестве посадочной площадки при запуске приложения. Вы можете использовать этот экран для игры или получения имитированных сообщений чата.
- Экран персонажа включает в себя смесь GameObjects и элементов UI. Здесь вы можете исследовать каждого из четырех Dragon Crashers персонажей. Используйте вкладки статистики, навыков и биографии, чтобы прочитать конкретные детали персонажа, и нажмите на слоты инвентаря, чтобы добавить или удалить предметы. Область предварительного просмотра показывает 2D освещенного и анимированного персонажа на плиточном фоне.
- Экран ресурсов ссылается на документацию, форум и другие ресурсы для максимального использования UI Toolkit.
- Экран магазина имитирует внутриигровой магазин, где вы можете приобрести жесткую и мягкую валюту, такую как золото или драгоценные камни, а также виртуальные товары, такие как зелья исцеления. Каждый элемент на экране магазина является отдельным VisualTreeAsset. UI Toolkit создает эти активы во время выполнения; по одному для каждого ScriptableObject в Resources/GameData.
- Экран почты является фронтальным читателем вымышленных сообщений, который использует вкладочное меню для разделения входящих и удаленных сообщений.
- Экран игры является мини-версией проекта Dragon Crashers, который начинает воспроизводиться автоматически. В этом проекте вы заметите несколько переработанных элементов с UI Toolkit, таких как кнопка паузы, полосы здоровья и возможность перетаскивать элемент зелья исцеления к вашим персонажам, когда они получают урон.
UI Toolkit позволяет вам создавать стабильные и последовательные пользовательские интерфейсы для всего вашего проекта. В то же время он предоставляет гибкие инструменты для добавления ваших собственных дизайнерских изысков и деталей, чтобы дополнительно развить тему и стиль игры.
Давайте рассмотрим некоторые из функций, используемых для уточнения дизайна пользовательского интерфейса в примере:
- Текстуры рендеринга: интерфейсы UI Toolkit рендерятся последними в очереди рендеринга, что означает, что вы не можете накладывать другие игровые графики на интерфейс UI Toolkit. Текстуры рендеринга предоставляют обход этого ограничения, позволяя интегрировать игровые эффекты в интерфейсы UI Toolkit. Хотя эти эффекты на основе текстур рендеринга следует использовать с осторожностью, вы все равно сможете позволить себе четкие эффекты в контексте полноэкранного интерфейса, не прерывая игровой процесс. Следующие изображения показывают ряд текстур рендеринга из демонстрации.
- Темы с таблицами стилей тем (TSS): Файлы TSS являются файловыми активами, которые похожи на обычные файлы USS. Они служат отправной точкой для определения вашей собственной пользовательской темы через селекторы USS, а также настройки свойств и переменных. В демонстрации мы дублировали файлы тем по умолчанию и изменили копии, чтобы предложить сезонные вариации.
- Пользовательские элементы интерфейса: Поскольку дизайнеры обучены мыслить нестандартно, UI Toolkit предоставляет вам много возможностей для настройки или расширения стандартной библиотеки. Демонстрационный проект подчеркивает несколько пользовательских элементов в вкладках меню, переключателях слайдов и выпадающих списках, а также радиальный счетчик, чтобы продемонстрировать, на что способны художники интерфейса вместе с разработчиками.
- Переходы USS для анимированных изменений состояния интерфейса: Добавление переходов на экраны меню может улучшить и сгладить ваши визуальные эффекты. UI Toolkit упрощает это с помощью свойства Анимации переходов, которое является частью Инспектора конструктора пользовательского интерфейса. Настройте свойства, продолжительность, сглаживание и задержку, чтобы настроить анимацию. Затем просто измените стили для UI Toolkit, чтобы применить анимированный переход во время выполнения.
- Объем постобработки для размытия фона: Популярный эффект в играх — размыть многолюдную игровую сцену, чтобы привлечь внимание игрока к определенному всплывающему сообщению или диалоговому окну. Вы можете достичь этого эффекта, включив Глубину резкости в рамке объема (доступно в универсальном рендеринговом конвейере).
Мы убедились, что используются эффективные рабочие процессы для укрепления пользовательского интерфейса. Вот несколько рекомендаций по поддержанию проекта в порядке:
- Последовательные соглашения об именовании: Важно принять соглашения об именовании, которые соответствуют вашим визуальным элементам и таблицам стилей. Четкие соглашения об именовании не только поддерживают организацию иерархии в конструкторе пользовательского интерфейса, но и делают ее более доступной для ваших коллег, а также поддерживают код в чистоте и читаемости. Более конкретно, мы рекомендуем соглашение об именовании Блок Элемент Модификатор (BEM) для визуальных элементов и таблиц стилей. На первый взгляд, соглашение об именовании BEM элемента может сказать вам, что он делает, как он выглядит и как он соотносится с другими элементами вокруг него. Смотрите следующие примеры именования BEM:
- Адаптивная компоновка UI: Подобно веб-технологиям, UI Toolkit предлагает возможность создания компоновок, где "дочерние" визуальные элементы адаптируются к текущему доступному размеру внутри своих "родительских" визуальных элементов, и другие, где каждый элемент имеет абсолютное положение, привязанное к опорной точке, подобно системе Unity UI. Пример использует оба варианта по мере необходимости через визуальные элементы UI.
- Импорт PSD: Одним из самых эффективных инструментов для создания демо является Импорт PSD, который позволяет художникам работать в основном документе, не экспортируя каждый спрайт отдельно. Когда изменения необходимы, их можно внести в оригинальный файл PSD и автоматически обновить в Unity.
- ScriptableObjects: Чтобы сосредоточиться на дизайне и реализации UI, демонстрационный проект имитирует данные бэкенда, такие как покупки в приложении и сообщения, используя ScriptableObjects. Вы можете удобно настраивать эти временные данные из папки Resources/GameData и использовать пример для создания аналогичных активов данных, таких как предметы инвентаря и данные персонажей или диалогов в UI Toolkit.
Помните, что с UI Toolkit компоновки и стили UI отделены от кода. Это означает, что переписывание данных бэкенда может происходить независимо от дизайна UI. Если ваша команда разработчиков заменит эти системы, интерфейс должен продолжать работать.
Дополнительные инструменты, использованные в демо, включают системы частиц, созданные с помощью Встроенной системы частиц для специальных эффектов, и набор инструментов 2D, среди прочего. Не стесняйтесь просматривать проект через Инспектор, чтобы увидеть, как эти различные элементы взаимодействуют.
Вы можете найти справочные материалы, созданные художниками UI, в UI/Reference, как это воспроизведено в UI Builder. Весь процесс, от макетов до каркасных схем, также задокументирован в электронной книге. Наконец, все содержимое примера можно добавить в ваш собственный проект Unity.
