Что такое ui в unity
Перейти к содержимому

Что такое ui в unity

  • автор:

Создание интерфейса (UI) под разные разрешения экрана

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

В данном руководстве о том “как это делается”, мы собираемся использовать простой пример, чтобы взглянуть и сравнить между собой различные инструменты в контексте данного вопроса. В нашем случае как показано ниже, у нас по углам имеется три кнопки и нашей целью является адаптировать данную компоновку под разные разрешения.

Для данного руководства о том “как это делается” мы решили использовать четыре разрешения экрана: Phone HD в портретной ориентации (640 x 960) и альбомной (960 x 640) и Phone SD также в портретной (320 x 480) и альбомной (480 x 320). Изначально компоновка была настроена под Phone HD портретную ориентацию и разрешение.

Using anchors to adapt to different aspect ratios

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

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

Одним из способов сохранить расположение кнопок в области экрана является изменение компоновки таким образом, чтобы места их расположения были связаны с их соответствующими углами на экране. Привязка левой верхней кнопки может быть также установлена в левом верхнем углу при использовании в инспекторе выпадающего списка Anchors Preset (наборы привязок), или путём перетаскивания треугольных ручек привязок в видовом окне сцены (Scene View). Лучше сделать это пока текущее разрешение экрана, установленное в игровом режиме (Game View) является тем разрешением, для которого изначально всё и было задумано, где места расположения кнопок были бы подобраны более разумно и как говориться к месту.(Ознакомьтесь со страницей UI Basic Layout для получения более подробной информации по привязкам.). Так же например привязки для левой нижней и правой нижней кнопок могут быть выставлены в левый нижний и правый нижний угол соответственно.

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

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

В данном руководстве о том “как это делается” мы уже знаем о том, что небольшая разрешающая способность портретной и альбомной ориентации Phone HD устройств не соответствует экранам, которые физически обладают меньшим по сравнению с ними размером, в то время как это самое соответствие больше выражается в плотности пикселей на 1 дюйм самого экрана. На этих экранах меньшей плотности кнопки не должны отображаться крупнее чем на экранах устройств с большей плотностью пикселей — они должны быть точно такого же размера, ни больше, не меньше.

Данное означает что кнопки должны становиться меньше настолько же, насколько в процентном соотношении становиться меньше сам экран. Другими словами, масштаб кнопок должен быть привязан к масштабу размеров экрана. Вот где может помочь компонент Reference Resolution

Масштабирование с компонентом Screen Size

Компонент Canvas Scaler может быть добавлен в корень Canvas — игровой объект (Game Object) со встроенным в него компонентом Canvas, все интерфейсные элементы которого являются его потомками. Он также создаётся по-умолчанию во время создания нового компонента Canvas через меню GameObject.

В компоненте Canvas Scaler вы можете установить его UI Scale Mode в Scale With Screen Size. В данном режиме масштабирования вы можете определить какое разрешение использовать в качестве базового. Если текущее разрешение больше или меньше базового, фактор масштабирования компонента Canvas устанавливается соответственно так, чтобы все элементы интерфейса масштабировались в большую или меньшую сторону вместе с разрешением экрана.

In our case, we set the Canvas Scaler to be the Phone HD portrait resolution of 640 x 960. Now, when setting the screen resolution to the Phone SD portrait resolution of 320 x 480, the entire layout is scaled down so it appears proportionally the same as in full resolution. Everything is scaled down: The button sizes, their distances to the edges of the screen, the button graphics, and the text elements. This means that the layout will appear the same in the Phone SD portrait resolution as in Phone HD portrait; only with a lower pixel density.

Чего стоит опасаться: так это того, что после добавления компонента Reference Resolution, важно также проверять как будет выглядеть компоновка с другими соотношениями сторон. Установив разрешение обратно в Phone HD альбомное, можно заметить как кнопки стали больше, чем должны быть (и для чего должны были быть использованы).

Причина, по которой кнопки при альбомном соотношении сторон становятся больше кроется в том, как работают настройки базового разрешения (Reference Resolution). По-умолчанию они сравнивают ширину текущего разрешения с шириной базового и как результат всё на экране масштабируется основываясь на коэффициенте масштабирования, получаемом из этой разницы. Если текущее альбомное разрешение равное 960 x 640 превосходит в 1.5 раза ширину портретного базового разрешения равного 640 x 960, то вся компоновка в целом будет увеличена в 1.5 раза.

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

Если свойство Match имеет значение не равное 0.5, оно будет сравнивать текущую ширину с базовой шириной, текущую высоту с базовой высотой, и выберет коэффициент масштаба близкий и к тому и к другому разрешению.

At this point the layout supports all the four screen resolutions using a combination of appropriate anchoring and the Canvas Scaler component on the Canvas.

Для более подробной информации о том, какими ещё способами можно добиться масштабирования элементов интерфейса относительно разных разрешений экрана, посетите страницу документации Canvas Scaler.

Создание пользовательских интерфейсов (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.

Создание архитектуры UI на Unity

Создание архитектуры UI на UnityСоздание архитектуры UI на UnityСоздание архитектуры UI на UnityСоздание архитектуры UI на UnityСоздание архитектуры UI на Unity Создание архитектуры UI на Unity

Благодаря этому можно создать несколько типов переходов, и они могут быть напрямую настроены художниками. Для более сложных анимаций можно создать AScreenTransition, который работает с Animator.

Самое плохое, по моему мнению, что даже для самых простых движений нужен набор анимаций и контроллер Animator. В Unity всё зависит от иерархии и названий, так что даже для создания элементарного затухания экрана нужно сильно постараться. К счастью, теперь есть SimpleAnimationComponent, для которого не нужен контроллер Animator.

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

Unity UI Toolkit: Быстрый старт

В игре может быть множество элементов интерфейса, всплывающих окон и т. д., и когда появится необходимость изменить общий стиль, например цвет кнопки или текста, то придется это менять во всех созданных элементах, если используется старая система UI Canvas — uGUI (IMGUI забудем как страшный сон). Не так давно Unity предоставили новую систему UI Toolkit, вдохновленную веб-технологиями (HTML-CSS vs UXML-USS) и позволяющую изменить цвет, шрифт и другие свойства всех элементов в игре одним движением. Преимуществ много, например можно подключить веб-дизайнера, и он тут быстро освоится.

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

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

Установка UI Toolkit

Меню Window — Package Manager — Кнопка + — Add package from git URL. — com.unity.ui — Add

После этого в меню Window появится новый пункт UI Toolkit.

Создание интерфейса

Меню Window — UI Toolkit — UI Builder

Кратко пройдемся по редактору:

  • (1) — Viewport — рабочее пространство, видим что создаем
  • (2) — StyleSheets — перечень классов USS
  • (3) — Hierarchy — иерархия всех элементов на странице
  • (4) — Library — набор стандартных элементов управления
  • (5) — Inspector — визуальное средство редактирования свойств

Начнем с корневого элемента, назовем его Panel:

Добавим класс, тут же попросит сохранить:

На видео получилась такая последовательность сохранений:

  1. Сохраняется файл стилей USS.
  2. Сохраняется страница с разметкой UXML.
  3. Опять потребовало сохранить UXML, с первого раза видимо ему непонятно, не знаю как у вас, но у меня так всегда.
  4. Здесь я нажал Ctrl-S для очередной попытки, т.к. в панели Viewport (1) продолжала висеть звездочка рядом с названием файла — это означает, что сохранение не произошло.

Он так себя ведет первый раз, потом в процессе работы просто нажимайте Ctrl-S, чтобы сохранить весь прогресс.

Теперь обязательно сделайте вот что:

  1. Переходим на сцену.
  2. Создаем пустой объект.
  3. Добавим в него компонент UI Document.

  1. В панели Project — Create — UI Toolkit — Panel Settings Asset.

  1. Переносим его в свойство Panel Settings компонента UI Document.
  2. Файл cafe.uxml переносим в свойство Source Asset компонента UI Document.

  1. Закрываем панель UI Builder.
  2. Открываем панель UI Builder (уже весело).

Для чего вот это вот все? В панели Viewport (1) появился важный пункт Unity Default Runtime Theme. Он позволяет во время редактирования видеть, как будет выглядеть интерфейс в игре. Зачем они сделали Dark и Light Editor Theme, которые выглядят совсем иначе и не связаны с игрой, только им известно.

Продолжаем веселье, заново создавая корневой элемент Panel, т.к. он потерялся из-за манипуляций с сохранениями. Не переживайте, потом ничто никуда не потеряется, только первый раз Unity решает покапризничать. Перетаскиваем класс .panel на элемент Panel, после чего окно инспектора должно выглядеть так:

Видим, что класс добавлен в элемент.

Теперь щелкаем на название класса в окне StyleSheets (2), чтобы менять свойства. Не перепутайте, щелкая на элемент в иерархии (3), иначе вы будете менять свойства только одного элемента, а нам нужно изменять все окна в игре, редактируя класс.

Установим ширину окна, выравниваем его по центру экрана с помощью margin: auto (все как для веб), цвет настроения черный с легкой прозрачностью, и border-radius: 10px .

Добавим заголовок окна. Переносим Label на нашу #Panel и убеждаемся, что она упала дочерним элементом, т.к. тут часто можно промахнуться, и элемент становится соседним, а не вложенным.

В классе .panel установим цвет текста, чтобы цвет наследовался всем вложенным элементам, тут тоже все как в веб.

Добавим класс для заголовка, просто установив шрифт чуть больше, и перетянем его на метку.

В инспекторе можете сами пройтись по атрибутам, там все интуитивно понятно. Скажу только сразу, что разметка изначально настроена на технологию flex. Если вы не знакомы с flex, то гугл вам все расскажет. Все правила из веб разработки касаемо flex применимы и здесь.

Также здесь работает и масштабирование как в Canvas. Вначале мы создавали файл настроек Panel Settings Asset, и если на нем щелкнуть в панели Project, то в стандартном инспекторе мы увидим свойства Scale Mode как в Canvas. По умолчанию установлено Constant Physical Size, что для меня лично удобно, я всегда в Canvas переключал на это значение.

Обработчик событий: оживляем кнопку

Зачем нам это все, если мы не сможем это запрограммировать? Добавим обработчик на кнопку.

Добавим кнопку в наше окошко, сохраним и перейдем на сцену. Создаем скрипт с любым названием, например CafeUI. Ранее мы добавили пустой объект с компонентом UI Document. На него и вешаем скрипт. Переходим в редактор кода, например Visual Studio.

Unity рекомендует обрабатывать элементы страницы в методе OnEnable(), так и сделаем. В листинге ниже комментарии все объясняют.

using UnityEngine; using UnityEngine.UIElements; //ссылка на библиотеку для работы с UI Toolkit public class CafeUI : MonoBehaviour < Button okButton; void OnEnable() < //Получаем ссылку на компонент UIDocument var uiDocument = GetComponent(); //Находим кнопку таким запросом, в параметр передаем имя кнопки okButton = uiDocument.rootVisualElement.Q("okButton"); //Регистрируем событие нажатия кнопки okButton.RegisterCallback(ClickMessage); > void ClickMessage(ClickEvent e) < //Реализуем тут любые действия при нажатии кнопки Debug.Log("ok"); >>

Единственного удобства uGUI в перетаскивании методов на кнопку тут нет, но и такой способ особо не напрягает.

Список товаров, связывание данных (ListView и Binding)

В кафе должен быть список товаров, и мы, конечно же, хотим формировать его динамически во время выполнения. Источник данных может быть любой, но в данном случае для простоты мы будем генерировать список в коде, чтобы отобразить его в окне.

Кидаем на страницу в UI Builder элемент ListView, установим ему атрибуты fixed-item-height=»50″ style=»height: 120px; margin: 10px;» . В панели Project создаем новый UXML-документ (Create — UI Toolkit — UI Document), задаем ему имя item.uxml и открываем его двойным щелчком или клавишей Enter. Это будет шаблон элементов списка. Он будет состоять из картинки, названия товара и цены. Должно выглядеть это так:

Внизу в коде uxml видно, какие атрибуты выставлены элементам. Здесь можно обойтись без uss-стилей, т.к. других окон у нас не будет, но если у вас должно быть несколько окон со списками, то удобнее будет установить единый стиль для списков в одном uss-файле. Цвет текста будет наследоваться от класса .panel. Корневому элементу установлено расположение вложенных элементов в строку и выравнивание посередине. Картинка 50px на 50px, название товара занимает всю оставшуюся область ( flex-grow: 1 ), и для цены установлена фиксированная ширина, иначе весь список будет кривой, т.к. цена может быть разной.

Далее нужно создать класс, который будет представлять данные о товаре:

public class Item < public string Name < get; set; >public decimal Price < get; set; >>

Теперь самое сложное. В официальной документации предоставили довольно сложноватый пример, состоящий из нескольких классов и запутанного кода. Я же не люблю плодить много файлов и классов, и максимально упростил пример, чтобы сосредоточиться только лишь на связывании данных. Сделаем все по порядку. Нумерация пунктов соответствует нумерации в комментариях кода.

  1. Инициализируем список товаров. Здесь для простоты создаем список из двух товаров, в реальной игре же источник данных может быть любой — база данных, api-запросы, файлы и т.д.
  2. Находим отображаемый список на странице. Это ListView с именем list на главной странице cafe.uxml.
  3. Связываем шаблон элементов списка с самим списком.
  4. Связываем данные с отображаемым списком.
  5. Регистрируем событие выбора из списка.
  6. Переносим шаблон item.uxml на переменную itemsListTemplate в инспекторе

  1. Стилизуем список. Тут пара хитростей. В UI Toolkit есть встроенные классы для каждого контрола, их очень много и можно посмотреть по ссылке https://docs.unity3d.com/2021.3/Documentation/Manual/UIE-ElementRef.html
  • изменим цвет наведения мыши на элемент списка: .unity-list-view__item:hover
  • изменим цвет выбранного элемента; второй селектор тут добавлен, чтобы при наведении мыши не менялся цвет выбранного элемента: .unity-collection-view__item—selected, .unity-collection-view__item—selected:hover

Эти селекторы можно добавить прямо в файл index.uss.

using System.Collections.Generic; using System.Linq; using UnityEngine; using UnityEngine.UIElements; //ссылка на библиотеку для работы с UI Toolkit public class CafeUI : MonoBehaviour < Button okButton; public VisualTreeAsset itemsListTemplate; //uxml-шаблон элементов списка Listitems = new List(); //список товаров ListView itemsListView; //список на странице void OnEnable() < //Получаем ссылку на компонент UIDocument var uiDocument = GetComponent(); //Находим кнопку таким запросом, в параметр передаем имя кнопки okButton = uiDocument.rootVisualElement.Q("okButton"); //Регистрируем событие нажатия кнопки okButton.RegisterCallback(ClickMessage); //Работаем со списком //1. Инициализируем список товаров items.Add(new Item < Name = "Пирожок", Price = 40 >); items.Add(new Item < Name = "Мороженое", Price = 60 >); //2. Находим отображаемый список на странице itemsListView = uiDocument.rootVisualElement.Q("list"); //3. Связываем шаблон элементов списка с самим списком itemsListView.makeItem = () => < return itemsListTemplate.Instantiate(); >; //4. Связываем данные с отображаемым списком itemsListView.bindItem = (_item, _index) => < //Связываем список товаров по индексу var item = items[_index]; //Получаем доступ к визуальным элементам шаблона по именам, которые мы указали в шаблоне _item.Q("name").text = item.Name; _item.Q("price").text = $" руб"; //В данном случае картинка товара должна лежать в папке Resources и иметь название такое же, как название товара _item.Q("image").style.backgroundImage = Resources.Load(item.Name); >; //Здесь все стандартно itemsListView.itemsSource = items; //5. Регистрируем событие выбора из списка itemsListView.onSelectionChange += ItemsListView_onSelectionChange; > private void ItemsListView_onSelectionChange(IEnumerable obj) < if (obj.Count() >0) < var item = obj.First() as Item; Debug.Log($": руб"); > > void ClickMessage(ClickEvent e) < //Реализуем тут любые действия при нажатии кнопки Debug.Log("ok"); >> 

Результат работы

USS как CSS

USS максимально схож с CSS, благодаря чему знакомый с веб-разработкой будет чувствовать себя здесь в своей стихии. В вашем распоряжении все возможности из мира CSS:

  1. Использование переменных. Например:
:root < --general-bg: #4D4D4D; >Button
  1. Вложенность и комбинации селекторов ( selector1 selector2 ; selector1 > selector2 ; selector1, selector2 . )
  2. transform, translate, transition.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *