Unity3D: Создание трехмерной игры-платформера: GUI (графический интерфейс пользователя)

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


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

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

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

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

Примечание Старая система будет сохранена для обеспечения обратной совместимости, но будет считаться устаревшей и будет удалена в будущей версии Unity.

Раньше, вы бы указывали 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.
alt
GUI Skin, настройка шрифта

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

alt
Изображение GUIHealthRing
Примечание Вы, скорее всего, заметили количество предупреждений от программной среды Unity о том, что изображения не «в степени двойки» по размеру. Многие графические карты предпочитают, чтобы изображения были по размеру в степени двойки, независимо от того, какой фактический размер данных изображения используется, поскольку это делает основные расчеты намного быстрыми при выполнении. Графическому интерфейсу редко нужен такой уровень оптимизации и ресурсы, которые мы используем, таким образом, не оптимизированы. Если вы хотите выяснить находятся ли размеры изображения в степени двойки, то просто откройте изображение в окне Inspector, который подскажет, нуждается ли изображение в такой оптимизации.

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

alt
Изображение healthPie5
Примечание Эти изображения содержат альфа-каналы для определения прозрачности и полупрозрачности.

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

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

alt
Изображение 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. Настройки теперь будут выглядеть так:
alt
Настройки скрипта GameHUD

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

alt
Игровой интерфейс (HUD)

Независимость от разрешения

Одна проблема с GUI это его размер. Скриншот выше — от 24 дюйма iMac работающего с разрешением 1920 x 1200.

Очевидно, мы должны масштабировать HUD динамически в соответствии с текущим размером экрана и разрешением, так как же мы можем этого сделать?

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

Строка ниже, из скрипта GameHUD, показывает, как:

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

Если вы перейдете в режим Game View, отключите настройку «Maximize on Play» и установите соотношение сторон 4:3, и вы увидите, что графический интерфейс снова будет масштабироваться для подгонки.

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

Меню Start

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

Примечание Заставки, меню и так далее — это просто сцены Unity. Таким образом игровой уровень, как правило, является сценой, но сцена не всегда — игровой уровень. Мы используем скрипты в одной сцене, чтобы загрузить и запустить другие сцены, чтобы связать их вместе.

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

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

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

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

  • Введем с клавиатуры 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:

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

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

GUI.Label ( Rect( (Screen.width/2)-197, 50, 400, 100), "Lerpz Escapes","mainMenuTitle");
Примечание Имена стилей GUI чувствительны к регистру, когда вы пытаетесь получить доступ к ним через скрипт. Ввод с клавиатуры «mainMenuStyle» одно и тоже, что и «mainmenustyle».

Кнопки

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

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

Подсказка Если вы хотите, чтобы ваши GUI-элементы реагировали на события Hover, Focus и Active, то вы должны также изображение заднего фона, даже если если изображение ничего не содержит.

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

alt
Настройки изображений кнопки в объекте LerpzTutorialSkin GUISkin.

Теперь давайте добавим кнопку «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 загрузить игровой уровень.

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

Кнопка «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» так, чтобы стиль текста совпадал с названием.

Кнопка «Quit»

Кнопка выхода из игры будет работать только если вы запускаете игру как отдельное приложение. Если игра происходит через веб-плеер, виджет Dashboard или внутри редактора Unity, то в кнопке «Quit» нет никакого смысла. Из веб-плеера нельзя выйти в принципе, так как он встроен в веб-страницу. Чтобы сделать это нужно закрыть браузер. Вы можете возразить, что закрытие страницы, где работает веб-плеер может быть опцией, но это лучше всего обрабатывается самой веб-страницей. Точно также можно сказать, что опция «Quit» может делать в виджете Dashboard? Закрытие виджета удаляет его из Dashboard.

Таким образом, нужно отключить кнопку «Quit» и остановить ее отображение, если игра не работает автономно. Единственным исключением является то, что если игра работает внутри самого редактора Unity. Потому что нам нужно знать о том, отображается ли кнопка в правильном месте и как себя ведет, что сложно сделать, если ее не видно.

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

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

  • Перейдите в панель Project, откройте папку Sounds и перетащите аудио-файл StartMenu на объект Main Camera в панели Hierarchy. Произойдет добавление компонента Audio Clip.
  • Теперь нажмите на объект Main Camera и в окне инспектора найдите новый компонент Audio Clip. Отметьте пункт Play On Awake and Loop.
Подсказка Музыка была создана при помощи Apple Loops из пакета Apple’s Orchestral Jam, расположенного в Garageband. Это удобный инструмент для создания мелодий-заполнителей; вы можете использовать их, чтобы выбрать какой музыкальный стиль лучше подходит вашей игре.

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

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

Экран «Game Over»

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

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

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

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

  • Создайте новый скрипт 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, как показано ниже:
alt
Подходящие настройки стиля заднего фона GUI.
  • Далее, установим текст «Game Over» для стиля GUI, как показано на следующем изображении (как обычно, оставьте все другие настройки, как они есть).
alt
Подоходящие настройки GUI-стиля текста «Game Over».
  • Далее, установите параметр «Game Over Scale» на 1.69.
  • Теперь настройки для параметра «Game Over Shadow GUI»
alt
Подходящие настройки стиля GUI для параметра «Game Over Shadow».
  • Наконец, установите параметр «Game Over Shadow Scale» на 1.61.

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

alt
Экран «Game Over».

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

  • Создайте новый ресурс Javascript Script. Назовите его «GameOverScript».
  • Откройте скрипт в Unitron и добавьте следующий код:
function Update () 
{
if (!audio.isPlaying || Input.anyKeyDown)
Application.LoadLevel("StartMenu");
}

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

Комментариев: 3 на “Unity3D: Создание трехмерной игры-платформера: GUI (графический интерфейс пользователя)

  1. Аффтар, я так понимаю уроков по AS не будет?!
    Если не будет, то это правильно!
    Продолжай про юнити!

    1. Про AS3 уроки будут, но чуть позже. Следующий урок будет также по «созданию игры-платформера на Unity3D», продолжение, в котором рассказывается про создание соперников в игре и кодирование AI.

Комментировать

Почта не публикуется.Обязательные поля отмечены *