Часть 1

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

В старой версии Unity UI было необходимо вручную вписывать код GUI в OnGUI.

Это медленно, неэффективно и ориентировано на человека со знаниями программиста, что само по себе противоречит назначению Unity.

Многие разработчики при этом использовали сторонние инструменты, такие как NGUI.

Однако, Unity Technologies приняли во внимание отзывы пользователей и разработали новую систему, которая была выпущена в версии Unity 4.6.

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

Кроме того, вы также научитесь:

  • Создавать анимированные кнопки;

  • Использовать диалог настроек, для редактирования сцены;

  • Использовать элементы управления GUI, такие как текст, слайдер, панель и маска.

Введение

Это руководство предназначено для тех, кто уже немного знаком с редактором Unity. Если вы ничего не знаете об этом редакторе, советуем вам посмотреть нашу серию «Введение в Unity».

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

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

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

Создание MenuScene

Откройте в программе директорию «начальный проект Введение в Unity UI часть 1».

Игра RocketMouse уже настроена для редактирования, и все необходимые материалы для работы с ней находятся в соответствующей папке.

Сейчас вам будет нужно создать новую сцену.

Для этого в меню выберите «Файл» ⇒ «Новая сцена».

Лучше всего сразу сохранить результат. Откройте «Файл» ⇒ «Сохранить сцены». Затем введите «MenuScene» в качестве названия файла и сохраните его в папке RW / Scenes, рядом с файлом «RocketMouse».

Импорт изображений и шрифтов

Прежде всего, вам нужно добавить материалы с которыми вы будете работать в созданную вами сцену.

Для этого распакуйте пакет с ресурсами пользовательского интерфейса в проводнике.

Там вы найдете две папки: Меню и Шрифты.

Важно: Папка «Меню» уже содержит фоновые изображения, кнопки, значки и другие игровые элементы, которые понадобятся вам в ходе этого урока. В интернете вы можете, при желании, скачать дополнительные материалы.

Далее в папке Project создайте новую папку с именем UI и переместите папки «Меню» и «Шрифты» в папку пользовательского интерфейса в окне «Проект»:

После этого обязательно убедитесь, все ли элементы корректно отображаются в пользовательском интерфейсе и к ним применена настройка текстуры Sprite (2D и UI).

Создание первого элемента пользовательского интерфейса

Первым элементом, который вам предстоит станет фоновое изображение для сцены меню. В верхней панели выберите GameObject ⇒ UI ⇒ Image. При помощи этого действия вы добавите объект с именем «Image» в пустую сцену. Это также должно отобразиться в иерархии. Теперь вам нужно выбрать изображение и установить для него значения его положения в пространстве сцены (X: 0, Y: 0).

Обратите внимание: Rect Transform является пользовательским интерфейсом, который эквивалентен Transform. Вы будете часто использовать его в этом уроке.

Сейчас в иерархии вы увидите три новых функции:

  1. Изображение;

  2. Холст;

  3. Создание событий (EventSystem).

Изображение (Image) является по сути не активным элементом редактора, который отображает спрайт со множеством параметров для настройки. Например, вы можете применить к изображению любой цвет или фактуру, настроить время показа этого изображения или даже анимировать его.

Холст (Canvas) — это корневой объект для элементов пользовательского интерфейса. Он имеет несколько свойств, которые позволяют вам контролировать настройки вашего пользовательского интерфейса.

Создание событий (EventSystem) применяется для обработки различных событий к объектам, которые находятся в пределах сцены.

Настройка фонового изображения меню

В первую очередь вам нужно переименовать изображение дав ему название «Фон», выбрав в иерархии соответствующую функцию. Теперь откройте RW ⇒ UI в окне проекта и найдите изображение, которое называется «menu_background». Переместите при помощи мыши это изображение в специальное поле «Изображение» в фоновом режиме в инспекторе:

Теперь вместо белого фона должно появиться фоновое изображение. Также вы можете настроить желаемый размер картинки. Для этого в инспекторе найдите директорию «Установить собственный размер» и установите значения для фона 1136 x 640.

Теперь ваша сцена выглядит более привлекательно и правильно:

Но сейчас все еще остается одна недоработка.

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

Справка: оригинальный дизайн игры был создан для iPhone с 3,5- и 4-дюймовым дисплеем. Поэтому элементы дизайна, в том числе и задний фон поддерживают разрешения 1136 x 640 и 960 x 640. Однако, скоро вы увидите, как пользовательский интерфейс может адаптироваться к различным разрешениям игры.

Эту проблему поможет решить Canvas Scaler.

Использование функции Canvas Scaler

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

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

Для завершения этого шага вам нужно выбрать в иерархии «Canvas» и в инспекторе появится новый компонент «Canvas Scaler»:

Canvas Scaler имеет три режима для изменения масштаба:

  • Сохранение постоянного размера пикселя (Constant Pixel Size): заставляет элементы пользовательского интерфейса сохранять одинаковый размер пикселя, независимо от размера экрана. Это значение применяется по умолчанию для Canvas.

  • Изменение масштаба в зависимости от размера экрана (Scale With Screen Size): размеры и расположение элементов пользовательского интерфейса устанавливаются в соответствии с указанным разрешением монитора. Если размеры изображения больше, чем указанное разрешение, Canvas будет «подгонять» изображение в соответствии с параметрами монитора.

  • Сохранение физического размера (Constant Physical Size): в этом случае значения позиций рабочих элементов пользовательского интерфейса указываются в физических единицах, таких как миллиметры или пиксели.

Вам нужно изменить режим компонента для масштабирования «Scale With Screen Size» и установить его координаты X: 1136, Y: 640. Также увеличьте значения ширины и высоты, сдвинув ползунок максимально вправо.

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

Попробуйте изменить разрешение, чтобы посмотреть, как ваша игра будет выглядеть на разных устройствах. К примеру, для того чтобы посмотреть результат для iPhone необходимо выбрать размер экрана 480 × 320.

Важно: Если вы не видите подходящего размера ни одного из моделей iPhone, то скорее всего, вы используете настройки для другой платформы. В строке меню выберите «Файл» Settings «Настройки параметров». В диалоговом окне вам нужно указать iOS в качестве настроек платформы.

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

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

Если в данный момент вы измените значения Высота или Ширина на ноль, то фон будет отображаться в правильных пропорциях для iPhone 5 и iPhoneX, однако на iPhone 4 картинка будет выглядеть обрезанной и маленькой.

Хотя Canvas Scaler имеет два режима изменения масштаба: Expand и Shrink, существует есть еще одна полезная функция, которую вы можете использовать специально для фоновых изображений.

Попробуйте вернуть изначальные параметры ширины и высоты Canvas Scaler = 1. Теперь вам нужно выбрать вкладку «Фон» и добавить новый компонент «Соотношение сторон» (Aspect Ratio Fitter).

Он автоматически установит значение Aspect Ratio в текущее положение Rect Transform изображения. Теперь переключитесь на «Envelope Parent» чтобы снова изменить изображение. Теперь оно должно заполнять весь экран.

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

Добавление изображения для заголовка

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

Откройте диалоговое окно «Сцена» и на верхней панели выберите GameObject ⇒ UI ⇒ «Изображение». Это добавит другое изображение в качестве дополнительного элемента Canvas:

Важно: Если изображение не отображается в рабочей области сцены, нужно вручную установить для его свойств координаты X и Y равные 0, чтобы отцентрировать его.

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

  1. Выбрать текущее изображение в иерархии и изменить его название на «Заголовок»;

  2. Открыть папку «Меню» в окне «Проект» и найти изображение header_label;

  3. Переместить картинку в поле «исходное изображение», которое находится в инспекторе;

  4. Выбрать пункт в инспекторе – «установить собственный размер».

Теперь вы будете работать с компонентом Rect Transform, чтобы правильно расположить изображение.

Функции Rect Transform, анкоры и Pivot

Если вы когда-либо ранее работали с Unity, то вы должны знать, что такое Transform. Transform – это специальный инструмент, который может позиционировать, вращать и масштабировать объекты на сцене. Вот как это выглядит:

Окно Transform появляется при изменении параметров игровых объектов, которые не используют пользовательский интерфейс в виде иерархии. Для изменения параметров того же заголовка потребуется специальный компонент Rect Transform.

Вы наверняка заметили, что Transform и Rect Transform выглядят по-разному и имеют разные поля для ввода. Rect Transform может изменить внешний вид объекта в зависимости от настроек привязки. Например, это может выглядеть следующим образом:

В этом окне вместо координат X и Y, высота и ширина, вы можете увидеть поля для ввода Слева, Сверху, Справа и Снизу.

Что такое анкоры?

Установка анкоров — это простой и действенный способ изменения положения и размера элементов UI. Когда вы устанавливаете привязки, то должны указать сразу несколько позиций в исходном элементе. Когда вы это сделаете, то элемент пользовательского интерфейса будет сохранять равное расстояние до указанных точек в рабочем пространстве.

Для того, чтобы увидеть различные варианты установки анкоров, необходимо выбрать в иерархии пункт «Заголовок» и выбрать небольшой прямоугольник над полем «анкоры» используя вкладку «Rect Transform component».

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

Треугольники для обозначения области перемещения должны чем-то напоминать цветок. Посмотрите, как выглядит настроенное изображение при помощи анкоров:

Ручная настройка анкоров

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

Посмотрите, как меняется расположение изображения в зависимости от перемещения анкоров.

Разделение анкоров

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

Справка: Фактически вы не можете изменить размер холста подобным образом. Этот инструмент служит для адаптации элементов к размеру экрана.

Изменение параметров в зависимости от текущей настройки анкоров

В зависимости от значений анкоров, Rect Transform предоставляет различные способы управления размером и положением редактируемого элемента пользовательского интерфейса. Если вы установите привязки в одну точку без изменений, то увидите свойства X и Y, а также высоты и ширины. На скриншоте анкоры заголовка настроены на среднюю растяжку. Это означает, что изображение остается в центре холста вертикально и растягивается горизонтально.

Свойство Pivot

Последнее свойство, которое нужно обсудить в компоненте Rect Transform, — это Pivot. По сути это точка, вокруг которой происходят все изменения. Другими словами, если вы измените положение элемента пользовательского интерфейса, вы также измените положение точки Pivot. Если вы вращаете свой элемент пользовательского интерфейса, он также будет вращаться вокруг этой точки. Pivot использует нормализованные координаты. Это означает, что он имеет значение от 0 до 1 для высоты и ширины, где (0, 0) — нижний левый угол, а (1, 1) — верхний правый угол.

Примечание: Вы также можете установить Pivot вне границ элемента пользовательского интерфейса. В этом случае Pivot будет вне диапазона (0, 0) — (1, 1). Это можно использовать, например, для вращения объекта вокруг какой-то точки сцены.

Вы также можете изменить свойства компонента Rect Transform в инспекторе или использовать Rect Tool.

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

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

Внимание: Важно понимать, что положение элемента пользовательского интерфейса устанавливается в зависимости от анкоров. Положение (0, 0) означает расстояние от анкоров, которые установлены в верхнем левом углу сцены.

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

В этой анимации наглядно показано как Pivot влияет на размер и вращение объекта:

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

Примечание: существует небольшая хитрость — удерживайте нажатой клавишу клавиатуры «ALT» во время изменения размера объекта для более удобного масштабирования вокруг поворотной точки.

Таким образом получается, что опорная точка также влияет на изменение размера элемента пользовательского интерфейса.

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

Размещение изображения заголовка

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

Прежде чем продолжить, включите фон, чтобы увидеть границы рабочей области. В иерархии вам нужно выбрать пункт «Заголовок» и настроить его свойства в инспекторе следующим образом:

  1. Нажмите «Set Native Size», чтобы вернуть размер по умолчанию;

  2. Установите анкор в верхний угол;

  3. Установите координаты X=0 и Y=-100.

У вас должно получится что-то вроде этого:

Обратите внимание, что после внесенных изменений часть изображения пола оказалась обрезанной. Чтобы это исправить необходимо использовать функции Aspect Ratio Fitter.

  1. Отключите инструменты редактора изображения;

  2. Установите координаты Pivot X=0,5 и Y=0;

  3. Снова включите возможность настройки соотношения сторон изображения.

Теперь проблемы с полом полностью решена и изображение фона может быть использовано на всех устройствах без потери качества.

Добавление кнопки «Старт»

Теперь, когда ваша игра имеет красивый фон с надписью, пришло время добавить несколько кнопок. Для этого в верхней панели выберите GameObject ⇒ UI ⇒ Button, чтобы добавить на сцену новую кнопку. В иерархии этот объект также должен иметь дополнительный элемент Text.

Обратите внимание, что в инспекторе кнопка также имеет компонент Image, который вы ранее использовали для добавления фона и оформления заголовка.

Примечание: Элемент «Текст» является необязательным, поэтому, если у вас есть изображение кнопки с текстом, нарисованным прямо на изображении, вы можете использовать его.

Настройка расположения кнопки

Теперь вам нужно в иерархии выбрать «Button» и изменить название на «StartButton». Далее установите анкоры в нижнее растяжение, потому что нам необходимо сделать так, чтобы кнопка растягивалась по горизонтали при изменении размера экрана. Теперь установите координаты X на (Мин: 0,2, Макс: 0,8), а левый и правый отступ на значение 123. Высота должна быть равной 80, координата Y=300, а Pivot (X: 0,5, Y: 0).

Далее вам необходимо выбрать вложенный текстовый документ и набрать текст «Начать игру». Чтобы увеличить размер кнопки, установите шрифт на 32.

Вот таким образом должна сейчас выглядеть сцена:

9-фрагментное масштабирование

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

Подготовка изображений для кнопок

Прежде чем вы сможете использовать изображение, вам нужно установить параметры для девяти зон. Для этого вам нужно открыть папку «Меню» в окне «Проект» и выбрать изображение «btn_9slice_normal». В настройках импорта инспектора установите для параметра «Тип текстуры» значение «Спрайт» (2D и пользовательский интерфейс) и нажмите «применить изменения». Затем нажмите кнопку «Редактор Sprite», чтобы открылось новое меню.

В редакторе установите значения границ для L=14, R=14, B=16, T=16. Обязательно сохраните изменения, нажав кнопку «применить».

Вам нужно выполнить эти же действия для изображений «btn_9slice_highlighted» и «btn_9slice_pressed», которые вы в дальнейшем вы будете использовать для разных состояний кнопок.

Настройка изображений для кнопок

После того, как вы подготовили все изображения, переместите их в соответствующие поля в инспекторе. Далее вам необходимо выбрать в иерархии «StartButton» и выполнить следующие действия:

  1. В свойствах изображения измените его значение на «Sliced»;

  2. Также измените свойства Transition в компоненте Button на SpriteSwap;

  3. Переместите изображение «btn_9slice_normal» в исходное изображение в свойствах Image;

  4. Переместите изображение «btn_9slice_highlighted» в область выделенного спрайта в свойствах Button;

  5. Переместите изображение «btn_9slice_pressed» Pressed Sprite в свойствах

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

Перед тем как запустить воспроизведение сцены и насладиться результатом своих трудов, необходимо изменить шрифт, сделав вашу кнопку еще красивее.

Установка и использование для кнопки пользовательского шрифта

Использовать собственный шрифт легко. Помните папку Fonts в наборе, который вы скачали и добавили в проект в начале урока? Теперь пришло время использовать один из этих шрифтов. Для этого вам нужно выбрать элемент Text, вложенный в StartButton в иерархии и открыв папку «Шрифты» в окне «Проект» перетащить шрифт «TitanOne-Regular» в соответствующее поле, установив его цвет как белый.

Теперь вы можете наконец запустить воспроизведение сцены, чтобы увидеть, что получилось.

Добавление кнопки «Настройки»

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

  • Название кнопки – Настройки;

  • Параметры Rect: левый и правый отступ – 400, высота – 70, координаты У=180;

  • Размер шрифта: 24;

Примечание: Самый простой способ создать новую кнопку — просто дублировать старую изменив лишь некоторые значения.

Вот что должно у вас получиться на данном этапе:

Начало игры

Теперь вам необходимо попробовать нажать кнопку «Старт» и запустить воспроизведение сцены непосредственно в самой игре.

Добавление новых сцен для построения

Прежде чем вы сможете запускать воспроизведение различных игровых сцен, вам нужно добавить их в список «Сцены» в настройках вашего проекта.

Для этого в меню выберите «Файл» ⇒ «Настройки», после чего откроется диалоговое окно «Настройки сборки». Затем откройте папку «Сцены» в вашем проекте. Сначала перетащите «MenuScene», а затем сцену «RocketMouse» в появившийся список «Сцены в сборке».

Создание UIManager

Вам нужно выбрать в верхней панели редактора GameObject ⇒ Create Empty и затем в иерархии переименовать «GameObject» в «UIManager». Теперь создайте папку Scripts внутри RW, а затем создайте в ней новый скрипт C# с именем «UIManager». Вы должны увидеть новые компоненты в иерархии и в инспекторе вашего редактора.

Для того, чтобы открылся скрипт в MonoDevelop, необходимо дважды кликнуть мышью по UIManagerScript в Инспекторе. В скрипте нужно убрать Start () и Update (). Теперь вам необходимо прописать значение:

using UnityEngine.SceneManagement;

Это позволяет вам в дальнейшем загружать другие сцены. Теперь добавьте следующее значение:

public void StartGame()
{
SceneManager.LoadScene("RocketMouse");
}

Сохраните скрипт и приступайте к следующему шагу.

Запуск игры при нажатии кнопки «Старт»

Чтобы завершить данный этап обучения, в иерархии выберите «StartButton» и в списке найдите On Click. Теперь нажмите кнопку «+» для того, чтобы добавить новый элемент. Перетащите «UIManager» из иерархии во вновь добавленный элемент в списке. Теперь вам нужно выбрать новую функцию для этого элемента. В появившемся меню вам необходимо выбрать UIManagerScript ⇒ StartGame.

Сохраните сцену и затем нажмите кнопку «Play», чтобы запустить игру. Чтобы запустить игровую сцену, нажмите кнопку «Старт».

Что делать дальше?

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

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

Далее вы узнаете, как анимировать элементы пользовательского интерфейса, создавать диалоги, а также как использовать элементы управления, такие как Slider и Toggle.

PreviousUX UI разработкаNextЧасть 2

Last updated