Unity UI Toolkit
Расширьте возможности редактора, добавив в него пользовательские интерфейсы для интуитивно понятной разработки. Облегчайте совместную работу разных команд, создавая потрясающие интерфейсы для игр и приложений.
Просмотреть UI Toolkit версии LTS 2021 можно в Unity Hub или на странице загрузки LTS. Попробовать
Что нового в UI Toolkit
UI Toolkit содержит функции, ресурсы и инструменты для разработки пользовательских интерфейсов и расширений редактора. В версии LTS 2021 этот инструмент поддерживает создание и отладку интерфейса для среды выполнения в играх и приложениях с интуитивно понятным рабочим процессом. Это помогает художникам и дизайнерам быстрее приступать к работе.
Основные преимущества
Узнайте о функциях и возможностях UI Toolkit.
- Специальные инструменты для разработки
- Рендеринг динамического текста
- Анимация интерфейса
- Рендеринг без использования текстур
- Настраивайте интерфейс и редактор
Начните работу с нашими специальными инструментами для разработки
UI Toolkit включает специальные инструменты для разработки, такие как UI Builder и UI Debugger. Они создавались по примеру аналогичных веб-технологий. Инструмент UI Builder подходит для визуального проектирования и редактирования пользовательских интерфейсов игр и приложений прямо в Unity, а UI Debugger помогает быстро устранять проблемы.
Рендеринг динамического текста
TextMesh Pro — технология рендеринга шрифтов. Она была интегрирована в UI Toolkit, чтобы разработчики могли выполнять это действие без дополнительных плагинов и пакетов. Вам доступны расширенные возможности стилизации. Вы можете добавлять аккуратный и красивый текст с любым размером и разрешением.
Анимация интерфейса с использованием быстрых переходов
UI Toolkit поставляется со специальной системой анимации интерфейса, которая упрощает создание переходов между интерфейсами в ваших проектах. Новая система также позволяет создавать переходы с возможностью повторного использования и большую часть анимации в интерфейсах, что экономит дизайнерам драгоценное время.
Выполняйте эффективный рендеринг интерфейса без использования текстур
Настраивайте радиус, цвет, размер и текст границы, создавая элементы интерфейса без использования текстур непосредственно в UI Toolkit. Импортировать изображения из Photoshop больше не нужно. Такой подход значительно сокращает время, затрачиваемое на переключение между инструментами, а также уменьшает общее потребление памяти и размер сборки. Все это способствует более эффективному масштабированию.
Разрабатывайте пользовательские интерфейсы и расширения для редактора Unity
UI Toolkit включает в себя структуру интерфейса с сохраненным режимом, которая облегчает разработку пользовательского интерфейса для расширений редактора Unity. Поэтому вы можете создавать уникальные окна и инспекторы для упрощения рабочих процессов художников, дизайнеров и программистов.
Другие преимущества
Быстрые итерации
Работайте и выполняйте итерацию быстрее благодаря глобальному управлению стилями и возможности творить в реальном времени.
Знакомые процессы
Инструменты разработки интерфейса и рабочие процессы основываются на стандартных веб-технологиях, благодаря чему к ним проще привыкнуть.
Улучшенная командная работа
Логика в коде C#, структура интерфейса в документах UXML и возможность редактировать стили в таблицах упрощают работу с различными частями интерфейса и позволяют избежать конфликтов.
Эффективность рендеринга
Получите больший контроль над производительностью игры с помощью подсказок по рендерингу и динамического атласа текстур.
Плодотворное сотрудничество
UI Toolkit можно использовать вместе с IMGUI для редактора и UGUI для времени выполнения. Инструмент также совместим с новой системой ввода Unity.
Повторное использование
Делитесь стилями и виджетами внутри одного или нескольких проектов, а также в редакторе и среде выполнения.
Сравните системы Unity для работы с интерфейсом
Хотя Unity рекомендует UI Toolkit для новых проектов по разработке интерфейса, все же есть случаи, когда имеет смысл использовать более старые системы — Unity UI (uGUI) и IMGUI. Сравните разные системы для работы с интерфейсом, чтобы выбрать наиболее подходящую.
Начните использовать UI Toolkit уже сегодня
Получите доступ к UI Toolkit LTS 2021 из Unity Hub или со страницы загрузки LTS, чтобы начать использовать интуитивно понятные инструменты разработки и совместные рабочие процессы в своих проектах.
Ресурсы
Блог
Узнайте, как начать работу с UI Toolkit, из этого пошагового руководства.
Документация
Ознакомьтесь с руководством от Unity, чтобы узнать больше об UI Toolkit.
Сообщество
Примите участие в обсуждениях на форуме сообщества и следите за новостями UI Toolkit в Unity.
Часто задаваемые вопросы
В каких случаях стоит использовать UI Toolkit и Unity UI?
Инструмент UI Toolkit рекомендуется в качестве альтернативы Unity UI. Он позволяет создавать интерфейсы наложения, совместимые с самыми разными разрешениями экрана. Он подойдет командам, которые работают со значительным количеством интерфейсов, хотят внедрить привычные рабочие процессы для художников и дизайнеров и/или выполнять рендеринг интерфейса без использования текстур.
Unity UI по умолчанию рекомендуется для пользователей, которые хотят создать интерфейс, расположенный и освещенный в трехмерном мире, а также VFX с пользовательскими шейдерами, материалами и простыми ссылками из классов MonoBehaviour.
Можно ли использовать UI Toolkit с Unity UI?
Инструменты UI Toolkit и Unity UI совместимы между собой, поэтому вы можете переносить существующие проекты без необходимости переписывать весь интерфейс. Это означает, что вы можете воссоздать некоторые части существующего проекта с помощью UI Toolkit, оставив другие части в Unity UI, — и они будут работать вместе.
Можно ли использовать UI Toolkit для создания интерфейсов в системе World Space?
UI Toolkit в настоящее время не поддерживает элементы интерфейса, которые размещаются или освещаются в трехмерном мире. Однако можно сделать так, чтобы элементы интерфейса на экране следовали за объектами в системе World Space.
Можно ли использовать UI Toolkit с DOTS?
Вы можете взаимодействовать с UI Toolkit из систем DOTS в основном потоке, как и с другими встроенными функциями движка.
UI Toolkit предоставляет возможность связывания данных?
UI Toolkit пока не предоставляет решения для связывания данных. Значения элементов интерфейса нужно прописывать в коде C#. Мы добавим эту возможность в следующем крупном выпуске UI Toolkit.
Совместим ли инструмент UI Toolkit с экспериментальной версией пакета векторной графики?
Да. Несмотря на то, что экспериментальные версии пакетов официально не поддерживаются Unity и потому не рекомендуются для использования в производстве, UI Toolkit можно использовать с ассетами SVG (если у вас установлен пакет векторной графики).
Как начать использовать UI Toolkit?
Инструмент UI Toolkit доступен в рамках выпуска LTS 2021. Получить доступ к UI Toolkit можно в Unity Hub или на странице загрузки.
Как будет меняться UI Toolkit в будущем?
Мы создали UI Toolkit, чтобы предоставить единое решение для создания интерфейсов, которое будет соответствовать всем потребностям разработчиков и дизайнеров, работающих с инструментами редактора или интерактивными функциями.
Вы можете ознакомиться с планами развития платформы Unity и при желании предоставить обратную связь нашей команде.
Урок #4 – Создание пользовательского интерфейса
За счет объекта Canvas в Unity можно реализовать любой нужный вам интерфейс игры. В уроке мы научимся работать с Canvas и рассмотрим множество UI элементов для создания пользовательского интерфейса.
Видеоурок
Для разработки пользовательского интерфейса используется один из двух вариантов:
- объект Canvas;
- генерируемые через код интерфейс – GUI.
Мы рассмотрели лишь Canvas, так как с ним вам придется работать чаще и он позволяет быстро и удобном формате создавать интерфейсы для ваших игр.
GUI (generated user interface) – представляет набор классов для разработки интерфейса через написание кода. Подобный подход удобен лишь в целях тестирования и при разработке полноценных игр используется не часто или очень мало. Его изучение стоит отложить, так как сперва нужно будет изучить C# под Unity .
Создание пользовательских интерфейсов (UI)
Unity предоставляет три UI (пользовательский интерфейс). Позволяет пользователю взаимодействовать с вашим приложением. Подробнее
См. в Словарь систем, которые можно использовать для создания пользовательских интерфейсов (UI) для редактор Unity и приложения, созданные в редакторе Unity:
- UI Toolkit
- The Unity UI package (uGUI)
- IMGUI
На этой странице представлен обзор каждого из них.
Инструментарий пользовательского интерфейса
UI Toolkit – новейшая система пользовательского интерфейса в Unity. Он предназначен для оптимизации производительности на разных платформах и основан на стандартных веб-технологиях. Вы можете использовать UI Toolkit для создания расширений для редактора Unity, а также для создания пользовательского интерфейса во время выполнения для игр и приложений (при установке пакета UI Toolkit).
Инструментарий пользовательского интерфейса включает:
- Система пользовательского интерфейса с сохраненным режимом, которая содержит основные функции и функции, необходимые для создания пользовательских интерфейсов.
- Типы объектов пользовательского интерфейса созданы на основе стандартных веб-форматов, таких как HTML, XML и CSS. Используйте их для структурирования и оформления пользовательского интерфейса.
- Инструменты и ресурсы для обучения работе с UI Toolkit, а также для создания и отладки интерфейсов.
Unity намеревается сделать UI Toolkit рекомендуемой системой пользовательского интерфейса для новых проектов разработки пользовательского интерфейса, но в нем по-прежнему отсутствуют некоторые функции, имеющиеся в пользовательском интерфейсе Unity (uGUI) и IMGUI.
Пакет пользовательского интерфейса Unity (uGUI)
Пакет Пользовательский интерфейс Unity (Unity UI) (также называемый uGUI) — это старая система пользовательского интерфейса на основе GameObject, которую вы можете использовать для разработки пользовательского интерфейса для игр и приложений. В пользовательском интерфейсе Unity вы используете компоненты и представление Game для упорядочивания, расположения и стиля пользовательского интерфейса. Он поддерживает расширенный рендеринг процесс вывода графики на экран (или текстуру рендеринга). По умолчанию основная камера в Unity отображает изображение на экране. Подробнее
См. в Словарь и в текстовых функциях.
См. документацию по пакету Unity UI для руководства и Справочник по API.
IMGUI
Графический пользовательский интерфейс с немедленным режимом (IMGUI) — это управляемый кодом набор инструментов пользовательского интерфейса, использующий OnGUI функция и скрипты фрагмент кода, позволяющий создавать собственные компоненты, запускать игровые события, изменять свойства компонентов с течением времени. и отвечайте на ввод пользователя любым удобным для вас способом. Подробнее
См. в Словарь , что его реализовать, рисовать и управлять пользовательские интерфейсы. Вы можете использовать IMGUI для создания собственных инспекторов окна Unity, в котором отображается информация о текущем выбранном игровом объекте, активе или настройках проекта, что позволяет вам для проверки и редактирования значений. Подробнее
См. Словарь для компонентов скриптов, расширений для редактора Unity и встроенных отображение отладки игры. Не рекомендуется использовать его для создания пользовательского интерфейса во время выполнения.
Выбор системы пользовательского интерфейса для вашего проекта
Unity намерена сделать UI Toolkit рекомендуемой системой пользовательского интерфейса для новых проектов разработки пользовательского интерфейса, но в нем по-прежнему отсутствуют некоторые функции пользовательского интерфейса Unity (uGUI) и IMGUI. Эти старые системы лучше в некоторых случаях использования и необходимы для поддержки устаревших проектов.
Ваш выбор системы пользовательского интерфейса для данного проекта зависит от типа пользовательского интерфейса, который вы планируете разработать, и функций, для которых вам нужна поддержка.
Для сравнения доступных систем пользовательского интерфейса см. раздел Сравнение систем пользовательского интерфейса в Unity.
Создание панели умений. Часть 1. Работа с Unity UI.
23.02.2016
3317
Рейтинг: 4 . Проголосовало: 1
Вы проголосовали:
Для голосования нужно авторизироваться
Введение
Данной статей начинается серия публикаций о создании панели умений (skills panel) для вашей игры. Панели умений встречаются во многих RPG играх и не только.
По мере создания панели умений будет рассмотрено много вспомогательных компонентов, таких как работа с пользовательским интерфейсом или Unity UI (user interface); использование компонентов Event System, Grid Layout Group, Outline; настройка Canvas; использование интерфейсов IPointerDownHandler, IPointerEnterHandler, IPointerExitHandler; и многое другое. В результате получится вот такая игра:
Поскольку материал вышел довольно объёмным, то пришлось разделить его на части. Сегодня особое внимание уделим работе с Unity UI и настройкам Canvas.
Создание сцены и настройка Canvas:
Сначала нужно создать пустой 3d проект и добавить новую камеру для UI (GameObject > Camera), дадим ей имя UICamera. Изменим проекцию (projection) камеры на orthographic (размер объектов не зависит от расстояния). Выставим Clear Flags > Depth only, это даст прозрачную камеру без лишних фоновых добавлений. Поскольку UI должен обрисовываться поверх всего, то нужно изменить глубину камеры (Depth = 1).
Далее создадим Canvas (GameObject > UI > Canvas), вмести с элементом Canvas создастся Event System, он необходим для обработки событий, которые происходят на Canvas (более подробно рассмотрим позже). Что же такое Canvas и для чего он нужен. Canvas переводится как «Холст» и представляет собой абстрактное пространство для настройки и отрисовки UI. Все UI элементы должны быть потомками Canvas. Рекомендуется использовать следующие настройки (они позволят автоматически подстраиваться под расширение экрана, очень удобно для мобильных устройств):
Выбираем «Render Mod > Screen Space – Camera»UI. В поле «Render Camera» выбираем созданную нами UICamera. Далее остается изменить Canvas Scaler Sctipt, а именно поле «UI Scale Mode > Scale With Screen Size», что дает автоматическое изменение UI в зависимости от расширения экрана.
На этом настойки Canvas закончены.
Работа с Unity UI:
Работать с UI элементами удобно в 2d режиме (это не обязательно, но значительно упростит процесс разработки UI), переключаться между 2d и 3d режимами можно «Scence > 2D».
Все элементы UI содержат следующий компонент «Rect Transform» (в том числе и Canvas). Именно «Rect Transform» контролирует расположение UI относительно расширения экрана.
Тема связана со специальностями:
Рассмотрим возможности «Rect Transform» на простом примере. Сначала создадим кнопку (правой кнопкой мыши на элемент Canvas > UI > Button). Первое, что бросается в глаза — это синий круг и четыре треугольника в центре кнопки.
Четыре треугольника называют «Якорь», поскольку в зависимости от его расположения и настроек изменяют свое поведение UI элементы при изменении расширения экрана. Синий круг – это «центр» кнопки (или другого UI элемента), относительно него происходит вращение (Rotation) или масштабирование (Scale) элемента.
Место расположения «центра» кнопки хранится в специфическом формате и за него отвечает поле «Pivot». Где хранится расположение «центра» в соотношении (координаты «центра» x и y поделить на ширину и высоту соответственно) относительно нижнего левого угла. То есть соотношение сторон зеленого и красного квадратов на рисунке ниже.
Например, «Pivot X = 0.5, Y = 0.5» означает, что центр кнопки находится посередине кнопки. «Pivot X = 0, Y = 0» означает, что центр кнопки находится в левом нижнем углу.
Далее рассмотрим работу «Якоря», он может работать в 2-х режимах.
Режим 1 — это когда все четыре треугольника находятся в одной точке. Тогда компонент «Rect Transform» имеет следующие поля: Pos X, Pos Y, Pos Z, Width, Height. Как Вы уже догадались, Width, Height хранят значение ширины и высоты UI элемента (в нашем случае кнопки).
Pos X, Pos Y, Pos Z отвечают за расстояние между центром «Якоря» и «центром» UI элемента.
Возникает вопрос, а зачем нам нужен этот «Якорь». Ответ прост, при изменении размеров родительского UI элемента «Якорь» изменяет расстояние к «центру» текущего UI элемента пропорционально этим изменениям. «Якорь», как и «центр», хранит свои координаты в соотнесённом виде в поле Anchors.
Для режима 1 «Anchors > Min» и «Anchors > Max» совпадают. Очень важно запомнить, что в этом режиме изменяется только расстояние между «Якорем» и «центром», а поля Width, Height остаются низменными (поскольку Canvas настроен в режиме «Scale With Screen Size», то с изменением расширения экрана все UI элементы изменят свои размеры за счет автоматического изменения параметра Scale в самом Canvas).
Режим 2 — это когда четыре треугольника разделены. И первое, что бросается в глаза — это изменения наших полей Pos X, Pos Y, Pos Z, Width, Height на Left, Top, Pos Z, Right, Bottom соответственно. Теперь четыре треугольника образовывают мнимый квадрат и расстояние от стороны этого квадрата к нашему UI элементу хранится в полях на Left, Top, Right, Bottom (функция Pos Z осталась неизменяемой и отвечает за глубину объекта).
Изменяя значения этих полей, меняется размер UI элемента, а не «Якоря». За «Якорь» по-прежнему отвечает поле Anchors, но теперь «Anchors > Min» и «Anchors > Max» не всегда будут совпадать.
Видео курсы по схожей тематике:
Unity User Interface
Основы использования Git 2016
Написание игрового сервера и создание клиента на Unity
Теперь поле «Anchors > Min» отвечает за расстояние между Left и Bottom сторонами родительского и текущего UI элемента, а «Anchors > Max» — за расстояние между Top и Right сторонами.
Теперь при изменении родительского объекта наш UI элемент изменит свои размеры (поскольку Canvas настроен в режиме «Scale With Screen Size», то с изменением расширения экрана все UI элементы изменят свои размеры за счет автоматического изменения параметра Scale в самом Canvas, и это даст дополнительные изменения всем элементам в режиме 2).
Чтобы постоянно не таскать «Якорь» и «центр» вручную, разработчики Unity сделали несколько стандартных настроек. В них можно перейти, нажав на следующий элемент:
Откроется следующие окно, где можно задать расположение «Якоря».
Если хотите вместе с изменениями «Якоря» изменить положение «центра», то следует зажать клавишу «Shift» (появляется синий кружочек который и отвечает за «центр»).
Также есть возможность сразу передвинуть UI элемент на нужную позицию, для этого нужно зажать клавишу «Alt» (можно зажимать «Alt» и «Shift» одновременно).
Работа с Grid Layout Group.
Для начала создадим тестовую сцену, создадим Canvas и добавим Plane (таким же способом, как кнопку). Plane должен располагаться приблизительно следующим образом:
Grid Layout Group можно добавить с помощью «Add Component»:
Теперь все дочерние объекты Plane будут автоматически подстраиваться (изменять размеры и свое расположение) в зависимости от настроек Grid Layout Group. Для наглядного примера добавим 4 Image элемента дочерними к Plane.
Чтобы отличать Image, загрузим туда различные спрайты.
Image1, Image2, Image3, Image4 было присвоено картинки цифр 1, 2, 3, 4 соответственно. Теперь, когда знаем, где какой элемент, начнем изучение Grid Layout Group.
Padding отвечает за отступы дочерних элементов от сторон родительского объекта.
Как видно на рисунке, 4-й Image не влезает в выделенные границы, поэтому его было перенесено на новую строку. Поле Spacing отвечает за расстояние между дочерними объектами.
Поле Cell Size отвечает за размеры дочерних объектов.
Поле «Start Corner» отвечает за порядок размещения дочерних объектов.
Upper Left размещает дочерние объекты слева на право и сверху вниз.
Upper Right размещает дочерние объекты справа налево и сверху вниз.
Lower Left размещает дочерние объекты слева направо и снизу вверх.
Lower Right размещает дочерние объекты справа налево и снизу вверх.
Поле «Start Axis» указывает, в какую сторону будут начинать размещаться дочерние элементы (по умолчанию стоит «Horizontal»).
То есть если дочерние объекты не влезают в ширину родительского, то происходит переход на новую строку.
Для Vertical наоборот, если дочерние объекты не влезают в высоту родительского, то происходит переход на новую строку.
Поле «Child Alignment» отвечает за автоматическое выравнивание дочерних объектов. Данное поле не сложное и напоминает выравнивание текста в Word.
Бесплатные вебинары по схожей тематике:
Как выбрать первый язык программирования
Как обучать команду IT-специалистов
Из Сибири в Кремниевую долину. Личный опыт.
Остается последнее поле «Constraint», оно дает возможность создавать фиксированное количество строк или столбцов (по умолчанию стоит «Flexible», то есть нет фиксирования).
Как видите, элемент Grid Layout Group очень простой, но иногда может значительно упростить работу и UI.
Заключение.
В этой части было особое внимание уделено работе с новым Unity UI, он стал намного удобнее и качественнее. Теперь нет нужды пользоваться посторонними плагинами, нужно лишь немного разобраться и можно создать любой интерфейс, адаптирующийся под расширение экрана (очень полезно для мобильных устройств).
На этом первая часть статьи закончена, попробуйте поиграться с различными UI элементами (не забывайте изменять расширение экрана для экспериментов).
Изменить расширение экрана можно в окне «Games», как показано на рисунке ниже:
На этом все, всем удачи и до новых встреч.