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

Unity уроки

В этом уроке мы разберем как создать главное меню игры в Unity 5. Меню мы будем делать при помощи UI, добавленного в Unity 5.

Начнем с того, что создадим Canvas. ПКМ по серой зоне в иерархии и создадим UI->Canvas, который мы назовем MainMenu. Canvas - это объект, в котором будут храниться все элементы меню нашей игры. Разберемся с его основными компонентами

Основной компонент, Canvas имеет в себе Render Mode, обладающее следующими вариантами:

Screen Space - Overlay. Это значит, что данный UI будет отображаться перед каждой камерой в игре.
Screen Space - Camera. В данном случае мы выбираем камеру, к которой этот UI будет привязан.
World Space. В данном случае он будет привязан к мировому пространству и камера будет его видеть только когда наведется на него.

Для начала этого хватит для работы с данным компонентом. Следующий компонент - Canvas Scaler отвечает за масштабируемый интерфейс в игре при разных расширениях экрана.

Constant Pixel Size отвечает за то, что наш интерфейс будет одного и того же размера, при любых разрешениях экрана, поэтому когда он будет отображаться нормально в 800x600 режиме, то в 1920x1080 он будет черезвычайно мал. Можно это исправить при мощи "Якорей" или Anchors, но можно просто правильно настроить следующий вариант.
Scale With Screen Size будет увеличивать размер нашего интерфейса в зависимости от разрешения экрана.
ReferenceResolution означает изначальный размер экрана, под который создан этот UI.
ScreenMatchMode решает, какое действие будет произведено, если экран не является исходным:
Match Width Or Height - будет увеличивать размер интерфейса, распределяя доли увеличения ширины и высоты в соответствии с полосой внизу
Expand - Увеличивает интерфейса при изменении, так что он никогда не будет меньше, чем исходник.
Shrink - Уменьшает интерфейс, так что он не будет больше исходника.
Constant Physical Size Очень похож на Constant Pixel Size, но отличается тем, что там можно выбирать, в какой единице измерения будут производиться расчеты. В самом начале это вам не будет требоваться.

Следующим компонентом является GraphicRaycaster, он используется для настройки лучей(raycast) идущих в наш интерфейс из игрового пространства. Он обладает следующими параметрами:
Ignore Reversed Graphics - Следует ли рассматривать графику, обращенную в сторону от луча
Blocked Objects, Blocking Mask - Объекты, которые будут блокировать луч

Так как у нас в меню ничего не будет стоять перед ним, то этот компонент можно не настраивать. Теперь выставим следующие настройки: Canvas Scaler выставим в значения Scale With Screen Size и Match Width Or Height, а слайдер переместим на 0,5 для того, чтоб наш интерфейс равномерно расширялся по экрану при изменении разрешения.

И наконец приступим к созданию главного меню игры. Выбрав MainMenu при помощи ПКМ создадим новый элемент UI->Panel, который переименуем в MenuBackground. Далее в компоненте RectTransform необходимо сделать так, чтобы якоря были в середине экрана, так как меню будет масштабироваться именно от середины.

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

Теперь, нажимая ПКМ на MenuBackground добавим туда 2 кнопки: Resume и Exit. Расположим их так же относительно центра, или по вашему усмотрению, в любой другой стороне. Не забудте поменять внутри Button есть Text, в котором можно изменить компонент Text и поменять надпись на кнопке. Получилось так:

Можем пока отключить наше меню (выбрав MainMenu и убрав галочку возле имени). В данный момент нам необходимо сделать, чтоб наше меню вылезало при нажатии на кнопку ESC. Для этого создадим новый скрипт MainMenuController и добавим его в компоненты камеры (MainCamera). А в его коде мы напишем:

public class MainMenuController : MonoBehaviour {
    
    //главное меню
    public GameObject MainMenu;

	void Update () {
		if(Input.GetKeyDown(KeyCode.Escape))
        {
            //включаем меню
            MainMenu.SetActive(true);
            //останавливаем все, что зависит от времени
            Time.timeScale = 0;
        }
	}
    //Метод для нажатия на кнопку resume
    public void SetMenuOff()
    {
        //Выключаем меню
        MainMenu.SetActive(false);
        //Запускаем игру дальше
        Time.timeScale = 1;
    }
    //Метод для нажатия на кнопку exit
    public void CloseGame()
    {
        //Выключаем игру
        //Это не будет работать, пока вы
        //в редакторе, но скомпилированная игра
        //будет выключаться
        Application.Quit();
    }
}

Кроме метода Update, который ждет нажатия ESC, есть еще 2 метода для кнопок меню. Они будут работать при нажатии этих кнопок. Но для начала надо объяснить и настроить компонент камеры. В компоненте MainMenuController появилась строка "MainMenu". В ней будет храниться ссылка на наше главное меню.

Для этого нужно их Hierarchy перенести в Inspector(в котором выбрана наша камера), в это поле, MainMenu. Time.timeScale = 0 необходимо для того, чтоб все действия, которые задействуют Time.deltaTime остановились. Например, если бы мы сделали это в предыдущем уроке, то наш персонаж бы остановился(включая анимацию) на время паузы.

Теперь во время игры при нажатии на ESC открывается окно паузы, но кнопки не работают. Необходимо их настроить. Нажмем на кнопку Resume и в компоненте Button необходимо нажать на "+" в свойстве OnClick(). Появится новая запись, в эту новую запись необходимо перенести нашу камеру и вместо "No Function" выбрать наш скрипт и нужный метод. Получится вот так:

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

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

(5 оценок, среднее: 4,20 из 5)

Похожие новости