Графический интерфейс пользователя в Unity3D

Сколько «жизней» осталось у главного героя? Какой уровень здоровья у Лерпза? Пришло время для GUI.

Интерфейс пользователя

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

Программный редактор Unity 2 вводит новую систему графического интерфейса пользователя, чтобы облегчить создание таких GUI-элементов для игр, и это система, которую вы будете использовать для «Побега Лерпза».

Раньше, вы бы указывали Unity прорисовать кнопку и программная среда Unity вызвала соответствующие сообщения для скрипта, когда пользователь навел курсор на кнопку, нажал на кнопку, отпустил кнопку и т.д.

Старая система была основана на традиционной событийно-ориентированной модели GUI, но Unity 2 представляет совершенно новую GUI-систему, известную как GUI-система, работающая в режиме настоящего времени. Если вы привыкли к традиционной GUI-системе, то новый принцип может немного озадачить.

Вот пример:

var scrollSpeed = 0.25;

function OnGUI()
{
  If (GUI.Button (Rect(50, 50, 100, 20), "Start Game") )
    Application.LoadLevel("FirstLevel"); // load the level.
}

Функция OnGUI() вызывается по меньшей мере два раза с каждым игровым циклом. При первом вызове Unity создает GUI и рисует его. В этом случае, мы получаем простую кнопку, нарисованную в координатах, указанных при помощи настройки «Game Start», отображенную внутри.

Второй вызов происходит когда обрабатывается ввод пользователя. Если пользователь нажимает на кнопку, то условие if (...), в котором находится функция прорисовки кнопки возвращает true , следовательно будет вызвана функция Application.LoadLevel().

Другие GUI-элементы — Labels, Groups, Check-boxes, и т.д. — все работают точно также, с функциями, возвращающими true / false , или ввод пользователя соответственно.

Очевидное преимущество здесь в том, что вам не нужны бесчисленные обработчики событий для GUI. Они все содержатся в одной функции OnGUI().

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

Дополнительную информацию о новой GUI-системе Unity вы можете найти на официальном сайте httpssss://unity3d.com/ .

Игровой HUD

Нашей игре нужен свой игровой GUI для отображения здоровья игрока, оставшихся «жизней» и количества горючих элементов, которые нужно собрать. Графические элементы уже включены в наш файл проекта.

Графический интерфейс обрабатывается в скрипте GameHUD, который использует новый компонент GUI для размещения различных элементов. Этот скрипт должен быть прикреплен к игровому объекту Level, который используется для поддержки некоторых элементов сцены. (Мы могли бы также просто добавить его к объекту NearCamera или к его собственному игровому объекту «GUI» ; это, в основном, дело вкуса, а не ключевое дизайнерское решение.)

• Создайте пустой игровой объект.
• Назовите объект Level.

Мы будем использовать игровой объект Level для управления определенными состояниями уровня и другими скриптами.

Объект GUI Skin

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

Поскольку наш игровой графический интерфейс будет основываться исключительно на круглых графических изображениях, то мы создадим игровой HUD полностью при помощи функции GUI.Label(). Тем не менее, нам нужно использовать специальный шрифт для нашего HUD, чтобы отображать оставшиеся топливные баки и «жизни».

Игровой ресурс GUISkin определяет «внешность» графического интерфейса Unity, также как файл CSS определяет вид веб-сайта. Объект необходим, если вам нужно изменить какое-либо свойство, заданное по умолчанию. Если мы меняем шрифт, то нам нужно включить GUISkin в нашу сцену.

• Используйте команду меню Assets , чтобы создать новый объект GUI Skin. Объект отобразится в панели Project и будет содержать данные GUI skin , заданные по умолчанию.
• Переименуйте новый объект GUI Skin на LerpzTutorialSkin.

Теперь мы воспользуемся декоративным шрифтом для нашей игры, который называется «Flouride». Это единственное изменение, которое мы проделываем со скином, определенным по умолчанию.

• Перетащите объект шрифта Flouride на параметр «Font» нашего нового ресурса GUI Skin.

Объект GUI Skin не добавляется на панель Hierarchy, вместо этого мы ссылаемся на GUI Skin напрямую в скрипте GameHUD. Вместе с GUI Skin, скрипту GameHUD также должно быть указано, какие ресурсы использовать для построения дисплея GUI. К ним относится ресурс GUIHealthRing.

Это изображение используется для отображения информации о здоровье Лерпза. Пространство справа от изображения Лерпза отображает его оставшиеся «жизни», в то время как окружность слева используется для показа круговой диаграммы его оставшегося здоровья. Круговая диаграмма создается простым наложением соответствующего изображения из массива шести двумерных текстур, с именами от healthPie1 до healthPie6. Изображение healthPie5 показано ниже:

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

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

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

• Добавьте скрипт GameHUD игровому объекту Level.
• Щелкните по игровому объекту Level, чтобы выбрать его и взгляните в окно Inspector. Вы должны будете увидеть запись компонента Game HUD (скрипт).
• Добавьте изображения GUIHealthRing и GUIFuelCell к скрипту GameHUD.
• Раскройте запись Health Pie Images.

Health Pie Images — это массив. Сейчас программная среда Unity не знает каким большим он будет, поэтому массив установлен на ноль. У нас есть шесть изображений пирога для того, чтобы забросить их в этот массив, поэтому нам необходимо изменить это значение.

• Щелкните мышью на «0» рядом с Size. Измените на «6». Теперь вы должны увидеть шесть пустых элементов с именами от Element 0 до Element 5.
• Откройте папку ресурсов GUI в окне Project, чтобы раскрыть избражения пирога. Их шесть, они пронумерованы от 1 до 6.
• Компьютер считает от нуля, поэтому healthPie1 должен перейти в Element 0. healthPie2 должен перейти в Element 1… и так далее. Перетащите изображения в их соответствующие ячейки.
• И наконец, добавьте объект GUI-скин LerpzTutorialSkin в пустую ячейку Gui Skin. Настройки теперь будут выглядеть так:

Если вы запустите игру теперь, то должны будете увидеть графический интерфейс (HUD), находящийся поверх игровой области:

GUI.matrix = Matrix4x4.TRS (Vector3.zero, Quaternion.identity, Vector3
(Screen.width / 1920.0, Screen.height / 1200.0, 1));

Меню Start

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

Для меню Start нам понадобится:

• Две текстовые кнопки графического интерфейса: «Play» и «Quit».
• Название игры. Оно будет отображаться при помощи пользовательского шрифта.
• Какая-нибудь подходящая музыка.
• Какой-нибудь задний фон.

Настройка сцены

Первый шаг — создать новую пустую сцену.

• Введем с клавиатуры CMD+N для Mac или Ctrl+N для PC, чтобы создать одну сцену, затем нажимаем CMD+S для Mac или Ctrl+S для PC, чтобы сохранить сцену.
• Назовем сцену StartMenu. Unity автоматически добавит камеру для сцены, но через камеру не на что посмотреть на данный момент.

Теперь мы воспользуемся новой GUI-системой чтобы создать меню:

• Направляемся в окно Project и создаем пустой файл JavaScript.
• Переименуем его в StartMenuGUI и откроем его в редакторе.

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

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

// Заставить выполнить скрипт также в режиме редактирования
@script ExecuteInEditMode()

Нам нужна ссылка на ресурс LerpzTutorialSkin, поэтому первая строка кода будет такой:

var gSkin : GUISkin;

Нам понадобится объект Texture2D для заднего фона. (Мы поместим изображение заднего фона на него в инспекторе.)

var backdrop : Texture2D; // изображение заднего фона идет сюда

Мы также хотим отобразить сообщение «Loading…» , когда игрок нажимает на кнопку «Play» , поэтому нам понадобится флаг для управления этим:

private var isLoading = false; // если true, то отобразится сообщение "Loading..." .

И наконец, мы переходим к самой функции OnGUI:

function OnGUI()
{
if (gSkin)
GUI.skin = gSkin;
else
Debug.Log("StartMenuGUI: GUI Skin object missing!");

Код выше проверяет есть ли ссылка на верный объект GUI Skin. Функция Debug.Log() выдает сообщение об ошибке, если нет. (Хорошая привычка проверять все внешние ссылки или данные таким образом, так как это делает процесс отладки намного проще.)

Задний фон

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

var backgroundStyle : GUIStyle = new GUIStyle();
backgroundStyle.normal.background = backdrop;
GUI.Label ( Rect( (Screen.width - (Screen.height * 2)) * 0.75, 0, Screen.height * 2,
Screen.height), "", backgroundStyle);

Сначала мы определяем новый объект GUIStyle, который будем использовать, чтобы переопределить стиль GUI Skin заданный по умолчанию. В данном примере, мы просто изменяем элемент стиля «normal.background» для того, чтобы использовать изображение заднего фона.

Функция GUI.Labal() принимает объект Rect. Размеры этого прямоугольника являются производными размеров экрана, так что изображение всегда заполняет экран. Соотношение сторон изображения также учитывается, так что изображение обрезается и/или масштабируется для подгонки без добавления искажений.

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

Наше меню использует шрифт по умолчанию, определенный в ресурсе LerpzTutorialSkin. На данный момент стиль, заданный по умолчанию для отображения текста, не подходит для большого названия игры, поэтому мы добавим новый пользовательский стиль GUI для объекта skin, названного mainMenuTitle:

• Направляемся в окно Project и нажимаем на LerpzTutorialSkin , чтобы отобразить его детали в инспекторе.

Теперь мы добавим пользовательский стиль для объекта GUI Skin:

• Раскроем элемент «Custom Styles» и убеждаемся в том, что параметр «Size» установлен на «1». Вы должны будете увидеть строку «Element 0».
• Откройте «Element 0» и установите его элементы, как показано выше. В частности: установите Text Color на оранжево-коричневый, как показано на рисунке. (Не волнуйтесь об элементах, не отображенных на скриншоте: они могут быть оставлены как есть.)

И наконец, теперь мы можем добавить оставшийся код скрипту:

GUI.Label ( Rect( (Screen.width/2)-197, 50, 400, 100), "Lerpz Escapes","mainMenuTitle");

Кнопки

Теперь нам нужно отредактировать свойства настройки GUI Button объекта LerpzTutorialSkin, чтобы создать более интересную кнопку.

Мы используем такой же объект GUI Skin для данного меню и для всплывающего дисплея, или «HUD». Для «HUD» нужно изменить только шрифт, заданный по умолчанию. Тем не менее, для кнопок главного меню нам также нужно, чтобы было графическое изображение позади текста кнопки. Дизайн кнопки по умолчанию не подходит визуальному стилю игры, поэтому нам нужно изменить его.

Нажмите на ресурс LerpzTutorialSkin в окне Project, чтобы раскрыть его детали в окне Inspector. Измените его на настройки, показанные ниже — проигнорируйте другие типы GUI-элементов; мы не будем использовать их:

Теперь давайте добавим кнопку «Play» :

if (GUI.Button( Rect( (Screen.width/2)-70, Screen.height - 160, 140, 70), "Play"))
{
isLoading = true;
Application.LoadLevel("TheGame"); // загрузить игровой уровень.
}

Выше, все, что нужно сделать, это перерисовать и обработать кнопку «Play» . Код для отрисовки и для события обработки находится в том же месте, что делает обслуживание кода легче. Функция GUI.Button() принимает объект Rect для того, чтобы определить положение кнопки и размер, а затем следует текстовая надпись кнопки. Если пользователь нажимает на кнопку, то функция кнопки возвращает true, поэтому мы можем загрузить игровой уровень.

Мы установили параметр isLoading так, чтобы знать, что отображается текст «Loading…» , а затем указываем программной среде Unity загрузить игровой уровень.

Кнопка «Quit» обрабатывается точно также, но с проверкой работает ли приложение автономно или было запущено в редакторе Unity.

// Мы только отображаем кнопку Quit если приложение работает автономно или в редакторе
var isWebPlayer = (Application.platform == RuntimePlatform.OSXWebPlayer || 
Application.platform == RuntimePlatform.WindowsWebPlayer);
if (!isWebPlayer)
{
if (GUI.Button( Rect( (Screen.width/2)-70, Screen.height - 80, 140, 70), "Quit"))
Application.Quit(); // выйти на рабочий стол, но ничего не происходит если в редакторе Unity!  
}

Как видите, все точно также как и с кнопкой «Play». Мы просто рисуем кнопку немного ниже и проверяем нужно ли рисовать ее первой.

Далее идет текст «Loading…», который нужно отображать, когда пользователь нажимает на кнопку «Play». Потому что может потребоваться несколько минут для загрузки игровой сцены, особенно если приложение загружается через интернет через веб-плеер.

Вот где используется isLoading:

if (isLoading)
GUI.Label ( Rect( (Screen.width/2)-110, (Screen.height / 2) - 60, 400, 70), 
"Loading...", "mainMenuTitle"); 
}

И опять мы используем пользовательский стиль графического интерфейса «mainMenuTitle» так, чтобы стиль текста совпадал с названием.

Как только сцена StartMenu загружена, она вызывает функцию выше автоматически и устанавливает isStandalone соответствующим образом. Если опция установлена со значением true, то кнопка «Quit» будет отображаться, иначе не будет отображаться.

Последние штрихи — это добавление некоторой музыки.

• Перейдите в панель Project, откройте папку Sounds и перетащите аудио-файл StartMenu на объект Main Camera в панели Hierarchy. Произойдет добавление компонента Audio Clip.
• Теперь нажмите на объект Main Camera и в окне инспектора найдите новый компонент Audio Clip. Отметьте пункт Play On Awake and Loop.

Если вы теперь запустите сцену, то должны будете увидеть что-то вроде этого в окне Game View, сопровождающееся короткой, повторяющейся мелодией. Так и есть! Сцена Start Menu готова.

Для ваших собственных проектов вы скорее всего захотите добавить меню опций, возможно меню рейтингов игроков, многопользовательское меню и т.д. Все это можно создать при помощи Unity 2 GUI.

Экран «Game Over»

Экран «Game Over» появляется, когда игрок выигрывает или проигрывает. В отличие от «Start Menu» в этой сцене нет кнопок или другой визуальной интерактивности: просто отображается сообщение «Game Over» над задним фоном во время воспроизведения короткой мелодии. Как только мелодия заканчивается или пользователь нажимает кнопку мыши, то автоматически загружается сцена «Start Menu».

• Во-первых, создайте новую сцену с именем «GameOver».
• Перетащите аудио-файл GameOverJingle на объект Main Camera и установите следующие настройки:

Не нужно добавлять что-то еще на сцену при помощи редактора: камеры используемой по умолчанию будет достаточно.

Следующий шаг — создание скрипта:

• Создайте новый скрипт JavaScript и назовите его «GameOverGUI».
• Откройте его в редакторе и добавьте код, указанный ниже:

Как и в случае с «Start Menu», нам нужно иметь возможность видеть GUI в редакторе Unity даже когда проект не работает, так что добавьте это:

@script ExecuteInEditMode()

Для сцены «Start Menu» мы использовали ресурс LerpzTutorialSkin GUI Skin. GUI Skin определяет большое количество стилей GUI и позволяет применять их ко всем объектам GUI.

Альтернативный метод — определить индивидуальные объекты стилей GUI напрямую. Мы сделаем так для скрипта «Game Over» определив три переменные для GUIStyle, которые мы можем затем установить в инспекторе, вместе с двумя переменными, определяющими масштабирование текстовых элементов:

var background : GUIStyle;
var gameOverText : GUIStyle;
var gameOverShadow : GUIStyle

Мы настроим эти объекты GUI Style в инспекторе в ближайшее время.

Далее необходимо определить параметр масштабирования текста для сообщения «GameOver» так как будет отображаться большего размера, чем размер шрифта по умолчанию.

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

var gameOverScale = 1.5;
var gameOverShadowScale = 1.5;

В итоге получаем функцию OnGUI():

function OnGUI()
{

Во-первых, масштаб заднего фона был изменен точно также как это было сделано в «Start Menu»:

GUI.Label ( Rect( (Screen.width - (Screen.height * 2)) * 0.75, 0, Screen.height * 2, 
Screen.height), "", background);

Следующая задача — нарисовать затененную версию сообщения «Game Over». Необходимо увеличить масштаб текста и отобразить его в центре экрана. К счастью, мы можем использовать встроенную матрицу преобразования системы GUI для управления масштабированием.

Чтобы убедиться в том, что текст появляется с темным цветом, нужно передать параметр стиля графического интерфейса gameOverShadow в функцию GUI.Label.

GUI.matrix = Matrix4x4.TRS(Vector3(0, 0, 0), Quaternion.identity, Vector3.one * gameOverShadowScale);
GUI.Label ( Rect( (Screen.width / (2 * gameOverShadowScale)) - 150, 
(Screen.height / (2 * gameOverShadowScale)) - 40, 300, 100), "Game Over", gameOverShadow)

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

GUI.matrix = Matrix4x4.TRS(Vector3(0, 0, 0), Quaternion.identity, Vector3.one * 
gameOverScale);
GUI.Label ( Rect( (Screen.width / (2 * gameOverScale)) - 150, (Screen.height / (2 * 
gameOverScale)) - 40, 300, 100), "Game Over", gameOverText);
}

• Сохраните скрипт и переместите его на объект «Main Camera».
• Нажмите на объект «Main Camera» чтобы открыть его в инспекторе. Теперь установите переменные…
• Сначала настроим стиль заднего фона GUI. Для этого нужно переместить изображение GameOverSplashScreen в слот Normal->Background, как показано ниже:

• Далее, установим текст «Game Over» для стиля GUI, как показано на следующем изображении (как обычно, оставьте все другие настройки, как они есть).

• Далее, установите параметр «Game Over Scale» на 1.69.
• Теперь настройки для параметра «Game Over Shadow GUI»

• Наконец, установите параметр «Game Over Shadow Scale» на 1.61.

Теперь вы должны увидеть GUI в окне Game View, как показано ниже:

Последний штрих — добавьте второй скрипт объекту «Main Camera», который проверяет закончила ли воспроизводиться музыка, и если да, то загружаем сцену «Start Menu».

• Создайте новый ресурс Javascript Script. Назовите его «GameOverScript».
• Откройте скрипт в Unitron и добавьте следующий код:

function Update () 
{
if (!audio.isPlaying || Input.anyKeyDown)
Application.LoadLevel("StartMenu");
}

Этот код проверяет завершилось ли воспроизведение аудио-файла, нажал ли игрок на ключ перед загрузкой сцены «StartMenu». И вот готово: GUI сделан!