Как сделать главное меню игры в Unreal Engine (UE5)

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

В этом руководстве описано создание прототипа основного меню игры на Unreal Engine 5, но также подойдет и для более ранних версий движка, например UE4.

Эта статья является одной из четырех частей руководства, посвящённого созданию игровых меню в Unreal Engine 5:

1. Как сделать главное меню игры в Unreal Engine (UE5)
2. Как сделать меню настроек в Unreal Engine (UE5)
3. Как сделать меню выбора уровней в Unreal Engine (UE5)
4. Как сделать меню паузы игры в Unreal Engine (UE5)

Создание уровня для меню

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

К уровню, а точнее к его блюпринту (Level Blueprint) мы еще вернемся, но сначала необходимо создать кнопки и структуру меню в Widget Blueprint.

Создание класса кнопок

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

Я создал Blueprint Class унаследованный от родительского класса «Button» и назвал его «BP_Button».

А в самом блюпринте «BP_Button» я создал 3 переменных типа Button Style и назвал их «MouseStyle», «KeyNotSelected», «KeySelected», а затем задал цвета различных состояний кнопки: Normal; Hovered; Pressed.

Затем, в этом же блюпринте я создал 2 простых функции: «CheckFocus» и «Start». Первая функция определяет с помощью чего пользователь хочет нажать на кнопку и окрашивает в соответственный цвет — клавиатура \ геймпад или мышь. Это необходимо для поддержки ввода с клавиатуры и геймпада в меню, которой часто так не хватает и игрокам приходится пользоваться мышью для навигации в меню.

Функция «Start» создана для запуска «CheckFocus» каждую 0,1 с (зацикленно), но вы можете задать более частый запуск. Эта условность необходима для удобства — возможности вызова функции в любой части кода, а также я не хочу использовать Event Tick в меню, у которого проверка происходит раз в 0,008с, что значительно сказывается на оптимизации.

Создание меню (Widget Blueprint)

Для проектирования меню создается Widget Blueprint, в котором уже будет настраиваться функциональность и то, как будет выглядеть будущее меню. Я создал Widget Blueprint и назвал его «MainMenu_WBP»

В созданном блюпринте добавляем кнопки, для которых мы ранее создали класс (в моем случае, «BP_Button») и текст в них, обозначающий функции кнопок. Если обратить внимание на снимок экрана, то можно заметить, что я также использую Widget Switcher, который переключает холсты (Canvas) основного меню и настроек игры. Это создано для удобства и гибкости в будущем.

После этого необходимо перейти в граф и настроить только что созданное меню. Во вкладке переменных находятся кнопки, к которым требуется создать события (Events) по нажатию (On Clicked). Сделать это нужно с каждой функциональной кнопкой.

Теперь можно добавить действия, которые произойдут после нажатия на ту или иную кнопку. Кнопка Play в моем случае открывает новое меню выбора уровней, кнопка Settings открывает настройки игры, а кнопка Quit позволяет выйти из игры.

Для переключения между холстами используется нода Set Active Widget Index, к которой подключена переменная Widget Switcher.

Добавление меню на уровень

Меню готово, осталось добавить его на уровень созданный ранее. Для этого необходимо активировать камеру, которая расположена на уровне с помощью ноды Set View Target with Blend, а после создать меню и вывести его на экран: Create Widget — Add to Wieport. Последними узлами будет активация ввода в режиме интерфейса и включение курсора мыши для пользователя: Set Input Mode UI Only — Show Mouse Cursor (ON).

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

Great Creator