Работа с UI элементами в Unity

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

Перед началом работы с UI элементами необходимо проделать несколько подготовительных действий, которые включают в себя: создание канваса, и его настройка.

Подготовительная часть

Все UI элементы (картинки, кнопки, текст и тд) создаются внутри специального объекта - Canvas. Поэтому, создайте его с помощью окна Hierarchy, выбрав UI - Canvas.

Обратите внимание, что после создания объекта Canvas, так же был создан дополнительный объект с именем EventSystem, который нужен для того, чтобы Canvas работал, поэтому ни в коем случае его не удаляйте.

Теперь предлагаю настроить наш канвас(не обязательно). Для этого кликаем на объект Canvas, и в окне Inspector в поле Render Mode можете указать любое значение, как вам удобно. Лично я указываю всегда Screen Space - Camera, чтобы канвас был прикреплён к нашей камере. После чего, в поле Render Camera перетаскиваю объект своей камеры Main Camera.

Подготовительная часть завершена, теперь переходим непосредственно к работе с UI элементами.

UI элементы

Перед созданием элементов, хотелось бы обратить внимание на то, что абсолютно у каждого UI объекта вместо привычного нам компонента Transform, присутствует Rect Transform. Все его поля рассматривать не будем, а затронем лишь 4 основных: Pos X, Pos Y, Width и Height.

В поле Pos X мы указываем позицию по оси X от самого центра экрана. А в поле Pos Y так же указываем позицию элемента от центра, но только по оси Y. В полях Width и Height мы указываем ширину и высоту нашего элемента. Все эти значения абсолютные, и указываются в пикселях. Изменять эти значения можно как в данных полях, так и через игровую сцену, с помощью мыши.

Изменяя только эти четыре поля, мы можем создать игровой интерфейс на любой вкус. Ну а сейчас, разберём основные типы UI элементов, а именно: Image, Panel, Text, Button и Slider.

UI элемент: Image

Элемент Image самый простой и частоиспользуемый. Он необходим для встраивания в него какого-либо изображения. Создаётся он с помощью ПМК - UI - Image. Можете прямо сейчас его и создать.

Давайте немного увеличим его в размерах, и перетащим в верхнее левое положение экрана. В дальнейшем в него можно встроить, например, иконку вашего игрового персонажа.

UI элемент: Panel

Элемент Panel почти ничем не отличается от элемента Image, и выполняет примерно те же функции. Обычно его используют для группировки нескольких элементов вместе. Создаётся он с помощью ПМК - UI - Panel

UI элемент: Text

Элемент Text необходим для создания текста. Создаётся он с помощью ПМК - UI - Text - TextMeshPro. Помимо основных настроек компонента Rect Transform, здесь так же присутствует компонент TextMeshPro - Text (UI), в котором имеется множество дополнительных настроек как для написания текста, так для его редактирования.

Впишем следующий текст: "Уровень: 5", и перетащим его под нашу картинку.

UI элемент: Button

Элемент Button необходим для создания кнопок. Создаётся он с помощью ПМК - UI - Button - TextMeshPro. У данного элемента имеется дополнительный компонент Button, в котором производятся различные настройки для нашей кнопки. И самое главное, здесь есть поле On Click(), в котором можно указать те события, которые должны происходить при нажатии на кнопку.

Так же хочу обратить ваше внимание, что в окне Hierachy, внутри созданного объекта Button, автоматически создаётся объект текстового элемента Text, который мы разбирали ранее. Он создаётся чтобы указать текст на кнопке.

Создадим 2 объекта типа Button, и перетащим их в правое верхнее положение экрана.

UI элемент: Slider

Элемент Slider необходим для создания слайдеров. Обычно они используются для создания полосы здоровья игрового персонажа. Создаётся он с помощью ПМК - UI - Slider. У данного элемента имеется компонент Slider, который этот слайдер и настраивает.

Обратите внимание на поле Value. Можете изменить его значение, и посмотрите как слайдер реагирует на это на игровой сцене.

Так же обратите внимание, что в окне Hierarchy внутри данного слайдера, как и с Button, было создано множество внутренних элементов.

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

Бонус

В полях Pos X и Pos Y компонента Rect Transform, для всех наших элементов мы указывали позицию элементов, относительно центра экрана. И это не совсем правильно, ведь на других разрешениях экрана, наши элементы будут отображаться не там где мы этого задумывали. Поэтому, для каждого элемента необходимо указать своё позиционирование с помощью встроенных шаблонов.

Для этого кликаем на иконку в левом верхнем углу компонента Rect Transform, и далее из девяти шаблонов выбираем необходимый.

Например, для элементов, которые расположены в левом верхнем углу экрана, необходимо выбрать верхний левый шаблон. Отныне, позиции элементов, которые указываются в Pos X и в Pos Y, будут расчитываться относительно левого верхнего угла экрана. Аналогичным способом шаблоны нужно указать и для наших кнопок, расположенных в верхнем правом углу. Только выбирать необходимо верхний правый шаблон.

Проблема современного создания UI интерфейсов состоит в том, что на данный момент существует огромное количество разрешений экранов. Поэтому, для того, чтобы сделать качественный интерфейс, который будет хорошо отображаться на любом разрешении экрана, необходимо использовать адаптивную вёрстку. Более подробней об адаптивной вёрстке мы рассказали в статье «Создание адаптивной вёрстки UI интерфейса»

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