Создание главного меню в Unreal Engine на Blueprints

Основы UMG: Создание визуального макета и иерархии виджетов

Добро пожаловать в курс «Создание главного меню в Unreal Engine на Blueprints». Это первая статья, в которой мы заложим фундамент вашего будущего интерфейса. Прежде чем мы начнем писать логику и заставлять кнопки работать, нам необходимо создать визуальную оболочку — то, что игрок увидит при запуске игры.

В Unreal Engine за создание пользовательских интерфейсов (UI) отвечает система UMG (Unreal Motion Graphics). Это мощный инструмент, который позволяет визуально конструировать меню, HUD (Heads-Up Display) и другие элементы интерфейса, а затем оживлять их с помощью Blueprints.

Что такое Widget Blueprint?

В основе любого интерфейса в UMG лежит Widget Blueprint. Это специальный тип ассета, который сочетает в себе две сущности:

Designer (Дизайнер): Визуальный редактор, где вы размещаете кнопки, текст, картинки и настраиваете их внешний вид.

Graph (Граф): Редактор логики на Blueprints, где вы определяете поведение элементов (что происходит при нажатии, наведении и т.д.).

В этой статье мы сосредоточимся на вкладке Designer.

Создание первого виджета

Начнем с практики. Чтобы создать меню, нам нужен пустой виджет.

Откройте ваш проект в Unreal Engine.

В Content Browser (Браузер контента) нажмите правой кнопкой мыши.

Перейдите в раздел User Interface и выберите Widget Blueprint.

В появившемся окне выберите User Widget.

Назовите файл WBP_MainMenu.

> Использование префикса WBP_ (Widget Blueprint) — это стандарт именования в Unreal Engine. Это помогает быстро находить нужные файлы в поиске и понимать тип ассета с первого взгляда.

Интерфейс редактора UMG

Дважды кликните по созданному файлу WBP_MainMenu. Перед вами откроется редактор виджетов. Давайте разберем его основные области.

!Основные зоны редактора UMG: Палитра, Иерархия, Дизайнер и Детали.

1. Palette (Палитра)

Находится слева. Здесь содержится список всех доступных элементов (виджетов), которые вы можете использовать: кнопки, текст, изображения, прогресс-бары и контейнеры. Вы просто перетаскиваете их отсюда на рабочую область.

2. Hierarchy (Иерархия)

Находится под палитрой. Это древовидная структура вашего интерфейса. В UMG действует правило вложенности: одни виджеты могут быть родителями для других. Например, текст может лежать внутри кнопки, а кнопка — внутри вертикального списка.

3. Designer (Дизайнер)

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

4. Details (Детали)

Находится справа. Здесь настраиваются свойства выделенного виджета: цвет, шрифт, прозрачность, привязки (Anchors) и события.

Основы верстки: Панели и Контейнеры

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

Canvas Panel (Холст)

Это корневой элемент большинства виджетов. Он позволяет размещать элементы в произвольных местах. Однако, если вы просто бросите кнопку в угол Canvas Panel, при изменении разрешения экрана она может «уехать» или исчезнуть.

Vertical Box и Horizontal Box

Это ваши лучшие друзья для создания списков.

* Vertical Box: Автоматически выстраивает вложенные элементы в столбик (сверху вниз). * Horizontal Box: Выстраивает элементы в строку (слева направо).

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

Магия Якорей (Anchors)

Это самая важная концепция для адаптивного интерфейса. Anchors (Якоря) определяют точку отсчета для положения виджета.

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

!Правильная настройка якорей гарантирует, что элемент останется на своем месте при любом разрешении экрана.

Как использовать якоря:

Выделите элемент в иерархии.

В панели Details найдите выпадающее меню Anchors.

Выберите точку, к которой должен «прилипать» элемент (например, центр экрана, правый угол или растяжение на весь экран).

Практика: Создаем структуру Главного меню

Давайте соберем простой, но правильный макет.

Шаг 1: Фон

Найдите в Palette виджет Image и перетащите его на Canvas Panel в иерархии.

В панели Details переименуйте его в img_Background.

В меню Anchors выберите правый нижний квадрат (растянуть на весь экран).

Установите параметры Offsets (Left, Top, Right, Bottom) в значение . Теперь изображение всегда будет занимать весь экран.

В разделе Appearance -> Brush -> Tint выберите темный цвет, чтобы имитировать фон.

Шаг 2: Контейнер для кнопок

Найдите Vertical Box и перетащите его на Canvas Panel.

Переименуйте в vb_Buttons.

Установите Anchors по центру левой стороны экрана или просто по центру.

Настройте Position X и Position Y, чтобы разместить меню там, где вам нравится.

Шаг 3: Добавление кнопок

Найдите Button и перетащите его ВНУТРЬ vb_Buttons.

Переименуйте кнопку в btn_StartGame.

Найдите Text и перетащите его ВНУТРЬ кнопки btn_StartGame.

В свойствах текста (Content -> Text) напишите «Начать игру».

Повторите шаг 3, чтобы создать кнопки «Настройки» (btn_Settings) и «Выход» (btn_Quit).

Шаг 4: Настройка отступов

Сейчас кнопки слиплись друг с другом. Чтобы это исправить:

Выделите кнопку btn_StartGame.

В панели Details найдите раздел Slot (Vertical Box Slot).

Раскройте Padding (Отступы).

Установите Bottom (Снизу) значение .

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

Иерархия и порядок отрисовки (Z-Order)

В UMG порядок отрисовки зависит от порядка в иерархии (Hierarchy). То, что находится ниже в списке, рисуется поверх остальных элементов.

Если вы случайно поместите img_Background ниже, чем vb_Buttons в списке иерархии, то фон перекроет ваши кнопки, и нажать на них будет невозможно. Всегда следите, чтобы фон был самым первым (верхним) элементом в списке детей Canvas Panel.

Заключение

Поздравляю! Вы создали визуальный макет главного меню. Он адаптивен, структурирован и готов к программированию. Мы изучили: * Как создавать Widget Blueprint. * Зачем нужны контейнеры Vertical Box. * Как работают якоря (Anchors). * Как настраивать иерархию виджетов.

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

> Для более глубокого изучения свойств виджетов вы можете обратиться к официальной документации Unreal Engine по UMG.

Логика Blueprints: Программирование кнопок «Новая игра» и «Выход»

Рад видеть вас во второй части курса «Создание главного меню в Unreal Engine на Blueprints». В предыдущей статье мы проделали отличную работу: создали визуальный стиль нашего меню, настроили адаптивность с помощью якорей и контейнеров. Но сейчас наш интерфейс — это просто красивая картинка. Если вы запустите игру, кнопки будут нажиматься, но ничего не произойдет.

Сегодня мы вдохнем жизнь в наш проект. Мы перейдем из режима дизайнера в режим программирования и создадим логику, которая позволит игроку начать путешествие или закрыть приложение. Мы будем работать с Blueprints — системой визуального скриптинга Unreal Engine.

Переход в режим Graph (Граф)

Откройте ваш ассет WBP_MainMenu. В правом верхнем углу редактора вы увидите две кнопки:

Designer (Дизайнер): Режим верстки (где мы были в прошлый раз).

Graph (Граф): Режим логики.

Нажмите на Graph. Интерфейс изменится. Вместо визуального макета вы увидите бесконечное поле в сетку — это Event Graph (Граф событий). Здесь мы будем соединять узлы (Nodes) проводами, определяя поведение программы.

Слева, на панели My Blueprint, найдите раздел Variables (Переменные). Вы увидите список ваших кнопок: btn_StartGame, btn_Quit и другие. Они появились здесь автоматически, потому что в режиме дизайнера у них стояла галочка Is Variable.

Программирование кнопки «Выход» (Quit)

Начнем с самого простого — кнопки выхода. Логика здесь линейна: «Когда нажата кнопка -> Закрыть игру».

Шаг 1: Создание события клика

Существует два способа создать событие клика:

* Способ А (через список переменных): В панели My Blueprint выберите btn_Quit. В панели Details (справа) прокрутите вниз до раздела Events и нажмите зеленый плюс напротив On Clicked. * Способ Б (через контекстное меню): Выделите btn_Quit в списке переменных, нажмите правую кнопку мыши Add Event On Clicked.

После этого в центре графа появится красный узел (Event Node) с названием On Clicked (btn_Quit).

Шаг 2: Добавление логики выхода

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

Нажмите левой кнопкой мыши на белый треугольник (пин выполнения) на узле On Clicked и потяните провод вправо.

Отпустите кнопку мыши. Появится меню поиска действий.

Введите в поиск Quit Game.

Выберите функцию Quit Game.

!Логическая связка для завершения работы приложения при нажатии кнопки.

Разбор узла Quit Game

У этого узла есть входной параметр Specific Player (Конкретный игрок). По умолчанию он может быть пустым, но хорошим тоном считается указание контроллера игрока.

Потяните провод от входа Specific Player влево.

В поиске введите Get Player Controller.

Выберите этот узел.

> Узел Get Player Controller возвращает ссылку на контроллер игрока. Индекс означает первого (локального) игрока. В одиночной игре это всегда вы.

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

Программирование кнопки «Новая игра» (Start Game)

Логика запуска игры подразумевает открытие нового уровня (карты). В Unreal Engine переход между частями игры (меню геймплей) обычно реализуется через загрузку другого уровня.

Шаг 1: Подготовка уровня

Убедитесь, что у вас есть уровень, который нужно запустить. Если его нет:

В Content Browser нажмите File New Level.

Выберите Basic.

Сохраните его в папку Maps под именем FirstLevel.

Шаг 2: Создание логики в виджете

Вернитесь в WBP_MainMenu.

Выберите btn_StartGame в списке переменных.

Добавьте событие On Clicked.

Потяните провод от красного узла события и найдите узел Open Level (by Name).

Шаг 3: Указание имени уровня

В узле Open Level (by Name) есть поле Level Name (фиолетового цвета). Сюда нужно вписать имя уровня в точности так, как оно написано в браузере контента.

* Если ваш уровень называется FirstLevel, напишите FirstLevel. * Если вы напишете firstlevel или First_Level, игра может не найти карту и просто перезагрузит текущую.

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

Отображение меню на экране

Мы запрограммировали кнопки, но если вы сейчас нажмете Play, меню не появится. Почему? Потому что мы создали чертеж (Blueprint) виджета, но не сказали игре создать его и показать игроку.

Эту логику нужно прописать в Level Blueprint того уровня, который является главным меню.

Шаг 1: Открытие Level Blueprint

Откройте уровень, который служит фоном для меню (назовем его MainMenuMap).

В верхней панели инструментов нажмите иконку чертежа (справа от кнопки Play) и выберите Open Level Blueprint.

Шаг 2: Событие BeginPlay

Нам нужно, чтобы меню появлялось сразу после старта. Для этого используется событие Event BeginPlay (оно уже должно быть на графе, если нет — найдите его через правую кнопку мыши).

Шаг 3: Создание виджета

От Event BeginPlay потяните провод и создайте узел Create Widget.

В поле Class выберите наш WBP_MainMenu.

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

Шаг 4: Добавление во Viewport

У узла Create Widget есть выходной параметр Return Value (синий пин). Это ссылка на только что созданный виджет.

Потяните от него провод и создайте узел Add to Viewport.

Соедините белые пины выполнения между Create Widget и Add to Viewport.

Теперь меню появится на экране!

Управление мышью и фокусом

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

Продолжаем работу в Level Blueprint, после узла Add to Viewport.

Шаг 1: Показать курсор

Нажмите правую кнопку мыши на свободном месте и добавьте узел Get Player Controller.

Потяните от него синий провод и найдите переменную Set Show Mouse Cursor.

Поставьте галочку (True) в этом узле.

Соедините белый пин выполнения от Add to Viewport к Set Show Mouse Cursor.

Шаг 2: Режим ввода (Input Mode)

По умолчанию Unreal Engine использует режим «Game Only» (только игра), где мышь управляет камерой. Для меню нам нужен режим «UI Only» (только интерфейс).

От узла Get Player Controller (можно использовать тот же самый) потяните провод и найдите узел Set Input Mode UI Only.

В поле In Widget to Focus подключите синий провод от Return Value узла Create Widget. Это скажет движку: «Переключи управление на интерфейс и сфокусируйся именно на этом меню».

Соедините цепочку выполнения.

!Итоговая логика уровня для корректного запуска главного меню.

Итоговая проверка

Давайте проверим, что у нас получилось:

Запустите игру (Play).

Вы должны увидеть ваше меню.

Курсор мыши должен быть виден сразу.

При нажатии на «Выход» игра закрывается (в редакторе это остановит симуляцию).

При нажатии на «Новая игра» открывается уровень FirstLevel.

Важное замечание про «Новую игру»

Когда вы нажимаете «Новая игра» и загружается уровень FirstLevel, настройки ввода (Input Mode) обычно сбрасываются на стандартные (Game Only), что нам и нужно для беготни персонажем. Однако курсор мыши может остаться на экране, если в логике персонажа не прописано его скрытие. Если курсор мешает в игре, добавьте в BeginPlay вашего персонажа или уровня FirstLevel узел Set Show Mouse Cursor (без галочки).

Заключение

Поздравляю! Вы создали полностью функциональное главное меню. Мы разобрали: * Как работать с событиями кнопок OnClicked. * Как использовать узлы Quit Game и Open Level. * Как правильно инициализировать интерфейс через Level Blueprint. * Зачем нужно переключать Input Mode.

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

Архитектура меню: Создание окна настроек и переключение между экранами

Добро пожаловать в третью часть курса «Создание главного меню в Unreal Engine на Blueprints». В предыдущих статьях мы научились верстать интерфейс и запрограммировали базовые кнопки для запуска уровня и выхода из игры. Однако современная игра немыслима без меню настроек.

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

Проблема множества виджетов

Когда новички сталкиваются с задачей создания подменю (например, «Настройки» или «Авторы»), они часто выбирают один из двух путей:

Создание отдельного уровня: Делают уровень MainMenu и уровень SettingsLevel. Это плохой подход, так как переключение вызывает экран загрузки.

Создание отдельных виджетов: Делают WBP_MainMenu и WBP_Settings. При нажатии кнопки один виджет удаляется из Viewport, а второй создается.

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

Мы пойдем профессиональным путем и используем Widget Switcher.

Что такое Widget Switcher?

Widget Switcher (Переключатель виджетов) — это специальный контейнер в UMG. Он работает как колода карт: вы можете положить в него сколько угодно панелей (страниц), но игрок видит только одну — ту, которая лежит сверху (активный индекс).

!Принцип работы Widget Switcher: отображается только один вложенный элемент за раз.

Это позволяет нам хранить всё меню (и главную страницу, и настройки, и титры) внутри одного файла WBP_MainMenu. Это упрощает логику и ускоряет работу.

Шаг 1: Реструктуризация макета

Откройте ваш WBP_MainMenu во вкладке Designer. Нам нужно немного изменить иерархию, которую мы создали в первой статье.

Сейчас у вас на Canvas Panel лежат: * img_Background (Фон) * vb_Buttons (Кнопки меню)

Мы хотим, чтобы фон оставался общим для всех экранов, а менялись только кнопки.

Найдите в Palette элемент Widget Switcher. Перетащите его на Canvas Panel.

Назовите его ws_Screens.

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

Важный момент: В панели Hierarchy перетащите ваш старый контейнер vb_Buttons ВНУТРЬ ws_Screens.

Теперь vb_Buttons стал «ребенком» переключателя. Обратите внимание, что у него исчезли настройки якорей — теперь его позиционированием управляет Switcher.

Шаг 2: Создание экрана настроек

Теперь в нашем переключателе есть одна страница (Индекс ). Давайте создадим вторую.

Найдите в Palette контейнер Canvas Panel (или Vertical Box, если хотите простой список) и перетащите его на ws_Screens.

Теперь внутри ws_Screens два элемента:

* vb_Buttons (Индекс ) * Canvas Panel (Индекс )

Переименуйте новую панель в pnl_Settings.

Верстка настроек

Выделите pnl_Settings. Сейчас он пуст. Давайте добавим туда кнопку «Назад», чтобы мы могли вернуться.

Перетащите Button внутрь pnl_Settings.

Назовите её btn_Back.

Добавьте внутрь кнопки Text с надписью «Назад».

Разместите кнопку в удобном месте (например, в левом нижнем углу), используя Anchors.

Добавьте текстовый блок с заголовком «НАСТРОЙКИ» в верхней части, чтобы мы понимали, где находимся.

> Совет: Чтобы увидеть, как выглядит второй экран в редакторе, выделите ws_Screens и в панели Details измените параметр Active Widget Index с на . Не забудьте вернуть его на перед сохранением!

Шаг 3: Логика переключения (Blueprint)

Макет готов. У нас есть «колода» из двух карт. Теперь научим кнопки переключать эти карты.

Перейдите в режим Graph.

Вход в настройки

В панели Variables выберите кнопку btn_Settings (которую мы создавали в прошлых уроках).

Добавьте событие On Clicked.

Перетащите переменную ws_Screens на граф (выберите Get).

Вытяните провод из ws_Screens и найдите узел Set Active Widget Index.

Соедините событие клика с этим узлом.

В поле Index установите значение .

Почему ? Потому что в иерархии pnl_Settings стоит вторым по счету (нумерация в программировании начинается с нуля).

Возврат в меню

Теперь запрограммируем кнопку «Назад».

Выберите btn_Back в переменных.

Добавьте событие On Clicked.

Снова используйте ws_Screens и узел Set Active Widget Index.

На этот раз в поле Index оставьте значение .

!Логика переключения экранов в Event Graph.

Тестирование

Нажмите Compile и Save. Запустите игру.

Вы видите главное меню.

Нажмите «Настройки». Кнопки меню должны исчезнуть, а заголовок «НАСТРОЙКИ» и кнопка «Назад» — появиться.

Нажмите «Назад». Вы должны вернуться в главное меню.

Обратите внимание: фон (img_Background) никуда не исчезал, потому что он лежит вне переключателя ws_Screens. Это создает ощущение целостности интерфейса.

Дополнительная полировка: Анимация (краткий обзор)

Widget Switcher переключает экраны мгновенно. Это нормально для простых игр, но иногда хочется плавности. Хотя Switcher не поддерживает плавные переходы «из коробки», вы можете имитировать их, используя Widget Animations.

Логика будет такой:

Нажали «Настройки» Проиграть анимацию исчезновения меню (Fade Out).

В конце анимации (событие OnAnimationFinished) Сменить индекс Switcher'а.

Проиграть анимацию появления настроек (Fade In).

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

Заключение

Поздравляю! Вы создали надежную архитектуру для вашего меню. Использование Widget Switcher — это «золотой стандарт» для создания вложенных меню в Unreal Engine.

Чему мы научились: * Избегать создания лишних файлов виджетов. * Использовать Widget Switcher для управления экранами. * Манипулировать видимостью элементов через индексы.

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

Интеграция в игру: Настройка GameMode и управление курсором мыши

Приветствую вас в четвертой части курса «Создание главного меню в Unreal Engine на Blueprints». Мы уже проделали большой путь: сверстали адаптивный макет, оживили кнопки и создали архитектуру с переключением экранов через Widget Switcher. Наш виджет WBP_MainMenu полностью готов к работе.

Однако, если вы помните, во второй статье мы использовали временное решение для отображения меню — прописали логику создания виджета прямо в Level Blueprint. Это работает, но в профессиональной разработке так не делают. Почему?

Масштабируемость: Если у вас будет десять разных уровней-меню, вам придется копировать код в каждый из них.

Чистота: Level Blueprint предназначен для скриптов, специфичных для конкретной карты (например, открытие двери или триггер катсцены), а не для управления системными интерфейсами.

Сегодня мы интегрируем наше меню в игру «по-взрослому», используя фундаментальные классы Unreal Engine: GameMode и PlayerController.

Теория: Кто здесь главный?

Прежде чем создавать файлы, давайте разберемся в иерархии классов. Unreal Engine — это сложная система, где у каждого актора своя роль.

!GameMode определяет правила игры и классы, которые будут использоваться при старте уровня.

GameMode (Режим игры)

GameMode — это свод правил. Он определяет условия победы, правила подсчета очков и, что самое важное для нас, указывает движку, какие классы использовать для игрока. Он говорит: «В этом уровне мы используем вот этого персонажа и вот этот контроллер».

Для главного меню нам нужен особый режим игры. В нем нет беготни, стрельбы и здоровья. Правило одно: «Игрок сидит и смотрит в интерфейс».

PlayerController (Контроллер игрока)

PlayerController — это «душа» игрока, его связь с миром. Он обрабатывает нажатия клавиш и движения мыши. Именно в контроллере настраивается видимость курсора.

Шаг 1: Создание специальных классов

Давайте создадим кастомные классы для нашего меню. Это позволит изолировать логику меню от логики самой игры.

Перейдите в папку с вашими Blueprints.

Нажмите правой кнопкой мыши Blueprint Class.

В окне выбора родительского класса выберите PlayerController.

Назовите его PC_MainMenu.

Снова нажмите правой кнопкой мыши Blueprint Class.

Выберите GameMode Base.

Назовите его GM_MainMenu.

Теперь у нас есть «мозги» (PC_MainMenu) и «правила» (GM_MainMenu) для нашего меню.

Шаг 2: Настройка курсора мыши

В прошлый раз мы включали курсор через узел Set Show Mouse Cursor в графе. Это рабочий метод, но если мы используем специальный контроллер, мы можем сделать это элегантнее — через настройки по умолчанию.

Откройте PC_MainMenu.

В панели Details (обычно справа) найдите раздел Mouse Interface.

Поставьте галочку напротив Show Mouse Cursor.

Также полезно включить Enable Click Events и Enable Mouse Over Events, чтобы кнопки корректно реагировали на наведение.

Теперь, как только этот контроллер вступит в игру, курсор появится автоматически. Никаких лишних проводов в графе!

Шаг 3: Перенос логики создания меню

Нам нужно, чтобы меню появлялось на экране сразу после запуска игры. Лучшее место для этого — событие BeginPlay внутри нашего нового GameMode.

Откройте GM_MainMenu.

Перейдите в Event Graph.

Найдите событие Event BeginPlay.

Повторите логику, которую мы писали ранее (или скопируйте её из Level Blueprint, если она там осталась):

* Создайте узел Create Widget. * В поле Class выберите WBP_MainMenu. * Из синего пина Return Value вытяните провод и добавьте Add to Viewport.

Настройка режима ввода (Input Mode)

Это критически важный момент. Нам нужно запретить камере вращаться и сфокусировать ввод только на кнопках.

После Add to Viewport добавьте узел Get Player Controller.

От него вытяните провод и найдите Set Input Mode UI Only.

Важно: В поле In Widget to Focus подключите синий провод от Create Widget. Это гарантирует, что фокус клавиатуры (например, для навигации стрелками) сразу попадет в меню.

Теперь ваш граф в GM_MainMenu должен выглядеть так: BeginPlay CreateWidget AddToViewport SetInputModeUIOnly.

Шаг 4: Связывание GameMode и PlayerController

Мы создали классы, но GM_MainMenu еще не знает, что он должен использовать именно PC_MainMenu.

Находясь в редакторе GM_MainMenu, посмотрите на панель Details.

Найдите раздел Classes.

В поле Player Controller Class выберите наш созданный PC_MainMenu.

В поле Default Pawn Class выберите None или SpectatorPawn. В меню нам не нужен физический персонаж, который может упасть сквозь пол.

Нажмите Compile и Save.

Шаг 5: Применение GameMode к уровню

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

Откройте ваш уровень с меню (MainMenuMap).

Очистите Level Blueprint от старой логики создания виджета, если она там осталась (иначе у вас будет два меню на экране).

В главном окне редактора перейдите на вкладку World Settings (Настройки мира). Обычно она находится рядом с панелью Details. Если её нет, включите через меню Window World Settings.

Найдите раздел Game Mode.

В выпадающем списке GameMode Override выберите GM_MainMenu.

!Панель World Settings позволяет переопределить режим игры для конкретного уровня, не затрагивая остальные карты.

Как только вы это сделаете, вы увидите, что поле Player Controller Class (чуть ниже, в серым цвете) автоматически изменилось на PC_MainMenu. Это значит, что подстановка сработала.

Тестирование и переход к геймплею

Нажмите Play. Если вы все сделали правильно:

Появится курсор (благодаря PC_MainMenu).

Появится меню (благодаря GM_MainMenu).

Камера не будет вращаться за мышью (благодаря Set Input Mode UI Only).

А что происходит при нажатии «Новая игра»?

Когда вы нажимаете кнопку «Новая игра», срабатывает узел Open Level, который загружает карту FirstLevel. В этот момент происходит магия Unreal Engine:

Старый уровень (MainMenuMap) выгружается.

Старый GameMode (GM_MainMenu) уничтожается.

Загружается новый уровень (FirstLevel).

Для него создается стандартный GameMode (или тот, который вы назначите для этого уровня).

Поскольку в стандартном GameMode используется стандартный контроллер (где Show Mouse Cursor = False), курсор исчезнет, и управление вернется к персонажу. Именно поэтому разделение логики через GameMode — это правильный архитектурный подход. Он автоматически «убирает за собой» настройки интерфейса при смене уровня.

Заключение

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

Что мы изучили: * Роль GameMode как набора правил для уровня. * Роль PlayerController в управлении мышью. * Как переопределять GameMode для конкретной карты через World Settings. * Как правильно управлять режимами ввода (UI Only vs Game Only).

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

Финальная полировка: Добавление анимаций интерфейса и звуковых эффектов

Добро пожаловать в заключительную часть курса «Создание главного меню в Unreal Engine на Blueprints». Мы прошли долгий путь: от пустого холста до полностью функциональной архитектуры с GameMode и Widget Switcher. Наше меню работает, переключает экраны и запускает игру. Но чего-то не хватает.

Запустите любую современную игру. Что вы чувствуете, когда наводите курсор на кнопку? Она может слегка увеличиваться, менять цвет или подсвечиваться. Когда вы нажимаете на неё, раздается приятный щелчок. Фоновая музыка создает настроение еще до того, как вы увидели первого врага.

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

Оживление интерфейса: Система анимаций UMG

Многие новички пытаются анимировать кнопки через сложную математику в Event Tick, меняя размер виджета каждый кадр. Это плохой подход: он нагружает процессор и сложен в настройке. В Unreal Engine встроен мощный инструмент для анимации интерфейсов, похожий на видеоредактор.

Панель Animations

Откройте WBP_MainMenu в режиме Designer. В левом нижнем углу (по умолчанию) находится вкладка Animations. Если её нет, перейдите в меню Window -> Animations.

Здесь мы создаем анимационные треки. Давайте сделаем так, чтобы кнопка «Начать игру» плавно увеличивалась при наведении курсора.

!Панель анимации в UMG позволяет создавать ключевые кадры для изменения свойств виджетов во времени.

Практика: Создание анимации наведения (Hover)

В панели Animations нажмите кнопку + Animation. Назовите новую анимацию anim_StartGame_Hover.

Выделите эту анимацию (она подсветится).

Теперь выберите саму кнопку btn_StartGame в иерархии или на визуальном макете.

В панели анимаций нажмите + Track и выберите btn_StartGame (или просто нажмите кнопку плюса напротив названия виджета, если она появилась автоматически).

Теперь нам нужно выбрать, что именно мы будем анимировать. Нажмите + Track напротив названия кнопки в списке анимации и выберите Transform.

> Важно: Свойство Transform содержит в себе позицию (Translation), поворот (Rotation) и масштаб (Scale). Для кнопок мы чаще всего используем Scale.

#### Настройка ключевых кадров (Keyframes)

Анимация строится на ключевых кадрах. Мы задаем начальное и конечное состояние, а движок сам просчитывает промежуточные значения.

Разверните список Transform -> Scale.

Переместите ползунок времени (Timeline) на отметку .

Нажмите маленькую круглую кнопку (Add Key) напротив Scale. Убедитесь, что значения X и Y равны .

Переместите ползунок времени на отметку (или для более медленной анимации).

Измените значения Scale X и Scale Y на (увеличение на 10%).

Нажмите Enter или кнопку добавления ключа.

Теперь, если вы подвигаете ползунок, вы увидите, как кнопка «дышит».

Программирование анимации в Blueprints

Анимация создана, но она не воспроизводится сама по себе. Нам нужно сказать движку: «Когда мышь наведена — играй вперед, когда убрана — играй назад».

Перейдите в режим Graph.

В панели Variables (слева) найдите категорию Animations. Там лежит ваша anim_StartGame_Hover.

Выберите кнопку btn_StartGame и добавьте два события: On Hovered (Наведено) и On Unhovered (Убрано).

Перетащите переменную anim_StartGame_Hover на граф (Get).

Вытяните из неё провод и найдите узел Play Animation.

#### Логика воспроизведения

Для события On Hovered: * Подключите Play Animation. * В настройках узла параметр Play Mode оставьте Forward (Вперед).

Для события On Unhovered: * Скопируйте узел Play Animation. * Подключите его к событию. * В параметре Play Mode выберите Reverse (Назад).

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

Звуковое оформление (Audio)

Звук — это половина восприятия. В интерфейсах используются два типа звуков:

SFX (Sound Effects): Короткие звуки кликов, наведения, ошибок.

Music: Фоновая композиция.

Для работы вам понадобятся аудиофайлы в формате .wav. Импортируйте их в проект простым перетаскиванием в Content Browser.

Способ 1: Простой (через Style)

У стандартной кнопки Unreal Engine есть встроенные настройки звука. Это самый быстрый способ добавить клики.

Выделите кнопку в режиме Designer.

В панели Details найдите раздел Appearance -> Style.

Разверните вкладки Pressed Sound (Звук нажатия) и Hovered Sound (Звук наведения).

Выберите нужные звуковые ассеты.

Минус: У вас нет контроля над громкостью или высотой тона (Pitch) для каждой конкретной кнопки, если только вы не настроите сам звуковой ассет (Sound Cue).

Способ 2: Гибкий (через Blueprints)

Если вы хотите большего контроля (например, случайное изменение высоты тона, чтобы клики не звучали как пулемет), используйте Blueprints.

В событии On Clicked вашей кнопки добавьте узел Play Sound 2D.

Выберите нужный звук.

> Почему 2D? В игре звуки обычно имеют позицию в пространстве (3D) — чем дальше источник, тем тише звук. Интерфейс же находится «в голове» игрока или на экране, поэтому он не должен зависеть от расстояния. Узел Play Sound 2D игнорирует позицию слушателя.

!Пример логики в Event Graph: реакция на наведение курсора и клик мыши.

Фоновая музыка

Музыка должна начинать играть, как только меню открывается. Лучшее место для этого — событие Construct (аналог BeginPlay, но для виджетов).

В Event Graph найдите событие Event Construct.

Добавьте узел Play Sound 2D (или Spawn Sound 2D, если вы хотите иметь возможность остановить музыку позже).

Выберите ваш музыкальный трек.

Проблема наложения музыки

Если вы запустите уровень, музыка заиграет. Но если вы нажмете «Начать игру» и перейдете на уровень, музыка из меню может продолжить играть или резко оборваться. А если вы вернетесь в меню, может запуститься вторая копия трека.

Чтобы сделать профессионально, музыку лучше запускать не в виджете, а в GameMode или создать специальный Music Manager, который существует постоянно (в GameInstance). Но для нашего текущего уровня достаточно использовать Spawn Sound 2D и сохранить результат в переменную.

Используйте Spawn Sound 2D вместо Play Sound 2D.

От синего пина Return Value нажмите правой кнопкой -> Promote to Variable. Назовите её MusicComponent.

Теперь у вас есть ссылка на играющую музыку.

При нажатии кнопки «Начать игру» (перед Open Level), возьмите MusicComponent и вызовите у него функцию Fade Out (Плавное затухание). Установите время затухания, например, (одна секунда).

Это создаст плавный переход от меню к геймплею.

Анимация появления меню (Fade In)

Чтобы меню не появлялось резко, как удар молотком, добавим анимацию прозрачности при старте.

Создайте новую анимацию anim_Intro.

Вместо того чтобы анимировать каждую кнопку отдельно, выберите корневой элемент (обычно это Canvas Panel или Widget Switcher).

Добавьте трек для этого элемента.

Добавьте свойство Render Opacity (Прозрачность отрисовки).

На времени установите значение (полностью прозрачно).

На времени установите значение (полностью видимо).

Теперь перейдите в граф:

На событии Event Construct добавьте узел Play Animation.

Выберите anim_Intro.

Теперь при запуске игры меню будет плавно «проявляться» из пустоты.

Итоговая полировка

Теперь ваш проект выглядит как настоящий продукт. Давайте проверим чек-лист:

* [x] Кнопки реагируют на наведение (Hover Animation). * [x] Кнопки издают звуки при нажатии (Click Sound). * [x] Фоновая музыка играет и плавно затухает при старте игры. * [x] Само меню появляется плавно (Intro Animation).

Совет по производительности

Не злоупотребляйте сложными анимациями с размытием (Blur) или динамическими материалами на мобильных платформах. Изменение Render Opacity и Transform — это самые дешевые операции для видеокарты.

Заключение курса

Поздравляю! Вы завершили курс по созданию главного меню в Unreal Engine. Мы начали с пустой папки и закончили профессиональной системой интерфейса.

Чему вы научились за этот курс:

UMG Designer: Верстка адаптивных макетов с использованием якорей и контейнеров.

Blueprint Logic: Программирование интерактивности, переходов между уровнями и выхода из игры.

Архитектура: Использование Widget Switcher для создания многостраничных меню без лишних файлов.

Системная интеграция: Настройка GameMode и PlayerController для правильного управления вводом.

Полировка: Добавление анимаций и звука для улучшения Game Feel.

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

Удачи в ваших будущих проектах, и пусть ваши Blueprints всегда компилируются без ошибок!