UI: Пользовательский интерфейс

Графический интерфейс пользователя (англ. Graphic User Interface, GUI) — это метод взаимодействия пользователя с игрой, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на экране, выполнены в виде графических изображений.

Интерфейс игры
Интерфейс игры

Canvas

Все элементы интерфейса (кнопки, изображения) должны находиться внутри объекта Canvas. Canvas — это холст экрана, на котором размещаются элементы. Для создания холста в главном меню выбери GameObject → UI → Canvas. В окне Инспектор можно настроить параметры холста. Самая важная настройка — это Render Mode компонента Canvas. Он отвечает за режим отображения интерфейса.

Render Mode содержит следующие настройки на выбор:

  • Screen Space - Overlay. Элементы интерфейса показываются поверх экрана. Стоит по умолчанию;
  • Screen Space - Camera. Позволяет отображать интерфейс в определенной камере;
  • World Space. В этом режиме элементы интерфейса располагаются в 3D пространстве.

Rect Transform

Все элементы интерфейса имеют настройки Rect Transfrom. Разберем их на примере кнопки (выбрав в главном меню GameObject → UI → Button).

Во время редактирования пользовательского интерфейса в Unity нужно включить режим 2D. Для этого на панели Scene нажми кнопку 2D:

Переключение режимов
Переключение режимов

Включи инструмент редактирования пользовательского интерфейса на панели инструментов или нажми кнопку T. С помощью этого инструмента можно перемещать, вращать и изменять размер элементов интерфейса.

Режимы редактирования
Режимы редактирования

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

Anchor — это точка привязки элемента интерфейса на экране. Изменить расположение Anchor можно, если схватить за центр «цветка». Разберем пример, когда Anchor привязан к левому верхнему краю. Точка Anchor кнопки находится в левом верхнем углу. При изменении размера экрана – кнопка не изменяет свой размер и будет расположена на определенном расстоянии от левого верхнего угла. Следовательно, кнопка будет выглядеть большой на маленьком экране и маленькой на большом мониторе.

Пример 1
Пример 1
Пример 2
Пример 2

Для того, чтобы элемент интерфейса масштабировался — расположи «лепестки» Anchor так:

Пример 3
Пример 3
Пример 4
Пример 4

Button

Создать кнопку можно в главном меню GameObject → UI → Button. Кнопка состоит из двух объектов, которые можно посмотреть в окне Иерархия - формы и текста внутри нее:

Объекты кнопки
Объекты кнопки

Сначала разберем настройки надписи на кнопке. Выбери Text на панели Hierarchy. В Inspector будут следующие настройки текста:

  • Text — текст кнопки;
  • Font Size — размер текста.

Теперь, рассмотрим настройки формы кнопки. Выбери объект Button (название этого объекта можно изменить). В окне Инспектор находятся следующие основные настройки:

  • Normal Color. Цвет кнопки;
  • Highlighted Color. Цвет кнопки при наведении на нее мыши;
  • Pressed Color. Цвет нажатой кнопки.

Функции

Как ты уже знаешь, отдельным блокам кода можно задавать имена. Такой именованный блок кода называется функцией или методом (частный случай функций). Для примера создадим функцию с именем SayHello, которая выводит фразу Hello world! в консоль:

void SayHello() {
	print("Hello world!");
}

Обратите внимание, что функция не выполняется автоматически при создании. Чтобы функция выполнилась, ее требуется явно вызвать в желаемом месте. Для примера вызовем созданную функцию внутри функции Start():

void Start () {
	SayHello();
}

Обработка события нажатия на кнопку

Для обработки события нажатия на кнопку необходимо выполнить два шага:

1. Создать функцию, которая должна выполняться при каждом нажатии.

// функция PrintClicked() выведет сообщение при вызове
void PrintClicked() {
	print("Кнопка нажата");
}

2. Передать имя созданной функции в функцию AddListener() соответствующего события кнопки.

void Start () {
	// получаем и сохраняем компонент кнопки
	Button button = GetComponent< Button >();
	// передаем имя PrintClicked в AddListener.
	// onClick - событие клика
	button.onClick.AddListener(PrintClicked);
}

Весь код скрипта:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // чтобы все работало, необходимо подключить к скрипту интерфейс

public class ButtonSceneLoader : MonoBehaviour {

    void Start () {
    	// получаем и сохраняем компонент кнопки
	Button button = GetComponent< Button >();
	// передаем имя PrintClicked в AddListener.
	// onClick - событие клика
	button.onClick.AddListener(PrintClicked);
    }
    void PrintClicked() {
	print("Кнопка нажата");
    }
}

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  // чтобы все работало, необходимо подключить к скрипту интерфейс
using UnityEngine.SceneManagement; // также подключаем менеджер сцен

public class ButtonSceneLoader : MonoBehaviour {

    public string sceneName; // имя сцены нужно будет указать в окне Инспектор

    void Start()
    {
        // получаем и сохраняем компонент кнопки
        Button button = GetComponent< Button >();
        // передаем имя PrintClicked в AddListener.
        // onClick - событие клика
        button.onClick.AddListener(Load);
    }
    void Load()
    {
        SceneManager.LoadScene(sceneName); // команда загружает сцену с нужным именем
    }
}

Создание кнопки со своим дизайном

Рассмотрим пример создания кнопки, состоящая из трех изображений: обычное состояние (Normal), состояние, когда на кнопку наведена мышь (Hovered) и состояние нажатия на кнопку (Pressed). Кнопки можно ⬇ скачать тут.

Нормальное состояние кнопки (Normal) и нажатая кнопка (Pressed)
Нормальное состояние кнопки (Normal) и нажатая кнопка (Pressed)

Сначала нужно загрузить все изображения кнопки в проект, лучше использовать одно изображение, разделенное с помощью инструмента Sprite Editor. Выбери загруженное изображение и в окне Инспектор в параметре Texture Type выбери Sprite (2D and UI). После чего нажми кнопку Apply.

Изменение типа изображения
Изменение типа изображения

Теперь в параметре Sprite Mode выбери Multiple и нажми кнопку Sprite Editor, чтобы открылся редактор Sprite Editor. Выбери в меню Slice → Type → Automatic и нажми кнопку Slice. Unity сам найдет все кнопки и разметит их.

Автоматическая разметка кнопок
Автоматическая разметка кнопок

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

Фрагменты кнопки, которые не будут изменять размер
Фрагменты кнопки, которые не будут изменять размер

Выполни это действие для каждой кнопки. После этого можно закрыть окно и принять изменения.

Создай кнопку Выдели кнопку GameObject → UI → Button. Выбери ее и в окне Инспектор отредактируй следующие настройки:

  • в параметре Source Image выбери спрайт кнопки в обычном состоянии (normal);
  • в параметре Image Type выбери Sliced;
  • в параметре Transition выбери Sprite Swap;
  • в параметре Highlighted Sprite выбери спрайт подсвеченной кнопки (с нашими кнопками это normal состояние);
  • в параметре Pressed Sprite выбери спрайт нажатой кнопки.
Настройки кнопки
Настройки кнопки

Image

GameObject → UI → Image позволяет показывать на переднем плане экрана изображения такие как карта, значок жизни, магии и прочее.

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

  • в параметре Texture Type выбери Sprite (2D or UI);
  • в параметре Sprite Mode выбери Single.

Добавь на сцену GameObject → UI → Image. На панели Inspector выбери следующие настройки:

  • в параметре Source Image выбери загруженное изображение;
  • в параметре Color можно перекрасить изображение в определенный цвет;
  • в параметре Image Type выбери Simple. Если включить настройку Preserve Aspect, то изображение не будет деформироваться при изменении размера экрана. Если в настройке Image Type выбрать Tiled — изображение будет повторяться на экране.

Text

GameObject → UI → Text позволяет отображать текст в графическом интерфейсе (отображение диалогов, подсказок, надписей). Содержит следующие настройки:

  • Text — текст, который будет отображаться на экране;
  • Font — шрифт текста;
  • Font Style — тип шрифта. Принимает следующие значения:
  • Normal – обычный шрифт;
  • Bold – применение полужирного начертания к тексту;
  • Italic – применение курсивного начертания к тексту;
  • Bold and Italic – применение курсивного и полужирного начертания к текст.
  • Font Size — размер шрифта;
  • Alignment — выравнивание текста;
  • Color — цвет текста.

Текст можно менять с помощью скрипта. Это позволит в режиме реального времени отображать количество набранных очков, жизни, времени и т.п.

void Start() {
	// получаем и сохраняем компонент Text
	Text textField = GetComponent< Text >();
	// перезаписываем поле text
	textField.text = "Новый текст";
}