GUI в Unity3d

Этот урок даст всем желающим основное понимание того, как будет работать GUI в Unity на примере создания простого меню. Это очень простой урок, не требующий специальных навыков, кроме начального знания Unity Java Script (или, в целом, вообще какого-либо скрипта). Приступим же.

Начнём с создания новой сцены с игрой. Эта сцена будет названа нами «Level_1». Сцену для меню мы назовём «Menu». В дальнейшем, перемещение между этими сценами будет возможно с помощью команды.
Application.LoadLevel (Номер сцены);
Однако, к этой команде мы вернёмся позже. В данный момент нас больше должно интересовать «Номер сцены». Проставить и посмотреть номер сцены возможно с помощью окна Build Settings (File 

Application.LoadLevel (Номер сцены);

К команде мы вернёмся чуть позже. Сейчас нас больше интересует "Номер сцены". Как его поставить? Где его посмотреть?
Поставить и посмотреть номер можно в окошке Build settings (File/Build settings...):
/img/origs/647.jpg" alt="Фото" />
Номер обведён красным.
Для того, чтобы добавить сцену, необходимо нажать на Add Current (обведено зелёным). В какой сцене вы находитесь, такая сцена и добавится. При запуске игры, запускается сцена "0", то есть "Menu".

Сцена создана. Теперь создадим скрипт, например "menu.js" и повесим его на камеру. Далее будем работать практически только с этим скриптом. Подготовка завершена.

Практически самый простой GUI объект - Окно. Давайте рассмотрим комманду в скрипте по подробнее. 

GUI.Box (Rect (A, B, C, D), "Текст");

A - количество пикселей от левого края экрана к левому краю окна.
B - количество пикселей от верхнего края экрана к верхнему краю окна.
C - ширина окна.
D - высота окна.
А далее следует название окна. Эта надпись будет висеть сверху окна.
Давайте создадим наше первое окно: 

function OnGUI () { 
GUI.Box (Rect (5,5,200,200), "Текст"); 
}

Номер обведён красным цветом.
Если Вы хотите добавить сцену, то Вам необходимо будет нажать на кнопку AddCurrent, которая обведена зелёным. Добавится та самая сцена, в которой на данный момент Вы находитесь. При запуске игровой программы, будет запущена сцена «0», значит «Menu».
Теперь сцена создана. Далее следует создать скрипт, назовём его «menu.js» и повесить его на камеру. Дальнейшая работа пойдёт в основном с этим скриптом. Необходимая подготовка завершена.
Самый простой GUI объект – это Окно. Команда в скрипте выглядит так:
GUI.Box (Rect (A, B, C, D), "Текст");
, где А – это количество пикселей от левого края экрана к левому краю окна,
В – то же, от правого края экрана к верхнему краю окна,
С – это ширина окна,
D – это высота окна,
Далее следует название окна. Надпись будет располагаться сверху Вашего окна.
Теперь давайте создадим первое окно, в сцене оно будет выглядеть таким образом:
Фото
Для того, чтобы присоединить его к другим углам экрана, либо поместить в центр, существуют следующие команды:

Screen.width 
Screen.height

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

function OnGUI () { 
GUI.Box (Rect (5,5,50,50), "1"); //верхний левый угол 
GUI.Box (Rect (Screen.width - 55,5,50,50), "2"); // верхний правй угол 
GUI.Box (Rect (5,Screen.height - 55,50,50), "3"); // нижний левый угол 
GUI.Box (Rect (Screen.width - 55,Screen.height - 55,50,50), "4"); // нижний правый угол 
GUI.Box (Rect (Screen.width/2 - 25,Screen.height/2 - 25,50,50), "5"); // центр 
}

Фото
В зависимости от разрешения экрана теперь можно увеличивать и уменьшать окна.

По мнению многих пользователей Unity самый используемый GUI объект – это кнопка. Написать скрипт для кнопки очень просто. 

if (тут) { 
}

Сейчас будет создана кнопка, которая сможет отправить нас в сцену с игрой:

function OnGUI () { 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Главное меню"); // окно 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 80,180,30), "Играть")) { // наша кнопка 
         Application.LoadLevel (1); // загружаем уровень Level_1 
         } 
}

При нажатии на кнопку «Играть», будет загружена первая цена (Level_1).
Также стоит создать ещё пару функциональных кнопок и кнопку «выход».

function OnGUI () { 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Главное меню"); 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 80,180,30), "Играть")) { 
         Application.LoadLevel (1); 
         } 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 40,180,30), "Настройки")) { 
         } 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 0,180,30), "Помощь")) { 
         } 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Выход")) { 
         Application.Quit(); // выход 
         } 
}

Фото
Команда "Application.Quit();" она не будет работать в редакторе.
Также стоит настроить дополнительные окна для производства настроек и помощи. Для их создания будем использовать переменную, к примеру «window».
Добавляем ещё пару окон.

var window = 0; 

function OnGUI () { 
if (window == 0) { // теперь главное меню активировано  при window = 0 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Главное меню"); 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 80,180,30), "Играть")) { 
         Application.LoadLevel (1); 
         } 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 40,180,30), "Настройки")) { 
            window = 1; // активируем окно "настройки" 
         } 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 0,180,30), "Помощь")) { 
            window = 2; //активируем окно "помощь" 
         } 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Выход")) { 
         Application.Quit(); 
         } 
} 
if (window == 1) {  // наши настройки 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад")) { 
         window = 0; 
         } 
} 
if (window == 2) { // наша помощь 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Помощь"); 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад")) { 
         window = 0; 
         } 
} 
}

Подключаем клавиатурные кнопки к управлению:

if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) {      
         window = 0; 
         }

Большую важность в создании меню имеет текст. Можно сказать, что скрипт текста совсем не отличается от скрипта окна. Раздел «Помощь» требует наполнения:

if (window == 2) { 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Помощь"); 
GUI.Label (Rect (Screen.width/2 - 100,Screen.height/2 - 80,200,140), "Здесь должна быть помощь "); // текст 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { 
     window = 0; 
     } 
}

Теперь в разделе «Помощь» есть текст.
Также к этому тексту Вы можете применить стиль. Для этого его нужно создать. 

var style : GUIStyle;

В так называемом инпесторе камеры появится следующее:
Фото

Красным подчёркнуты часто используемые опции:
1 - Цвет текста.
2 - Шрифт.
3 - Якорь.
4 - Размер.
5 - Жирный, Курсив, Жирный курсив.

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

GUI.Label (Rect (Screen.width/2 - 100,Screen.height/2 - 80,200,140), "Здесь должна быть помощь ", style);

Tумблер будет очень похож на кнопку, но в отличие может находиться в двух положениях (включён, либо выключен). Пишется он так: 

var toggle : boolean = false; 
toggle = GUI.Toggle (Rect (20, 20, 100, 20), toggle, "Тумблер");

Тумблер применяется для переменных типа boolean, которые могут находиться только в двух значениях true и false.

Добавляем в раздел «Настройки» дополнительное окно:

if (window == 1) { 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); 
toggle = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 80, 20), toggle, "Тумблер"); // наш тумблер 
if (toggle == true) { 
GUI.Box (Rect (Screen.width/2 - 130,Screen.height/2 - 100,20,20), ""); // левое окошко 
GUI.Box (Rect (Screen.width/2 + 130,Screen.height/2 - 100,20,20), ""); // правое окошко 
} 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { 
  window = 0; 
  } 
}

Если включить тумблер, то рядом с основным окном появятся два дополнительных.
Фото

Также стоит познакомиться с такой полезной функцией, как ползунок. При помощи ползунка Вы сможете изменить громкость и т.д. По написанию, ползунок практически не отличается от тумблера, только используется другой переменной: float, int. 

var sider : int = 0; 
sider = GUI.HorizontalSlider (Rect (25, 25, 100, 30), sider, A, B);

где A - число обозначающее значение переменной, когда ползунок находится слева.
B - число обозначающее значение переменной, когда ползунок находится справа.
Модернизируем предыдущий скрипт с помощью ползунка: 

if (window == 1) { 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); 
toggle = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 180, 20), toggle, "Тумблер"); 
if (toggle == true) { 
sider = GUI.HorizontalSlider (Rect (Screen.width/2 - 90,Screen.height/2 - 40, 180, 20), sider, 0, 160); //ползунок 
GUI.Box (Rect (Screen.width/2 - 130,Screen.height/2 - 100,20,20 + sider), ""); 
GUI.Box (Rect (Screen.width/2 + 110,Screen.height/2 - 100,20,20 + sider), ""); 
} 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { 
  window = 0; 
  } 
}

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

if (window == 1) { 
GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); 
toggle = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 180, 20), toggle, "Тумблер"); 
if (toggle == true) { 
sider = GUI.HorizontalSlider (Rect (Screen.width/2 - 90,Screen.height/2 - 40, 180, 20), sider, 0, 160); //горизонтальный 
sider1 = GUI.VerticalSlider (Rect (Screen.width/2 - 90,Screen.height/2 - 20, 20, 50), sider1, 0, 160);  //вертикальный 
GUI.Box (Rect (Screen.width/2 - 130 - sider,Screen.height/2 - 100,20 + sider,20 + sider1), ""); 
GUI.Box (Rect (Screen.width/2 + 110,Screen.height/2 - 100,20 + sider,20 + sider1), ""); 
} 
if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { 
  window = 0; 
  } 
}

Стоит не забыть добавить все необходимые переменные? 

var toggle = false; //тумблер 
var sider : int = 0; // горизонтальный ползунок 
var sider1 : int = 0; // вертикальный ползунок

Разрешение экрана
Разрешение экрана меняется при помощи команды: 

Screen.SetResolution (A, B, C);

Где A - ширина.
B - высота.
С - полноэкранный или оконный.
Пример: 

Screen.SetResolution (1280, 1024, true);

Громкость звука
Для изменения громкости применяется команда: 

audio.volume = переменная (желательно float);

Сама переменная изменяется при помощи ползунка.