Создание игрового меню

В данной статье мы рассмотрим создание игрового меню на движке Unity

Описание

Наше главное меню будет состоять из трёх кнопок.

1. «Начать Игру» - запускает сцену с игрой.
2. «Настройки» - закрывает область с кнопками, и открывает область с настройками. В открытом окне с настройками будет находиться кнопка «Возврат в главное меню», которая закрывает область настроек и открывает область главного меню.
3. «Выход» - закрывает игру.

Для начала создадим игровой объект типа UI – Canvas, где и будут располагаться все элементы нашего интерфейса. Далее настраиваем наш Canvas в окне Inspector следующим образом:

1. В поле Render Mode выбираем Screen Space – Camera. Это нужно, чтобы наш канвас привязать к нашей игровой камере.
2. В поле Render Camera перетаскиваем объект нашей камеры из окна Hierarchy.
3. В поле UI Scale Mode выбираем Scale With Screen Size.
4. В поле Reference Resolution указываем Х=1920 Y=1080. Если Вы создаёте игру для мобильных устройств, то установите Х=1080 Y=1920

Далее создадим ещё 2 игровых объекта типа UI – Image, Первый объект будет служить фоном игрового меню. Назовём его Background. А второй объект будет фоном для области с настройками. Назовём его FonOptions. Поместим их внутрь канваса, и настроим их в окне Inspector.

1. В поле Source Image перетаскиваем наши фоновые изображения (Background и fonOptions).
2. Устанавливаем необходимые размеры Width и Height у компонента Rect Transform. Для объекта Background это 1920x1080. А для FonOptions укажите такие значения, которые удобны для Вас.

Далее создадим 4 кнопки: «Начать игру», «Настройки», «Выход», и «Возврат в главное меню». Для этого создаём 4 игровых объекта типа UI – Button. Назовём их BtnStart, BtnOptions, BtnEnd, и BtnReturn. Настраиваем кнопки в поле Inspector следующим образом:

1. В поле Source Image перетаскиваем изображения наших кнопок из окна Project.(Start, options, exit, return) .
2. В поле Preserve Aspect поставьте галочку, чтобы изображение стало пропорциональным по сторонам.

Остался последний штрих. Сейчас необходимо сгруппировать две наши области. Первая область будет включать в себя все 3 кнопки. Вторая область будет включать в себя область настроек, вместе с кнопкой возврата в главное меню.

Для создания таких областей создадим 2 новых и пустых игровых объекта. Назовём их Area1 и Area2.

В первый игровой объект перетащим 3 кнопки(BtnStart, BtnOptions, BtnEnd). А во второй игровой объект перетащим одну кнопку(BtnReturn) и фоновую картинку(FonOptions). Объект Area2 временно отключим в окне Inspector, сняв галочку с объекта.

Программная часть

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

Кнопка «Начать Игру»

Кнопка «Начать Игру» должна запускать сцену с игрой. Для этого создадим C# скрипт с названием, например, StartGame, и пропишем в него следующий код.

using UnityEngine;
using UnityEngine.SceneManagement;

public class StartGame : MonoBehaviour
{
    public void StartGame()
    {
        SceneManager.LoadScene("Game");
    }
}

Код для кнопки «Начать Игру» готов! Обязательно убедитесь, что у вас имеется сцена с названием Game.

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

1. Добавить в объект нашей кнопки BtnStart данный скрипт.
2. В поле On Click() Выбираем наш метод StartGame()

Теперь создаём C# скрипт для кнопки «Выход», назовём его ExitGame, и пропишем в него следующий код.

using UnityEngine;
using UnityEngine.SceneManagement;

public class ExitGame : MonoBehaviour
{
    public void ExitGame()
    {
        Application.Quit();
    }
}

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

1. Добавить в объект нашей кнопки BtnEnd данный скрипт.
2. В поле On Click() Выбираем наш метод ExitGame()

Кнопка «Настройки» должна закрывать область(объект Area1) с тремя основными кнопками, и открывать область(объект Area2) с настройками. Здесь нам не нужно писать какие-либо скрипты, всё уже написано за нас. Осталось их просто подключить. Для этого выполняем следующие действия:

1. В окне Hierarchy выбираем объект нашей кнопки настроек BtnOptions
2. В окне Inspector, в поле On Click() создаём событие, выбрав GameObject – Set Active (bool). Перетаскиваем В данное поле объект Area1. ГАЛОЧКУ НЕ СТАВИМ!
3. Здесь же, создаём второе событие, только перемещать будем объект Area2. ГАЛОЧКУ СТАВИМ!

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

1. В окне Hierarchy выбираем объект нашей кнопки возврата BtnReturn
2. В окне Inspector, в поле On Click() создаём событие, выбрав GameObject – Set Active (bool). Перетаскиваем В данное поле объект Area1. ГАЛОЧКУ СТАВИМ!
3. Здесь же, создаём второе событие, только перемещать будем объект Area2. ГАЛОЧКУ НЕ СТАВИМ!

Наше меню полностью готово! Если вам понравилась статья, буду рад вашим лайкам.