Как создать внутриигровое меню в Unity


Unity позволяет не делать меню настроек, так как есть встроенный диалог настроек качества и разрешения перед запуском игры. Однако если вы хотите сделать вашу игру неповторимой и показать, на что способны, как дизайнер, то эта статья именно для вас. После прохождения этого туториала вы сможете создавать свое собственное меню с таким функционалом – настройки громкости, разрешения, качества изображения, переключения полноэкранного и оконного режима. Интересно? Тогда запускай Unity и поехали!
Создание и дизайн главного меню и меню настроек
1. Создаем две сцены: Menu и Game
2. Открываем File->BuildSettings и перетаскиваем созданные сцены в Scenes in build.

Теперь можем приступать к созданию пользовательского интерфейса. Откройте сцену Menu и добавьте Panel. Сразу добавляется Canvas(Холст) и дочерним объектом к нему добавляется Panel (Панель).


Обратим внимание на инспектор для Canvas. А именно на компонент Canvas.


Render Mode автоматически выставлен на Screen Space – Overlay.

Немного информации:

Screen Space – Overlay:

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

Важен порядок размещения объектов в иерархии. Холст Screen Space – Overlay должен находиться в самом верху иерархии, иначе он может пропасть из виду.


Screen Space – Camera:

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

Так же для Холста с такими настройками важно размещение относительно других объектов. На переднем плане будут объекты, которые находятся ближе к камере, не зависимо от того, это UI или другие GameObjects.


World Space:

Холст размещается, как любой другой объект без привязки к камере или экрану, он может быть ориентирован как вам угодно, размер Холста задается с помощью RectTransform, но то, как его будет видно во время игры, будет зависеть от положения камеры.
В данном задании мы будем использовать Screen Space – Overlay.
Давайте настроим цвет панели. Можно также добавить картинку на фон. Для этого нужно обратить внимание на компонент Image в Инспекторе панели.


Как видите, картинка добавляется в поле Source Image. Картинку можно просто перетащить из файлов проекта, либо кликнуть на кружочек справа от поля.

Цвет выбирается в поле Color, либо с помощью инструмента пипетки.
Важно знать, что пипетка позволяет выбрать цвет за пределами Unity.
После того, как выбрали цвет или картинку, нам нужно разместить кнопки, которые всем будут управлять, а так же текст. Чтобы упростить себе задачу, для Panel мы добавим еще один компонент, который называется Vertical Layout Group. И сразу настроим его.

Нам необходимо разместить все кнопки и текст по центру экрана. Для этого находим в компоненте Vertical Layout Group пункт Child Alignment и выбираем Middle Center. Теперь все наши элементы, будь то кнопки или текст, будут выравниваться по центру, независимо от разрешения экрана.

Так же убираем галочки с ChildForceExpand. Должно получиться так:


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

В нашем меню должны быть следующие кнопки:

1. Start Game
2. Settings
3. Exit

Сейчас, добавляем Text дочерним элементом нашей Панели. Можете заметить, как он прикрепляется по центру. Иногда для этого требуется созданный элемент в окне Scene просто передвинуть на Panel и тогда он выровняется. Настраиваем текст так, как хочется с помощью компонента Text(Script) в инспекторе.


После добавляем Button. Кнопка добавится под текст.

Разберем компонент Button нашей кнопки. Нас интересует Transition – то, как кнопка будет реагировать на действия мышки. В Unity реализовано несколько способов. Пока рассмотрим довольно простой Color Tint. Это значит, что кнопка будет менять свой цвет при определенных состояниях. Интерфейс для настройки довольно удобный. Настраиваем так, как нравится.


Так же у объекта Button есть дочерний объект Text – это текст который будет отображаться на кнопке. В тексте прописываем Play.

Кажется, Текст и Кнопки находятся слишком близко друг к другу.

Что бы это исправить для нашего Текста Menu добавляем еще один компонент, который называется Layout Element. И ставим галочку напротив Ignore Layout.


После этого выставляем Anchor на Middle-Center.


Потом добавляем еще три кнопки и называем их Settings, Credits, Exit.
Можно поменять размеры кнопок. На этом этапе меню выглядит так:

Переходы между main menu и settings
Что бы переходить на меню опций не обязательно делать новую сцену.
Для начала создаем пустой GameObject (Create Empty) как Child нашего Холста. Назовем его Main menu. Потом нашу панель, со всеми инструментами сделаем дочерними элементами этого объекта. Должно получиться так:


Выбираем наш MainMenu объект и сделаем его дубликат. С выбранным элементом нажимаем комбинацию клавиш Ctrl+D. У нас появится новый объект.


Переименовываем новый объект в Settings. Для удобства управления инактивируем MainMenu.


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

За контроль Fullscreen будет отвечать элемент Toggle.
За громкость – Slider.
За качество изображения и разрешение – Dropdown.

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

Можно настроить Spacing в Vertical layout group, чтобы между элементами было немного пространства. Добавим на панель картинку и в итоге получим такой результат:

Программирование кнопок
Перейдем к написанию скрипта меню.

Нам нужно, чтобы по нажатию кнопки Play у нас запускалась другая сцена с нашей игрой, а по нажатию кнопки Exit игра закрывалась.

Это мы и пропишем в нашем скрипте.

Для MainMenu добавляем новый компонент MenuControls.cs и отрываем его.

Первое что надо сделать – удалить существующие методы Start() и Update() – тут они нам не нужны.

Using UnityEngine.SceneManagement;
После этого напишем свой метод для нажатия кнопки Play. Метод должен быть public - нам нужно иметь возможность видеть его за пределами нашего скрипта.

За загрузку сцены отвечает SceneManager и у него есть метод LoadScene. Существует несколько перегрузок метода. Можно передавать имя сцены, которую вы хотите загрузить. В нашем случае это сцена «Game».

В итоге функция будет выглядеть следующим образом.

Public void PlayPressed() { SceneManager.LoadScene("Game"); }
Так же создаем метод для выхода из игры:

Public void ExitPressed() { Application.Quit(); }
Однако в Unity мы не увидим результата работы этого метода, так как подобное работает только в билде. Для того что бы проверить, что все работает правильно, добавляем в метод строчку

Debug.Log("Exit pressed!");
Теперь необходимо прикрепить события кнопок к этим методам. Выбираем кнопку Play и находим в инспекторе следующее:


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

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

После этого нужно выбрать скрипт MenuControls и найти метод PlayPressed().


Точно также делаем для кнопки Exit. Только теперь выбираем метод ExitPressed().
Для кнопки Settings нам не нужно писать никакой код, так как некоторый функционал уже встроен.

Суть в том, что мы будем активировать GameObject. На этом этапе у вас должен быть активным MainMenu, а Settings не должно быть видно. Так же видим, что когда мы активируем Settings, он полностью перекрывает Menu. Суть в том, что играет роль порядок расположения дочерних объектов Холста – в каком порядке они расположены в иерархии в том порядке они и будут прорисовываться. Поскольку Settings у нас находятся над Main Menu, то они перекрывают меню.
Это мы и будем использовать.

Выбираем кнопку Settings и в OnClick() перетаскиваем наш объект Settings. В функциях выбираем GameObject ->SetActive(); и ставим галочку. Вот так:


Ну а для кнопки Back, которая находится в меню опций, можно таким же образом подключить событие SetActive для объекта Settings, но на этот раз нам нужно инактивировать наш объект, поэтому мы просто не ставим галочку.

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

Настройки
Настройки полного экрана

Первое что мы пропишем это переключение полноэкранного и оконного режимов.
Нужно убрать галочку с пункта Is On нашего Toggle элемента.
Создаем скрипт для объекта Settings. Назовем его Settings.cs.

Для начала нам надо хранить переменную типа bool которая будет отображать текущее состояние – полноэкранный режим или нет. А потом, по изменению toggle эта переменная будет переключаться на противоположное значение.

У экрана есть свойство Screen.fullScreen типа bool. Можно просто будем присваивать значение нашей переменной isFullScreen этому свойству.

Код выглядит так:

Public void FullScreenToggle() { isFullScreen = !isFullScreen; Screen.fullScreen = isFullScreen; }
Увидеть результат можно только в билде. Давайте сейчас это сделаем. Учтите, что для того что бы билд был правильным нужно оставить активным только объект MainMenu, а Settings отключить. Если это сделано, то запускаем билд через File->BuildSettings и нажимаем кнопку Build.

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

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

Добавим эти два элемента. Сначала добавляем AudioMixer. Правой кнопкой мыши в окне Project ->Create->AudioMixer.

Называем его GameSettings. После этого открываем окно AudioMixer: Window->Audio Mixer (Ctrl + 8).

Что бы контролировать параметры миксера через скрипт, их нужно сделать видимыми для этого скрипта. Эта процедура называется ExposeParameters. Для этого кликаем на Mixer и в инспекторе находим volume и кликаем правой кнопкой мыши. Выбираем Expose to script:


Теперь в окне Audio Mixer обратите внимание на пункт Exposed Parameters в верхней левой части.
Теперь там есть параметр. Кликаем на него и называем наш параметр masterVolume. Следует запомнить имя, которое ему присваиваем – его нужно будет указать в коде.

Переходим в Settings.cs и создаем поле AudioMixer, чтобы получить ссылку на него в коде.

Public AudioMixer am;
потом создаем метод

Public void AudioVolume(float sliderValue) { am.SetFloat("masterVolume", sliderValue); }
Метод SetFloat будет принимать значения нашего слайдера и присваивать это значение параметру “masterVolume”.

Осталось прикрепить наш метод к событиям слайдера. Находим в инспекторе слайдера поле On Value Changed и точно так же прикрепляем объект. Вот только теперь нам надо не просто выбирать метод из списка, а использовать поле Dynamic float. Как видите, там уже есть наш метод, и он будет получать переменную от самого слайдера. Также нужно не забыть перетащить AudioMixer в соответствующее поле в компоненте Settings.cs.


Обратите внимание, что мы напрямую привязываем значение слайдера к значениям аудио-миксера. В аудио миксере громкость изменяется от -80 до 20. Нам же достаточно менять от -80(нет звука) до 0(нормальный звук). В настройках слайдера минимальное значение выставляем на -80, максимальное на 0.
Теперь добавим звуки в нашу игру, чтобы проверить работу скрипта.
На canvas добавим компонент Audio Source.
Настроим его следующим образом:


Audio Clip – саундтрек
Output – Мастер нашего миксера (дочерний объект)
Loop – поставить галочку – зациклить композицию, чтобы она играла постоянно.
Качество изображения
В Unity уже встроены настройки качества изображения. Edit->Project Settings->Quality. В инспекторе видим Quality settings. Их можно добавлять и настраивать.

Особенностью работы с настройками качества является следующее:
Каждой настройке соответствует индекс, который мы можем получить из Dropdown. Все что нужно сделать – переписать соответствующие пункты в нужные индексы в нашем UI элементе. Открываем его и в инспекторе находим Dropdown(Script) и в нем пункт Options. Дальше вписываем настройки в нужном порядке. У меня получилось так:


Дальше нужно прописать код. Мы продолжаем дополнять методами наш скрипт Settings.cs
Создаем метод, который будет принимать int – индекс выбранного пункта.

Public void Quality(int q) { QualitySettings.SetQualityLevel(q); }
Сохраняем скрипт и подключаем метод к событию на нашем меню. На этот раз это событие Dropdown – On Value Changed.

Поскольку наш метод будет получать значение от самого UI элемента, то мы выбираем название метода из группы Dymanic int. по аналогии с предыдущим пунктом.

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

Первое что нам понадобится – массив типа Resolution где мы будем хранить значения разрешений экрана.

Однако для пунктов выпадающего списка тип – string. Поэтому создаем список List<> в который мы будем сохранять значения возможных разрешений. Для работы со списками необходимо подключить:

Using System.Collections.Generic;
Также нам понадобится ссылка на соответствующий Dropdown. Для работы с UI элементами следует также прописать:

Using UnityEngine.UI;
В скрипте получим следующие поля:

Resolution rsl; List resolutions; public Dropdown dropdown;
Инициализацию и заполнение проводим в методе Awake. Этот метод вызывается при запуске объекта, соответственно выполняется раньше, чем все остальные методы.

Получаем значения и каждое из них добавляем в List в формате ширина*высота. После этого очищаем список Dropdown и заполняем его новыми опциями.

Public void Awake() { resolutions = new List(); rsl = Screen.resolutions; foreach (var i in rsl) { resolutions.Add(i.width +"x" + i.height); } dropdown.ClearOptions(); dropdown.AddOptions(resolutions); }
Теперь нужно создать метод, который будет менять разрешение экрана. Как и в предыдущих пунктах – принимать значение будем от UI элемента. Создаем функцию, которая принимает int

Public void Resolution(int r) { Screen.SetResolution(rsl[r].width, rsl[r].height, isFullScreen); }
В SetResolution необходимо передать параметры – ширина, высота и булевскую переменную, отвечающую за полный экран. У нас такая уже есть – это isFullScreen. Передаем ее в функцию.
Дальше не забываем подключить к соответствующему событию наш метод Resolution из группы Dynamic Int, а так же добавить ссылку на нужный Dropdown. 

Здравствуйте уважаемые игроделы.
На просторах интернета уроков по созданию игр в Unity3D очень много, но на верхнем слое и направленных новичкам очень мало.
В данном серии уроков, я буду расписывать о создании меню игры при помощи стандартного GUI, не использую нестандартные компоненты.
Урок направлен для новичков, которые желают научится создавать свое меню в игре.

По окончанию первого урока у вас получится меню игры с работающими кнопками:

В уроке будут использоваться функции:
1) public int - назначение переменной числовым значением
2) GUI.BeginGroup - создание GUI группы
3) GUI.Button - Создание GUI кнопки
4) Debug.Log - вывод сообщения в консоли
5) Application.LoadLevel - загрузка уровня
6) Application.Quit - закрытие игры

Итак, начнем:
Шаг 1: Создаем в окне Project C# скрипт и называем его по своему.
Шаг 2: Создаем игровую камеру:
* На верхнем меню программы нажимаем пункт GameObject
* После нажатия появляется выпадающее меню, в нем нажимаем пункт Create Other
* В появившемся списке нажимаем на строку с названием Camera и после этого действия в окне Hierarchy появляется объект Camera

Шаг 3: Назначаем объекту Camera скрипт, который создали в первом шаге. Для этого в окне Project находим ваш скрипт, у меня он называется Menu, и перетягиваем его в окно Hierarchy на объект Camera.
Чтобы удостовериться в правильности хода нужно: нажать на объект Camera в окне Hierarchy. В окне Inspector вы у объекта увидите такое одержимое:

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

Шаг 4: Откроем скрипт в редакторе. Для этого нажмите на ваш скрипт двойным нажатием левой кнопки мыши в окне Project. У вас откроется редактор скриптов, в моем случае это MonoDevelop. Открыв редактор, перед вами появится вас скрипт, который будет абсолютно пустой, но с базовым содержанием:

200?"200px":""+(this.scrollHeight+5)+"px");">
using UnityEngine;
using System.Collections;
public class Menu1: MonoBehaviour {
// Use this for initialization
void Start () {
}
void Update () {
}
}


Строка

200?"200px":""+(this.scrollHeight+5)+"px");">public class [u]Menu : MonoBehaviour {

В замен слова Menu будет содержать название вашего скрипта. Строку трогать и изменять не нужно. По крайней мере в данном уроке.

Шаг 5: Отредактируем скрипт под меню, для этого можно удалить некоторые строки, которые вам не понадобятся в этом уроке:

200?"200px":""+(this.scrollHeight+5)+"px");">
// Use this for initialization - этот комментарий нам не нужен

// Update is called once per frame
void Update () {
} - метод Void нам тоже не понадобится

Шаг 6: Наш скрипт подготовлен для создания на нем меню игры.
Перед методом void Start создадим переменную для нумерации окон в меню игры.
Содержании строки такое:

200?"200px":""+(this.scrollHeight+5)+"px");">public int window;


public int - задаем числовое значение переменной
window - название переменной, которая будет использоваться в скрипте с числовым значением

Шаг 6: Для правильной работы меню, при старте работы скрипта у нас должно отображаться одно содержимое, для этого в метод void Start добавим стартовое значением переменной window . Весь метод будет выглядеть так:

200?"200px":""+(this.scrollHeight+5)+"px");">
void Start () {
window = 1;
}

Метод при старте исполнения скрипта будет назначать переменной window значение 1

[b]Шаг 7:
Начнем саму работу с GUI выводом меню, для этого создадим ниже метода void Start, метод в выводом GUI. Выглядеть он будет так:

200?"200px":""+(this.scrollHeight+5)+"px");">
void OnGUI () {
}

Данный метод в программе Unity3D и в вашем создаваемом приложении вызовет вывод графических элементов.

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

200?"200px":""+(this.scrollHeight+5)+"px");">
GUI.EndGroup ();

GUI.BeginGroup - создаем группу
(new Rect - задаем значение, что дальше будут даны данные о расположении самой группы
(Screen.width / 2 - 100, - задаем расположение группы относительно ширины экрана
Screen.height / 2 - 100, - задаем расположение группы относительно высоты экрана
200 - задаем ширину группы
200 - задаем высоту группы

Значения ширины и высоты можно свои ставить, но чтобы все было по центру аккуратно в Screen.width / 2 - 100, Screen.height / 2 - 100 значение 100 заменяем на свое значение. То есть если же ваша группа будет иметь ширину и высоту 300, то в замен 100 вы должны ввести половину от ширины 300. Вводимое значение будет 150.

Шаг 9: Создаем вывод меню, если переменная window = 1. Для этого, между началом и концом группы, созданной в шаге №8, то есть

200?"200px":""+(this.scrollHeight+5)+"px");">
GUI.BeginGroup (new Rect (Screen.width / 2 - 100, Screen.height / 2 - 100, 200, 200));
Сюда!!!
GUI.EndGroup ();


Напишем выдаваемое значение при window = 1:

200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 1)
{
if(GUI.Button (new Rect (10,30,180,30), "Играть"))
{
window = 2;
}
if(GUI.Button (new Rect (10,70,180,30), "Настройки"))
{
window = 3;
}
if(GUI.Button (new Rect (10,110,180,30), "Об Игре"))
{
window = 4;
}
if(GUI.Button (new Rect (10,150,180,30), "Выход"))
{
window = 5;
}
}

if(window == 1) - если windows равно значению 1, то создадим вывод
if(GUI.Button (new Rect (10,30,180,30), "Играть")) - создаем кнопку "Играть"
{window = 2;} - если нажата кнопка "Играть", то window получит значение 2
С остальными кнопка так же.

Шаг 10: Создадим вывод, если переменная window равно 2

200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 2)
{

{
Application.LoadLevel(1);
}
{
Application.LoadLevel(2);
}
{
Application.LoadLevel(3);
}
{
window = 1;
}
}

Выводим кнопки, которые доступны при нажатии на кнопку "Играть". Вывод ни чем не отличается о предыдущих кнопок, расшифрую только новые функции:
Debug.Log("Уровень 1 загружен"); -
Application.LoadLevel(1); - вызываем функцию, которая загружает уровень игры. 1 - можно менять на нужный вам уровень. Числовое значение можно брать, если нажать на сочетании клавиш Ctrl + Shift + B.

Шаг 11: Создаем вывод, если window имеет значение 3:

200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 3)
{

{
}
{
}
{
}
if(GUI.Button (new Rect (10,160,180,30), "Назад"))
{
window = 1;
}
}


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

Шаг 12: Выводим содержимое, если значение у window 4

200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 4)
{

{
window = 1;
}
}

Шаг 13: Выводим содержимое, если переменная window имеет значение 5 и нажата кнопка "Выход"

200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 5)
{

{
Application.Quit();
}
{
window = 1;
}
}


В данном выводе из новых функций, только она:
Application.Quit(); - данная функция выключает приложении при нажатии кнопки "Да".
P.S. Функция не работает в редакторе Unity3D, она работает только в скомпилированном проекте.

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

If(window == 2)
{
GUI.Label(new Rect(50, 10, 180, 30), "Выберите уровень");
if(GUI.Button (new Rect (10,40,180,30), "Уровень 1"))
{
Debug.Log("Уровень 1 загружен");
Application.LoadLevel(1);
}
if(GUI.Button (new Rect (10,80,180,30), "Уровень 2"))
{
Debug.Log("Уровень 2 загружен");
Application.LoadLevel(2);
}
if(GUI.Button (new Rect (10,120,180,30), "Уровень 3"))
{
Debug.Log("Уровень 3 загружен");
Application.LoadLevel(3);
}
if(GUI.Button (new Rect (10,160,180,30), "Назад"))
{
window = 1;
}
}

If(window == 3)
{
GUI.Label(new Rect(50, 10, 180, 30), "Настройки Игры");
if(GUI.Button (new Rect (10,40,180,30), "Игра"))
{
}
if(GUI.Button (new Rect (10,80,180,30), "Аудио"))
{
}
if(GUI.Button (new Rect (10,120,180,30), "Видео"))
{
}
if(GUI.Button (new Rect (10,160,180,30), "Назад"))
{
window = 1;
}
}

If(window == 4)
{
GUI.Label(new Rect(50, 10, 180, 30), "Об Игре");
GUI.Label(new Rect(10, 40, 180, 40), "Информация об разработчике и об игре");
if(GUI.Button (new Rect (10,90,180,30), "Назад"))
{
window = 1;
}
}

If(window == 5)
{
GUI.Label(new Rect(50, 10, 180, 30), "Вы уже выходите?");
if(GUI.Button (new Rect (10,40,180,30), "Да"))
{
Application.Quit();
}
if(GUI.Button (new Rect (10,80,180,30), "Нет"))
{
window = 1;
}
}
GUI.EndGroup ();
}
}


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

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

  • выход в меню или на рабочий стол,
  • переход в меню настройки игры,
  • или просто остановка игры.
  • В этом скрипте мы реализуем остановку игры и выход в главное меню. Для этого нам понадобится в проекте создать две сцены и С# скрипт, в котором пишем вот такие строки:

    Using UnityEngine; using System.Collections; public class puse: MonoBehaviour { public float timer; public bool ispuse; public bool guipuse; void Update() { Time.timeScale = timer; if (Input.GetKeyDown(KeyCode.Escape) && ispuse == false) { ispuse = true; } else if (Input.GetKeyDown(KeyCode.Escape) && ispuse == true) { ispuse = false; } if (ispuse == true) { timer = 0; guipuse = true; } else if (ispuse == false) { timer = 1f; guipuse = false; } } public void OnGUI() { if (guipuse == true) { Cursor.visible = true;// включаем отображение курсора if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2) - 150f, 150f, 45f), "Продолжить")) { ispuse = false; timer = 0; Cursor.visible = false; } if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2) - 100f, 150f, 45f), "Сохранить")) { } if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2) - 50f, 150f, 45f), "Загрузить")) { } if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2), 150f, 45f), "В Меню")) { ispuse = false; timer = 0; Application.LoadLevel("Menu"); // здесь при нажатии на кнопку загружается другая сцена, вы можете изменить название сцены на свое } } } }

    Здесь все просто. Две переменные, одна из которых будет при нажатии на ESC останавливать время, а вторая, при остановке времени будет выводить на экран кнопки меню.

    Весь скрипт построен, по сути, на одной функции:

    Time.timeScale = timer

    TimerScale является, как бы, своеобразными часами которые при значении 1 работают в нормальном режиме и время проходит как обычно, при значении 0,5 время замедляется в 2 раза, а при значении 0 время вообще останавливается. Этим и воспользуемся для создания паузы.

  • Разработка под Android
    • Tutorial

    Как создать внутриигровое меню в Unity

    Unity позволяет не делать меню настроек, так как есть встроенный диалог настроек качества и разрешения перед запуском игры. Однако если вы хотите сделать вашу игру неповторимой и показать, на что способны, как дизайнер, то эта статья именно для вас. После прохождения этого туториала вы сможете создавать свое собственное меню с таким функционалом – настройки громкости, разрешения, качества изображения, переключения полноэкранного и оконного режима. Интересно? Тогда запускай Unity и поехали!
    Создание и дизайн главного меню и меню настроек
    1. Создаем две сцены: Menu и Game
    2. Открываем File->BuildSettings и перетаскиваем созданные сцены в Scenes in build.

    Теперь можем приступать к созданию пользовательского интерфейса. Откройте сцену Menu и добавьте Panel. Сразу добавляется Canvas(Холст) и дочерним объектом к нему добавляется Panel (Панель).


    Обратим внимание на инспектор для Canvas. А именно на компонент Canvas.


    Render Mode автоматически выставлен на Screen Space – Overlay.

    Немного информации:

    Screen Space – Overlay:

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

    Важен порядок размещения объектов в иерархии. Холст Screen Space – Overlay должен находиться в самом верху иерархии, иначе он может пропасть из виду.


    Screen Space – Camera:

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

    Так же для Холста с такими настройками важно размещение относительно других объектов. На переднем плане будут объекты, которые находятся ближе к камере, не зависимо от того, это UI или другие GameObjects.


    World Space:

    Холст размещается, как любой другой объект без привязки к камере или экрану, он может быть ориентирован как вам угодно, размер Холста задается с помощью RectTransform, но то, как его будет видно во время игры, будет зависеть от положения камеры.
    В данном задании мы будем использовать Screen Space – Overlay.
    Давайте настроим цвет панели. Можно также добавить картинку на фон. Для этого нужно обратить внимание на компонент Image в Инспекторе панели.


    Как видите, картинка добавляется в поле Source Image. Картинку можно просто перетащить из файлов проекта, либо кликнуть на кружочек справа от поля.

    Цвет выбирается в поле Color, либо с помощью инструмента пипетки.
    Важно знать, что пипетка позволяет выбрать цвет за пределами Unity.
    После того, как выбрали цвет или картинку, нам нужно разместить кнопки, которые всем будут управлять, а так же текст. Чтобы упростить себе задачу, для Panel мы добавим еще один компонент, который называется Vertical Layout Group. И сразу настроим его.

    Нам необходимо разместить все кнопки и текст по центру экрана. Для этого находим в компоненте Vertical Layout Group пункт Child Alignment и выбираем Middle Center. Теперь все наши элементы, будь то кнопки или текст, будут выравниваться по центру, независимо от разрешения экрана.

    Так же убираем галочки с ChildForceExpand. Должно получиться так:


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

    В нашем меню должны быть следующие кнопки:

    1. Start Game
    2. Settings
    3. Exit

    Сейчас, добавляем Text дочерним элементом нашей Панели. Можете заметить, как он прикрепляется по центру. Иногда для этого требуется созданный элемент в окне Scene просто передвинуть на Panel и тогда он выровняется. Настраиваем текст так, как хочется с помощью компонента Text(Script) в инспекторе.


    После добавляем Button. Кнопка добавится под текст.

    Разберем компонент Button нашей кнопки. Нас интересует Transition – то, как кнопка будет реагировать на действия мышки. В Unity реализовано несколько способов. Пока рассмотрим довольно простой Color Tint. Это значит, что кнопка будет менять свой цвет при определенных состояниях. Интерфейс для настройки довольно удобный. Настраиваем так, как нравится.


    Так же у объекта Button есть дочерний объект Text – это текст который будет отображаться на кнопке. В тексте прописываем Play.

    Кажется, Текст и Кнопки находятся слишком близко друг к другу.

    Что бы это исправить для нашего Текста Menu добавляем еще один компонент, который называется Layout Element. И ставим галочку напротив Ignore Layout.


    После этого выставляем Anchor на Middle-Center.


    Потом добавляем еще три кнопки и называем их Settings, Credits, Exit.
    Можно поменять размеры кнопок. На этом этапе меню выглядит так:

    Переходы между main menu и settings
    Что бы переходить на меню опций не обязательно делать новую сцену.
    Для начала создаем пустой GameObject (Create Empty) как Child нашего Холста. Назовем его Main menu. Потом нашу панель, со всеми инструментами сделаем дочерними элементами этого объекта. Должно получиться так:


    Выбираем наш MainMenu объект и сделаем его дубликат. С выбранным элементом нажимаем комбинацию клавиш Ctrl+D. У нас появится новый объект.


    Переименовываем новый объект в Settings. Для удобства управления инактивируем MainMenu.


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

    За контроль Fullscreen будет отвечать элемент Toggle.
    За громкость – Slider.
    За качество изображения и разрешение – Dropdown.

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

    Можно настроить Spacing в Vertical layout group, чтобы между элементами было немного пространства. Добавим на панель картинку и в итоге получим такой результат:

    Программирование кнопок
    Перейдем к написанию скрипта меню.

    Нам нужно, чтобы по нажатию кнопки Play у нас запускалась другая сцена с нашей игрой, а по нажатию кнопки Exit игра закрывалась.

    Это мы и пропишем в нашем скрипте.

    Для MainMenu добавляем новый компонент MenuControls.cs и отрываем его.

    Первое что надо сделать – удалить существующие методы Start() и Update() – тут они нам не нужны.

    Using UnityEngine.SceneManagement;
    После этого напишем свой метод для нажатия кнопки Play. Метод должен быть public - нам нужно иметь возможность видеть его за пределами нашего скрипта.

    За загрузку сцены отвечает SceneManager и у него есть метод LoadScene. Существует несколько перегрузок метода. Можно передавать имя сцены, которую вы хотите загрузить. В нашем случае это сцена «Game».

    В итоге функция будет выглядеть следующим образом.

    Public void PlayPressed() { SceneManager.LoadScene("Game"); }
    Так же создаем метод для выхода из игры:

    Public void ExitPressed() { Application.Quit(); }
    Однако в Unity мы не увидим результата работы этого метода, так как подобное работает только в билде. Для того что бы проверить, что все работает правильно, добавляем в метод строчку

    Debug.Log("Exit pressed!");
    Теперь необходимо прикрепить события кнопок к этим методам. Выбираем кнопку Play и находим в инспекторе следующее:


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

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

    После этого нужно выбрать скрипт MenuControls и найти метод PlayPressed().


    Точно также делаем для кнопки Exit. Только теперь выбираем метод ExitPressed().
    Для кнопки Settings нам не нужно писать никакой код, так как некоторый функционал уже встроен.

    Суть в том, что мы будем активировать GameObject. На этом этапе у вас должен быть активным MainMenu, а Settings не должно быть видно. Так же видим, что когда мы активируем Settings, он полностью перекрывает Menu. Суть в том, что играет роль порядок расположения дочерних объектов Холста – в каком порядке они расположены в иерархии в том порядке они и будут прорисовываться. Поскольку Settings у нас находятся над Main Menu, то они перекрывают меню.
    Это мы и будем использовать.

    Выбираем кнопку Settings и в OnClick() перетаскиваем наш объект Settings. В функциях выбираем GameObject ->SetActive(); и ставим галочку. Вот так:


    Ну а для кнопки Back, которая находится в меню опций, можно таким же образом подключить событие SetActive для объекта Settings, но на этот раз нам нужно инактивировать наш объект, поэтому мы просто не ставим галочку.

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

    Настройки
    Настройки полного экрана

    Первое что мы пропишем это переключение полноэкранного и оконного режимов.
    Нужно убрать галочку с пункта Is On нашего Toggle элемента.
    Создаем скрипт для объекта Settings. Назовем его Settings.cs.

    Для начала нам надо хранить переменную типа bool которая будет отображать текущее состояние – полноэкранный режим или нет. А потом, по изменению toggle эта переменная будет переключаться на противоположное значение.

    У экрана есть свойство Screen.fullScreen типа bool. Можно просто будем присваивать значение нашей переменной isFullScreen этому свойству.

    Код выглядит так:

    Public void FullScreenToggle() { isFullScreen = !isFullScreen; Screen.fullScreen = isFullScreen; }
    Увидеть результат можно только в билде. Давайте сейчас это сделаем. Учтите, что для того что бы билд был правильным нужно оставить активным только объект MainMenu, а Settings отключить. Если это сделано, то запускаем билд через File->BuildSettings и нажимаем кнопку Build.

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

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

    Добавим эти два элемента. Сначала добавляем AudioMixer. Правой кнопкой мыши в окне Project ->Create->AudioMixer.

    Называем его GameSettings. После этого открываем окно AudioMixer: Window->Audio Mixer (Ctrl + 8).

    Что бы контролировать параметры миксера через скрипт, их нужно сделать видимыми для этого скрипта. Эта процедура называется ExposeParameters. Для этого кликаем на Mixer и в инспекторе находим volume и кликаем правой кнопкой мыши. Выбираем Expose to script:


    Теперь в окне Audio Mixer обратите внимание на пункт Exposed Parameters в верхней левой части.
    Теперь там есть параметр. Кликаем на него и называем наш параметр masterVolume. Следует запомнить имя, которое ему присваиваем – его нужно будет указать в коде.

    Переходим в Settings.cs и создаем поле AudioMixer, чтобы получить ссылку на него в коде.

    Public AudioMixer am;
    потом создаем метод

    Public void AudioVolume(float sliderValue) { am.SetFloat("masterVolume", sliderValue); }
    Метод SetFloat будет принимать значения нашего слайдера и присваивать это значение параметру “masterVolume”.

    Осталось прикрепить наш метод к событиям слайдера. Находим в инспекторе слайдера поле On Value Changed и точно так же прикрепляем объект. Вот только теперь нам надо не просто выбирать метод из списка, а использовать поле Dynamic float. Как видите, там уже есть наш метод, и он будет получать переменную от самого слайдера. Также нужно не забыть перетащить AudioMixer в соответствующее поле в компоненте Settings.cs.


    Обратите внимание, что мы напрямую привязываем значение слайдера к значениям аудио-миксера. В аудио миксере громкость изменяется от -80 до 20. Нам же достаточно менять от -80(нет звука) до 0(нормальный звук). В настройках слайдера минимальное значение выставляем на -80, максимальное на 0.
    Теперь добавим звуки в нашу игру, чтобы проверить работу скрипта.
    На canvas добавим компонент Audio Source.
    Настроим его следующим образом:


    Audio Clip – саундтрек
    Output – Мастер нашего миксера (дочерний объект)
    Loop – поставить галочку – зациклить композицию, чтобы она играла постоянно.
    Качество изображения
    В Unity уже встроены настройки качества изображения. Edit->Project Settings->Quality. В инспекторе видим Quality settings. Их можно добавлять и настраивать.

    Особенностью работы с настройками качества является следующее:
    Каждой настройке соответствует индекс, который мы можем получить из Dropdown. Все что нужно сделать – переписать соответствующие пункты в нужные индексы в нашем UI элементе. Открываем его и в инспекторе находим Dropdown(Script) и в нем пункт Options. Дальше вписываем настройки в нужном порядке. У меня получилось так:


    Дальше нужно прописать код. Мы продолжаем дополнять методами наш скрипт Settings.cs
    Создаем метод, который будет принимать int – индекс выбранного пункта.

    Public void Quality(int q) { QualitySettings.SetQualityLevel(q); }
    Сохраняем скрипт и подключаем метод к событию на нашем меню. На этот раз это событие Dropdown – On Value Changed.

    Поскольку наш метод будет получать значение от самого UI элемента, то мы выбираем название метода из группы Dymanic int. по аналогии с предыдущим пунктом.

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

    Первое что нам понадобится – массив типа Resolution где мы будем хранить значения разрешений экрана.

    Однако для пунктов выпадающего списка тип – string. Поэтому создаем список List<> в который мы будем сохранять значения возможных разрешений. Для работы со списками необходимо подключить:

    Using System.Collections.Generic;
    Также нам понадобится ссылка на соответствующий Dropdown. Для работы с UI элементами следует также прописать:

    Using UnityEngine.UI;
    В скрипте получим следующие поля:

    Resolution rsl; List resolutions; public Dropdown dropdown;
    Инициализацию и заполнение проводим в методе Awake. Этот метод вызывается при запуске объекта, соответственно выполняется раньше, чем все остальные методы.

    Получаем значения и каждое из них добавляем в List в формате ширина*высота. После этого очищаем список Dropdown и заполняем его новыми опциями.

    Public void Awake() { resolutions = new List(); rsl = Screen.resolutions; foreach (var i in rsl) { resolutions.Add(i.width +"x" + i.height); } dropdown.ClearOptions(); dropdown.AddOptions(resolutions); }
    Теперь нужно создать метод, который будет менять разрешение экрана. Как и в предыдущих пунктах – принимать значение будем от UI элемента. Создаем функцию, которая принимает int

    Public void Resolution(int r) { Screen.SetResolution(rsl[r].width, rsl[r].height, isFullScreen); }
    В SetResolution необходимо передать параметры – ширина, высота и булевскую переменную, отвечающую за полный экран. У нас такая уже есть – это isFullScreen. Передаем ее в функцию.
    Дальше не забываем подключить к соответствующему событию наш метод Resolution из группы Dynamic Int, а так же добавить ссылку на нужный Dropdown.


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

    Edit->ProjectSettings-> Display Resolution Dialog-Disabled


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

    Хабра уже имеет за плечами пару туториалов на тему кроссплатформенного 3D движка «Unity 3D», но до сих пор не имеет уроков на тему 3D меню.
    На эту статью меня натолкнул пост Unity3d script basics и .
    Так же пару людей поругалось на автора на тему «Уже не в том веке живём», поэтому вот вам щепоточка знаний.
    Делая этот туториал, я предполагал, что вы уже знакомы с основами JS"a и интерфейса Unity 3D.
    Работать я буду с Виндусовской версией Unity 3D. Обладатели других ОС думаю разберутся.

    Приготовления

    1) Иметь основную мысль на тему меню, так сказать мысленную заготовку.
    2) Нужные вам модели. Можно найти (Google Sketchup). Нужный нам формат - collada.
    3) Иметь шрифт под текст меню. Можно взять стандартные из шрифтов винды.

    Первые шаги

    Я придумал сценку на темы «Вестерн».
    Начнём с приготовления сцены.
    Первым создайте terrain и подберите размер/высоту/качество текстурирования(Terrain->Set Resolution/Flatten Heightmap).
    Дальше подберите текстуру и сделайте основной ландшафт сцены

    После поставьте камеру под нужный угол обзора, добавьте свет(Derectional light) и тени он него же.
    Добавьте туман и небо(skybox), всё это можно найти в Edit->Render Settings.




    Модели

    Для начала разархивируйте скачанный архив, и перенесите все текстуры из images в папку Materials вашего проекта(просто выделите и перетащите на папку в окне unity).
    Дальше импортируйте модель *.dae в Unity (Assets->Import New Asset), и добавьте её на сцену, так же измените размер до вам угодного.
    ВАЖНО! Если вы сделаете не по порядку, то получите незатекстурированную модель.

    Меню Основа

    Меню можно сделать с помощью моделей или 3д текста, а можно и из всего сразу.
    Я расскажу о текстовом варианте, т.к. это попривычнее будет.
    Что бы создать 3д текст со своим шрифтом, нужно добавить его в проект (Assets->Import New Asset).
    После, выделив его, перейти в (GameObjects->Create Other->3D Text).
    У вас создастся мыльный текст. Чтобы повысить качество, поменяйте Font Size, а потом подгоните размер.

    Function OnMouseDown () { //1 if(name=="Play Game") { Application.LoadLevel("Test Scene"); } //2 if(name=="Options") { } if(name=="Quit") { Application.Quit(); } //3 } function OnMouseOver () { //1 animation.Play(); //4 }

    1) События при манипуляции с мышью.
    2) Загрузит сцену под названием Test Scene, если вы укажете её при компиляции проекта(так же можно указать порядковый номер).
    3) Выход из приложения, если оно скомпилировано не под web, или не запускается в редакторе.
    4) Метод анимации меню, если таковое вам хочется (Слишком муторно, поэтому рассказывать не буду. Можно будет посмотреть в моём готовом проекте).
    * name - имя объекта, на котором лежит скрипт.

    Переходы по меню

    Создайте цилиндр, и переименуйте его в Menu. Сделайте его прозрачным, применив любой частично прозрачный материал (можно как на скрине).


    Вложим все наши объекты «3д текст» в объект Menu(окно Hierarchy).

    Так же на другой стороне цилиндра создайте два 3д текста, и переместите их по иерархии в Menu. Это будет подпункт меню.


    Обновим скрипт.

    Var menuRotation: GameObject; //1 function OnMouseDown () { if(name=="Play Game") { Application.LoadLevel("Test Scene"); } if(name=="Options" || name=="Back") { menuRotation.transform.Rotate(0, 180, 0); } //2 if(name=="Quit") { Application.Quit(); } } function OnMouseOver () { animation.Play(); }

    1) Создаст переменную, содержащую объект.
    2) При нажатии на объект с названием Options, команда повернёт объект menuRotation на 180*.

    Перенесите цилиндр в поле Menu Rotation кнопки Options.
    Теперь вы имеем почти готовое меню. Осталось только создать слайдер.

    Слайдеры

    Слайдеры - самая муторная часть урока. Приготовьтесь к страданиям и шаманству.
    *Буду рад, если кто-нибудь выложит свою версию слайдера, т.к. мой на самом деле Шаманский.
    Создайте приметив Cube и растяните его до подобия ниточки. Cоздайте приметив Sphere и поместите его в центре Cube.
    Всё это располагаем противоположно основному меню, а именно к подменю Options.
    *Для удобства я переименовал их в line_slider и sphere_slider.


    Создайте новый скрипт JS, и прицепите его к Sphere(sphere_slider).

    Function OnMouseDrag () { //1 var translation: float = Input.GetAxis ("Mouse X"); //2 transform.Translate(translation, 0, 0); //3 print(transform.position.x.ToString()); //4 }

    1) Событие будет активироваться при нажатии (на Sphere/sphere_slider) и передвижении мыши.
    2) Создаст переменную translation, в которую передаются Х координаты мыши.
    3) Перемещает Sphere/sphere_slider за мышкой.
    ВНИМАНИЕ. Координата, по которой будет двигаться шар, у всех разная (легче всего повернуть его координатой Х / красной стрелкой по траектории движения)
    4) Строка transform.position.x выдаст нам координату, на которой в данный момент находится объект.
    ВНИМАНИЕ. Координата всё так же разная (transform.position.x || y || z; либо поворот Sphere/sphere_slider).

    По выводу в консоль определим минимум и максимум, на который будет двигаться будущий слайдер.

    Как только вы засечёте нужные координаты, обновляйте старый скрипт.

    Function OnMouseDrag () { var translation: float = Input.GetAxis ("Mouse X") * 0.18; //1 if (transform.position.x < min || transform.position.x > < min) { transform.Translate(0.1, 0, 0); } //3 if (transform.position.x > max) { transform.Translate(-0.1, 0, 0); } //3 } else { transform.Translate(translation, 0, 0); } }

    1) Всё так же ловим координату Х, но с коэффициентом, который понижаетувеличивает скорость передвижения шара.
    ВНИМАНИЕ! Так же уникален для каждого пользователя.
    2) Максимум и минимум движения слайдера по осям.
    3) При выходе за пределы координата немного убавляется (во избежание застревания слайдера на месте).
    *меняем min и max на полученные ранее пределы.

    Вот слайдер почти и готов. Осталось только научить его возвращать значение.

    Var bullet: float = 0; //1 function OnMouseDrag () { var translation: float = Input.GetAxis ("Mouse X") * 0.18; if (transform.position.x < min || transform.position.x > max) { //2 if (transform.position.x < min) { transform.Translate(0.1, 0, 0); } //3 if (transform.position.x > max) { transform.Translate(-0.1, 0, 0); } //3 } else { transform.Translate(translation, 0, 0); } bullet = (transform.position.x - min)*250;//2 }

    1) Создаст переменную bullet.
    2) Записывает значения слайдера в переменную bullet.

    Вот и всё. Теперь у вас есть более-менее функционирующее меню Unity 3D.
    То что получилось у меня - тык .
    Благодарю за прочитанный урок.



    
    Top