Простое GUI меню. - Форум Игроделов

Дата: Ср, 18 Апр 2012, 17:34 | Сообщение # 1

Unity 3D Free

Сообщений: 836

Награды: 3

Репутация: 211

Статус: Offline

В этом уроке я расскажу, как работает GUI в Unity, и по ходу дела буду создавать простое меню. Этот урок для новичков, но желательно с начальным знанием Unity Java Script, да или вообще какого либо скрипта. Ну что, начнём.

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

Code

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

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

Code

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

В сцене оно выглядит так:

А как примагнитить его к другим углам экрана, или поместить в центр?
Для этого есть следующие комманды:

Code

Screen.width
Screen.height

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

Code

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"); // центр
}

Так же никто не запрещает раздувать и сдувать окна в зависимости от разрешения экрана, всё в ваших руках.

Самый важный (по моему) и чаще всего используемый GUI объект - Кнопка. Без кнопки и не туда, и не сюда. Скрипт практически ничем не отличается от окна, но пишется он тут:

Code

if (тут) {
}

Давайте теперь создадим кнопку, отправляющую нас в сцену с самой игрой:

Code

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
}
}

Теперь при нажатии на кнопку "Играть" загружается сцена 1, то есть Level_1.

Теперь создадим ещё пару кнопок, а так же кнопку "Выход":

Code

Комманда "Application.Quit();" в редакторе не работает.

Для настроек и помощи необходимы дополнительные окна. Для их созданя я использовал переменную, например "window".
Добавим пару окон:

Code

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

Code

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

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

Code

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

Как видно, он применяется для переменных - boolean, способных применять только 2 значения: true, false.

Давайте добавим в настроки что либо... Например... Для примера хватит и дополнительного окна:

Code

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;
}
}

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

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

Code

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

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

Давайте с использованием ползунка модернезируем предыдущий скрипт:

Code

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;
}
}

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

Ползунок может быть как горизонтальный, так и вертикальный.
Давайте добавим и вертикальный ползунок:

Code

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;
      }
}

Надеюсь вы не забыли добавить переменные?

Code

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

Сообщение отредактировал commandoby - Сб, 21 Апр 2012, 18:18

СообщениеВ этом уроке я расскажу, как работает GUI в Unity, и по ходу дела буду создавать простое меню. Этот урок для новичков, но желательно с начальным знанием Unity Java Script, да или вообще какого либо скрипта. Ну что, начнём.

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

Code

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

Code

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

В сцене оно выглядит так:

А как примагнитить его к другим углам экрана, или поместить в центр?
Для этого есть следующие комманды:

Code

Screen.width
Screen.height

Code

Так же никто не запрещает раздувать и сдувать окна в зависимости от разрешения экрана, всё в ваших руках.

Code

if (тут) {
}

Давайте теперь создадим кнопку, отправляющую нас в сцену с самой игрой:

Code

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

Code

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

Code

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

Code

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

Code

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

Code

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;
      }
}

Надеюсь вы не забыли добавить переменные?

Code

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

Автор - commandoby
Дата добавления - 18 Апр 2012 в 17:34

gind

Дата: Пт, 04 Май 2012, 21:22 | Сообщение # 2

Сообщений: 1

Награды: 0

Репутация: 0

Статус: Offline

Не могли бы вы тот же самый урок перевести в C#. Мне не надо весь урок, ток 2ой пункт про размещение GUI на экране (Знаю как на середину как в верхние углы, а в нижние не как не получается = ( )

Чем шире угол зрения - тем он тупее.

Дата: Сб, 05 Май 2012, 22:02 | Сообщение # 3

Unity 3D Free

Сообщений: 836

Награды: 3

Репутация: 211

Статус: Offline

gind, прошу прощения, но си шарп не изучаю. Хотя... Порывшись тут, а точнее тут, то можно найти примерно это:

Code

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

  void OnGUI(){
   GUI.Box (new Rect (5,5,50,50), "1");
   GUI.Box (new Rect (Screen.width - 55,5,50,50), "2");
   GUI.Box (new Rect (5,Screen.height - 55,50,50), "3");
   GUI.Box (new Rect (Screen.width - 55,Screen.height - 55,50,50), "4");
   GUI.Box (new Rect (Screen.width/2 - 25,Screen.height/2 - 25,50,50), "5");
  }

}

По чаще заглядывайте в unity справку.

Дата: Пн, 23 Июл 2012, 23:02 | Сообщение # 4

Сообщений: 385

Награды: 5

Репутация: 78

Статус: Offline

Есть вопрос!А как если мне нужно разместить gui слева-внизу и немного правее сделать поддержку разных разрешений.Делаю так:

void OnGUI () {
GUI.Box(new Rect(Screen.width / 6 - 30,Screen.width / 2 + 170,120,25),"HP: " + _curHealth + "/" + maxHealth);
GUI.Box(new Rect(Screen.width / 6 - 50,Screen.width / 2 + 200,120, 25),"Stamina: " + _curStamina + "/" + maxStamina);
}

При разных разрешениях всё сбивается.

Дата: Пн, 23 Июл 2012, 23:25 | Сообщение # 5

Гуру

Сообщений: 1748

Награды: 10

Репутация: 660

Статус: Offline

А почему по обоим координатам используешь Screen.width? Где Screen.height?

Дата: Вт, 24 Июл 2012, 00:16 | Сообщение # 6

Сообщений: 385

Награды: 5

Репутация: 78

Статус: Offline

Ой,точно...А остальные разрешения тогда поддерживаться будут?

Дата: Вт, 24 Июл 2012, 00:23 | Сообщение # 7

Unity 3D Free

Сообщений: 836

Награды: 3

Репутация: 211

Статус: Offline

Колямба, эти комманды возвращают любое разрешение экрана, но только не игровое, а действительное (не более, чем разрешение собственного монитора).

Дата: Вт, 24 Июл 2012, 08:04 | Сообщение # 8

Гуру

Сообщений: 1748

Награды: 10

Репутация: 660

Статус: Offline

Да ну?! А как же тогда переводится это:

Quote

actual height of the player window (in fullscreen it is also the current resolution)

Это именно размеры окна игры. Размеры экрана получают так:

Quote

Screen.currentResolution

Дата: Вт, 24 Июл 2012, 10:07 | Сообщение # 9

Unity 3D Free

Сообщений: 836

Награды: 3

Репутация: 211

Статус: Offline

seaman, этот вывод я сделал путём экспериментов над собственной игрой.

Дата: Вт, 24 Июл 2012, 12:31 | Сообщение # 10

Гуру

Сообщений: 1748

Награды: 10

Репутация: 660

Статус: Offline

Ну я все же больше верю разработчикам.

Левша

Дата: Вт, 24 Июл 2012, 13:22 | Сообщение # 11

Черный Волк

Сообщений: 7257

Награды: 30

Репутация: 3313

Статус: Offline

Из практики:
Разрешение экрана раб. стола винды можно получить только через - Screen.currentResolution
Рабочий код из действующего проекта:

Code

function ScrinResolutionChange () {
if (fulSt) Screen.SetResolution(Screen.currentResolution.width, Screen.currentResolution.height, true);
if (!fulSt) Screen.SetResolution(892, 594, false);
}

Тут можно посмотреть наглядно:
http://gamecreatingcommunity.ru/forum/148-4080-110169-16-1322776507
Меню вызываеться по Escape.

X.cor.R (Prologue)

Дата: Вт, 24 Июл 2012, 13:48 | Сообщение # 12

Сообщений: 385

Награды: 5

Репутация: 78

Статус: Offline

Ну так посоветуйте, как делать чтобы от разрешения позиция GUI не менялась?

Сообщение отредактировал Колямба - Вт, 24 Июл 2012, 13:49

Левша

Дата: Вт, 24 Июл 2012, 13:51 | Сообщение # 13

Черный Волк

Сообщений: 7257

Награды: 30

Репутация: 3313

Статус: Offline

Обязательно стоя и в гамаке... cool

Врочем твое дело...
Универсальный контроллер разм. и позиц. GUI интерфейса.

X.cor.R (Prologue)

Дата: Вт, 24 Июл 2012, 13:59 | Сообщение # 14

Сообщений: 385

Награды: 5

Репутация: 78

Статус: Offline

Левша, спасибо большое!

Дата: Вт, 24 Июл 2012, 15:46 | Сообщение # 15

Unity 3D Free

Сообщений: 836

Награды: 3

Репутация: 211

Статус: Offline

seaman, либо я тебя не понял, либо ты меня. Я имел в виду, что если указать ширину 1600, а разрешение монитора 1366х768, то комманда Screen.width вернёт 1366. Ну, во всяком случае, у меня так.

Сообщение отредактировал commandoby - Вт, 24 Июл 2012, 15:46