Создание мобильного управления в Unreal Engine 5

Настройка проекта и базовые принципы мобильного ввода в UE5

Добро пожаловать в курс по созданию мобильного управления в Unreal Engine 5! Это первая статья, и наша цель — заложить прочный фундамент. Многие новички совершают ошибку, пытаясь сразу создать сложные экранные джойстики, не настроив предварительно сам проект и не разобравшись, как движок воспринимает нажатия на экран.

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

Особенности мобильного ввода

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

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

* Мышь: Имеет курсор, который всегда находится в одной точке (X, Y). Нажатие — это событие в этой точке. * Мультитач (Multitouch): Экран телефона может отслеживать несколько нажатий одновременно. Каждое касание имеет свой уникальный идентификатор (Finger Index).

!Сравнение мультитач-ввода и ввода мышью: пальцы имеют индексы, мышь — только координаты курсора.

В Unreal Engine 5 мы будем использовать систему Enhanced Input, которая стала стандартом и отлично подходит для обработки таких сложных сценариев.

Шаг 1: Настройка проекта для мобильной платформы

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

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

Если вы создаете проект с нуля, в окне Project Defaults выберите следующие параметры:

Target Platform: Mobile

Quality Preset: Scalable (для большинства мобильных игр это лучший выбор, так как Maximum требует мощных устройств)

Настройка существующего проекта

Если проект уже создан, перейдите в настройки:

Откройте Edit -> Project Settings.

В разделе Project перейдите во вкладку Target Hardware.

Убедитесь, что выбрано Mobile / Tablet и Scalable.

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

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

Шаг 2: Эмуляция касаний мышью

Разрабатывать мобильную игру, постоянно скидывая билд на телефон (Build & Cook), очень долго. Нам нужно тестировать управление прямо в редакторе. Для этого мы научим движок воспринимать клик мыши как касание пальцем.

В Project Settings перейдите в раздел Engine -> Input.

Найдите категорию Mobile.

Поставьте галочку напротив Use Mouse for Touch.

> Важно: Эта настройка работает только в редакторе. На реальном устройстве она игнорируется, так как там есть настоящий тачскрин.

Теперь, когда вы запустите игру в окне Viewport, клик левой кнопкой мыши будет считаться касанием пальца с индексом 0 (Finger Index 0).

Шаг 3: Enhanced Input и мобильные устройства

Unreal Engine 5 использует систему Enhanced Input System (EIS). Это мощная прослойка между «железом» и логикой игры. Вместо того чтобы писать код «Если нажата кнопка A», мы говорим «Если сработало действие Jump».

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

Основные компоненты EIS:

Input Action (IA): Само действие (например, IA_Move, IA_Jump). Оно ничего не знает о кнопках, оно просто передает данные (например, вектор движения).

Input Mapping Context (IMC): Контекст, который связывает кнопки с действиями. Например, в контексте IMC_Default клавиша Space вызывает IA_Jump.

!Схема работы Enhanced Input: разные источники ввода объединяются в одно действие через контекст маппинга.

Шаг 4: Включение стандартного сенсорного интерфейса

В Unreal Engine есть встроенный механизм для быстрого создания мобильного управления — Touch Interface. Это те самые два кружочка (виртуальные стики), которые вы могли видеть в стандартных шаблонах.

Даже если в будущем мы захотим сделать свой уникальный дизайн кнопок, для начала работы и прототипирования стандартный интерфейс идеален. Он уже настроен на работу с Enhanced Input.

Как активировать виртуальные джойстики:

Откройте Project Settings -> Engine -> Input.

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

В поле Default Touch Interface выберите готовый ассет. Обычно он называется DefaultVirtualJoysticks (для двух стиков) или LeftVirtualJoystickOnly (только для движения).

Если вы запустите игру сейчас в режиме Mobile Preview, вы увидите эти джойстики.

Как запустить Mobile Preview:

Обычный запуск (Play in Editor) может не показать джойстики, если движок думает, что вы на ПК. Чтобы гарантированно увидеть результат:

Нажмите на три точки рядом с кнопкой Play на панели инструментов.

Выберите Mobile Preview ES3.1 (PIE).

Откроется отдельное окно, эмулирующее мобильное устройство. Там джойстики будут видны и функциональны.

Постоянное отображение джойстиков (для отладки)

Иногда неудобно каждый раз запускать отдельное окно Mobile Preview. Вы можете заставить джойстики появляться даже в обычном окне редактора.

Для этого в Project Settings -> Input поставьте галочку Always Show Touch Interface. Теперь джойстики будут видны всегда, даже если вы играете с клавиатуры. Это очень удобно для настройки их положения и размера.

Логика работы в Blueprint

Давайте посмотрим, как это выглядит в коде (Blueprint). Если вы используете шаблон Third Person Template, откройте блюпринт персонажа (BP_ThirdPersonCharacter).

Вы увидите событие IA_Move. Заметьте, там нет никакой проверки «это телефон или компьютер?». Логика едина:

Виртуальный джойстик, который мы включили в настройках, автоматически посылает значения в IA_Move, точно так же, как это делает физический геймпад. Ось Y джойстика передает движение вперед/назад, ось X — влево/вправо.

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

Резюме

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

Что мы сделали:

Переключили проект в режим Mobile / Scalable для корректной работы.

Включили Use Mouse for Touch, чтобы тестировать клики как касания.

Разобрали, что Enhanced Input позволяет использовать одну логику для всех устройств.

Активировали Default Touch Interface, чтобы получить базовое управление движением и камерой без написания кода.

В следующей статье мы пойдем дальше и научимся создавать свои собственные кнопки и виджеты, чтобы не зависеть от стандартных «кружочков» Unreal Engine, и разберем, как связывать UMG-виджеты с Input Actions.

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

В предыдущей статье мы настроили проект для мобильной разработки и активировали стандартный сенсорный интерфейс. Мы убедились, что Unreal Engine 5 способен обрабатывать касания и транслировать их в логику движения. Однако стандартные «кружочки» (DefaultVirtualJoysticks), которые предлагает движок, редко подходят для финальной версии игры. Они могут быть слишком маленькими, неудобно расположенными или просто не вписываться в визуальный стиль вашего проекта.

В этой статье мы углубимся в создание и настройку собственного ассета Touch Interface Setup. Мы разберем, как изменить внешний вид джойстиков, настроить их чувствительность, определить зоны срабатывания и связать их с системой Enhanced Input.

Понимание архитектуры Touch Interface

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

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

!Схема передачи данных от касания экрана до действия движения.

Шаг 1: Создание ассета Touch Interface

Чтобы не ломать стандартные настройки движка, мы создадим свой собственный конфигурационный файл.

В Content Browser нажмите правой кнопкой мыши.

Перейдите в категорию Miscellaneous (Разное).

Выберите Touch Interface Setup.

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

Открыв этот файл, вы увидите массив Controls. Именно здесь мы будем добавлять наши элементы управления. Для классического управления от третьего лица нам понадобятся два элемента: левый стик для движения и правый для вращения камеры.

Шаг 2: Настройка левого стика (Движение)

Добавьте новый элемент в массив Controls нажатием на «+». Раскройте свойства элемента. Давайте разберем самые важные параметры.

Визуальная составляющая (Image)

У джойстика есть два состояния изображения:

* Image: Это «подложка» или база джойстика, которая остается неподвижной. * Thumb: Это сам стик, который двигается за пальцем игрока.

Вам понадобятся текстуры. Для начала можно использовать стандартные текстуры движка (поищите по слову VirtualJoystick), но для своей игры лучше нарисовать круги в Photoshop или другом редакторе. Важно, чтобы изображения были с прозрачным фоном (PNG).

Позиционирование (Center)

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

Для левого стика стандартная позиция обычно находится в левом нижнем углу. Значения задаются так: * X: Расстояние от левого края. * Y: Расстояние от верхнего края.

Однако, чтобы джойстик был привязан к нижнему краю, часто используются отрицательные значения или большие положительные, зависящие от разрешения. В UE5 для адаптивности лучше ориентироваться на процентное соотношение, если вы используете UMG, но в Touch Interface мы часто оперируем конкретными смещениями.

Пример настройки для левого стика: * Center: X = 135, Y = -135 (Отрицательный Y часто означает отсчет от нижнего края в зависимости от настроек DPI, но в базовом Touch Interface часто приходится подбирать значения экспериментально, начиная с X: 0.15, Y: 0.85 если включен режим относительных координат, или использовать абсолютные пиксели).

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

Зоны взаимодействия (Interaction Size)

Это один из самых критичных параметров для удобства игрока (UX). Interaction Size определяет невидимую прямоугольную область вокруг центра джойстика, в которой движок будет регистрировать касания.

* Visual Size: Размер картинки (например, 100x100). * Interaction Size: Размер активной зоны (например, 400x400).

Если сделать Interaction Size слишком маленьким, игрок будет часто промахиваться мимо стика. Если слишком большим — он может случайно задеть стик, пытаясь нажать кнопку интерфейса.

Шаг 3: Привязка к Input Actions (Mapping)

Самый важный раздел — Input Key. Здесь мы говорим движку, какую кнопку геймпада эмулирует этот виртуальный стик.

Для движения персонажа мы обычно используем левый стик геймпада. Поэтому в поле Main Input Key выберите: Gamepad Left Thumbstick 2D-Axis.

Как это работает с Enhanced Input: В предыдущей статье мы настроили IA_Move. В вашем Input Mapping Context (IMC) должна быть связь: * Action: IA_Move * Key: Gamepad Left Thumbstick 2D-Axis

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

Шаг 4: Настройка правого стика (Камера)

Добавьте второй элемент в массив Controls.

Image / Thumb: Используйте те же текстуры или другие, если хотите визуально разделить стики.

Center: Нам нужно разместить его справа. Попробуйте значения, зеркальные левому стику относительно ширины экрана, или используйте большие значения X (например, X: -135 если система координат позволяет отсчет справа, но чаще приходится ставить X: 1800 для тестов или использовать настройки якорей).

Input Key: Выберите Gamepad Right Thumbstick 2D-Axis.

Убедитесь, что в вашем IMC действие IA_Look (или IA_Camera) привязано к Gamepad Right Thumbstick 2D-Axis.

Математика мертвых зон (Dead Zones)

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

В настройках Touch Interface есть параметр Thumb Size (размер активной области перемещения) и настройки скейлинга, но логику мертвой зоны часто обрабатывает сам Enhanced Input через Modifiers.

Однако, понимание того, как вычисляется ввод, полезно. Ввод джойстика — это вектор длиной от 0 до 1.

Длина вектора отклонения рассчитывается по формуле:

Где — итоговая сила нажатия (от 0 до 1), — отклонение по горизонтали, — отклонение по вертикали.

Если мы установим Dead Zone равной 0.2, то движок будет игнорировать любые значения, где . Это предотвращает «дрейф» персонажа при случайных микро-движениях пальца.

Продвинутые настройки: Плавающий джойстик

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

В стандартном ассете Touch Interface Setup есть опция Prevent Recenter (Предотвратить рецентровку).

* Если галочка снята (по умолчанию): Джойстик будет «прыгать» под палец игрока при касании в зоне взаимодействия, а при отпускании возвращаться в исходный центр. * Если галочка стоит: Джойстик жестко прибит к координатам Center.

Для реализации полноценного плавающего джойстика, который появляется в любой точке левой части экрана, стандартного Touch Interface может быть недостаточно, и часто приходится расширять Interaction Size левого стика на половину экрана, скрывая визуальную часть, пока не произойдет касание. Но для базовой настройки достаточно правильно задать зону взаимодействия.

Шаг 5: Активация нового интерфейса

После того как вы настроили ассет T_MyGameControls, его нужно назначить главным.

Откройте Project Settings -> Engine -> Input.

В разделе Mobile найдите Default Touch Interface.

Выберите ваш новый ассет T_MyGameControls.

Теперь запустите Mobile Preview. Вы должны увидеть ваши новые джойстики. Если они слишком большие или смещены, вернитесь в ассет и скорректируйте значения Visual Size и Center.

Решение типичных проблем

Джойстики перекрывают друг друга

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

Стик не возвращается в центр

Проверьте параметр Time Until Reset. Он определяет, сколько времени (в секундах) джойстик ждет после того, как палец убран, прежде чем сбросить значение в ноль. Обычно это значение должно быть очень маленьким (например, 0.1) или 0.

Задержка ввода

В разделе Input настроек проекта есть опция Touch Interface Adaptive Sensitivity. Иногда ее отключение делает управление более линейным и предсказуемым.

Заключение

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

Однако, игра состоит не только из бега. Нам нужны кнопки прыжка, стрельбы, перезарядки и открытия инвентаря. Стандартный Touch Interface позволяет добавлять кнопки (просто не назначая им оси X/Y), но его возможности по визуализации ограничены. В следующей статье мы перейдем к созданию гибридной системы: оставим джойстики на нативном уровне, но остальные кнопки реализуем через UMG Widgets, чтобы получить полный контроль над UI/UX дизайном.

Реализация вращения камеры через сенсорные жесты и свайпы

В предыдущих статьях мы настроили проект для мобильной разработки и создали виртуальные джойстики. Это классический подход: левый стик для бега, правый — для обзора. Однако в современных мобильных шутерах (например, Call of Duty Mobile или PUBG) часто используется гибридная схема: левая часть экрана отдана под джойстик движения, а вся правая половина экрана работает как сенсорная панель для вращения камеры.

В этой статье мы откажемся от правого виртуального джойстика и реализуем управление камерой через прямые свайпы по экрану. Мы разберем математику вычисления смещения (Delta), работу с индексами пальцев (Finger Index) и ограничение активной зоны ввода.

Принцип работы сенсорного обзора

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

Это изменение положения называется Дельта (Delta).

Математика свайпа

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

Где: * (Дельта) — вектор смещения, показывающий направление и скорость движения пальца. * — координаты касания в текущем кадре. * — координаты касания в предыдущем кадре.

!Иллюстрация вычисления вектора Delta при движении пальца по экрану.

Полученная затем передается в контроллер персонажа для вращения: * Смещение по X на экране поворачивает персонажа влево/вправо (Yaw). * Смещение по Y на экране поднимает или опускает камеру (Pitch).

Подготовка переменных

Для реализации этой логики в Blueprint нам понадобятся несколько переменных. Откройте блюпринт вашего персонажа (например, BP_ThirdPersonCharacter) и создайте следующие переменные:

TouchStartLocation (Vector 2D) — для хранения координат предыдущего кадра.

IsSwiping (Boolean) — флаг, указывающий, что игрок сейчас вращает камеру.

LookFingerIndex (Integer) — для запоминания, какой именно палец управляет камерой (чтобы не путать его с пальцем на джойстике движения).

LookSensitivity (Float) — чувствительность камеры. Установите значение по умолчанию, например, 1.0.

Реализация логики через InputTouch

Хотя Enhanced Input является стандартом, для понимания низкоуровневой работы с касаниями и зонами экрана мы используем событие InputTouch. Оно дает нам прямой доступ к координатам и фазам касания (Pressed, Moved, Released).

Шаг 1: Начало касания (Pressed)

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

Логика в блоке Pressed:

Получаем текущие координаты касания (Location).

Получаем размер экрана через ноду Get Viewport Size.

Проверяем: если касания больше, чем , значит, касание произошло в правой части.

Математически условие выглядит так:

Где: * — координата касания по горизонтали. * — ширина экрана в пикселях.

Если условие истинно: * Устанавливаем IsSwiping = True. * Записываем индекс пальца в LookFingerIndex. * Сохраняем текущую позицию в TouchStartLocation.

Шаг 2: Движение пальца (Moved)

Это основной этап, где происходит магия вращения. Этот блок выполняется каждый кадр, пока палец движется.

Логика в блоке Moved:

Проверяем, совпадает ли Finger Index события с нашим сохраненным LookFingerIndex. Это критически важно для мультитача!

Если индексы совпадают и IsSwiping истинно, вычисляем дельту.

Мы берем текущую позицию (Location) и вычитаем из нее TouchStartLocation. Затем применяем чувствительность:

Где: * — итоговое значение для вращения. * — текущая позиция пальца. * — сохраненная позиция (TouchStartLocation). * — чувствительность (LookSensitivity).

Полученные значения передаем в стандартные функции контроллера: * Add Controller Yaw Input (получает от результата). * Add Controller Pitch Input (получает от результата).

> Важно: После применения вращения обязательно обновите TouchStartLocation текущими координатами! Если этого не сделать, дельта будет расти с каждым кадром, и камера начнет вращаться с бешеной скоростью.

Шаг 3: Завершение касания (Released)

Когда игрок убирает палец, мы должны сбросить состояние.

Логика в блоке Released:

Проверяем, совпадает ли Finger Index с LookFingerIndex.

Если да, устанавливаем IsSwiping = False.

Инверсия оси Y

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

Чтобы реализовать это, достаточно умножить значение перед подачей в Add Controller Pitch Input на .

Где: * — итоговое значение для контроллера. * — смещение пальца по вертикали.

Проблема DPI и разрешения экранов

Разные телефоны имеют разную плотность пикселей (DPI). Свайп на 100 пикселей на старом телефоне может быть половиной экрана, а на современном 4K-дисплее — едва заметным движением.

Чтобы управление ощущалось одинаково на всех устройствах, рекомендуется нормализовать дельту относительно размера экрана или использовать DPI-скейлинг.

Простой способ нормализации:

Где: * — нормализованное значение. * — «сырое» значение в пикселях. * — ширина экрана. * — константа-множитель (например, 1000), чтобы вернуть значения в удобный диапазон.

Резюме

Мы реализовали систему свободного обзора, которая является стандартом для мобильных экшенов.

Ключевые моменты:

Мы разделили экран на зоны: левая для джойстика (автоматически), правая для свайпов (вручную).

Мы использовали Finger Index, чтобы различать пальцы в мультитаче.

Мы вычисляли Delta каждый кадр для плавного вращения.

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

Создание функциональных кнопок интерфейса UMG для прыжка и атаки

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

В этой статье мы отойдем от встроенного Touch Interface и погрузимся в мир UMG (Unreal Motion Graphics). Мы создадим собственные кнопки, настроим их расположение на экране и свяжем их с логикой персонажа.

Почему UMG, а не Touch Interface?

Вы можете спросить: «Почему бы просто не добавить еще пару кнопок в тот же файл конфигурации, где мы настраивали джойстики?». Это возможно, но UMG дает нам ряд преимуществ:

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

Позиционирование: UMG позволяет идеально настроить положение кнопок для разных соотношений сторон экранов (от квадратных планшетов до вытянутых телефонов).

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

Шаг 1: Создание виджета управления

Первым делом нам нужно создать контейнер для наших кнопок.

В Content Browser нажмите правой кнопкой мыши.

Перейдите в User Interface -> Widget Blueprint.

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

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

Откройте созданный файл. Вы попадете в редактор UMG. Первым делом найдите в палитре (Palette) элемент Canvas Panel и перетащите его в корень иерархии, если его там еще нет. Это наша «холст», на котором мы будем рисовать интерфейс.

Шаг 2: Верстка кнопок

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

Добавление кнопки Прыжка (Jump)

Найдите в палитре элемент Button и перетащите его на Canvas Panel.

В иерархии переименуйте его в Btn_Jump.

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

Чтобы добавить иконку, перетащите элемент Image поверх кнопки Btn_Jump.

!Схема расположения кнопок действий в правом нижнем углу с привязкой якорей.

Настройка Якорей (Anchors)

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

Выделите Btn_Jump.

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

Выберите якорь в правом нижнем углу (квадрат в нижнем правом углу меню).

Теперь координаты кнопки (Position X, Position Y) отсчитываются от правого нижнего угла экрана. Задайте значения, например: * Position X: -150 * Position Y: -150 * Size X / Y: 100 (чтобы кнопка была круглой и достаточно большой).

Добавление кнопки Атаки (Attack)

Повторите процесс для кнопки атаки (Btn_Attack). Разместите ее рядом с кнопкой прыжка, например, чуть левее и ниже (Position X: -280, Position Y: -80), чтобы создать эргономичную дугу.

Шаг 3: Настройка свойств кнопки

У стандартной кнопки в Unreal Engine есть свойство, которое может сломать мобильное управление — Is Focusable.

Если эта галочка стоит (по умолчанию True), то при нажатии на кнопку она «захватывает» фокус ввода. Это может привести к тому, что виртуальные джойстики перестанут реагировать, пока вы не нажмете в пустое место.

Обязательно: Выделите обе кнопки (Btn_Jump и Btn_Attack), найдите в Details параметр Is Focusable и снимите галочку (поставьте False).

Шаг 4: Программирование логики (Blueprint Graph)

Перейдите в режим редактирования графа (кнопка Graph в правом верхнем углу редактора виджетов).

Нам нужно обработать два события для каждой кнопки: нажатие и отпускание. Стандартное событие OnClicked срабатывает только при отпускании пальца, что создает ощущение задержки (input lag). Для мгновенной реакции в играх мы используем OnPressed.

Логика Прыжка

Выберите Btn_Jump в панели переменных (Variables).

Внизу панели Details найдите список событий (Events).

Нажмите «+» напротив On Pressed и On Released.

Теперь у нас есть два красных узла в графе. Нам нужно передать команду персонажу.

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

> Примечание: Частое использование Cast to (приведение типов) в Tick считается плохой практикой, но для нажатия кнопок это абсолютно допустимо и не влияет на производительность.

Логика Атаки

Для атаки процесс аналогичен, но вместо стандартной функции Jump мы будем вызывать наши собственные события, которые мы должны были создать в блюпринте персонажа (например, StartAttack и StopAttack).

Шаг 5: Визуальная обратная связь

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

В разделе Style у кнопки есть три состояния: * Normal — обычное состояние. * Hovered — когда курсор наведен (на мобильных это состояние редко используется, так как нет курсора). * Pressed — когда палец касается кнопки.

Настройте Pressed -> Tint, сделав его немного темнее (например, серым), чтобы игрок видел момент срабатывания.

Шаг 6: Добавление виджета на экран

Мы создали виджет, но игра про него еще не знает. Нам нужно создать его и добавить во Viewport при старте игры.

Откройте блюпринт вашего персонажа (BP_ThirdPersonCharacter) или контроллера (BP_PlayerController). Рекомендуется делать это в контроллере, но для простоты начнем с персонажа.

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

Добавьте следующую цепочку узлов:

Продвинутый метод: Enhanced Input Injection

Описанный выше метод с прямым вызовом функций (Jump) работает отлично, но он обходит систему Enhanced Input, которую мы настраивали в первых уроках. Если вы хотите, чтобы кнопка на экране работала идентично кнопке пробел на клавиатуре (активируя те же модификаторы и триггеры), нужно использовать Input Injection.

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

Решение проблемы мультитача

UMG по умолчанию поддерживает мультитач. Это значит, что вы можете бежать левым пальцем (джойстик), вращать камеру правым пальцем (свайп по экрану) и третьим пальцем нажать на прыжок.

Если вы правильно настроили Is Focusable = False и якоря, система будет работать стабильно. Единственный конфликт может возникнуть, если кнопка перекрывает зону свайпа камеры. Убедитесь, что между кнопками есть пространство, где игрок может просто вращать камеру, не задевая действия.

Резюме

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

Перемещение: Виртуальный джойстик (Native).

Обзор: Сенсорные свайпы (Custom Logic).

Действия: UMG кнопки (Widget Blueprint).

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

Оптимизация ввода и тестирование на мобильном устройстве

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

В этой финальной статье курса мы разберем, почему управление, идеально работающее в редакторе на ПК, может ощущаться «вязким» на телефоне, как бороться с задержкой ввода (Input Lag), что такое безопасные зоны экрана и как правильно использовать инструменты отладки Unreal Engine 5.

Проблема задержки ввода (Input Lag)

Мобильные устройства обладают меньшей вычислительной мощностью, чем ПК. Если ваша игра работает с низкой частотой кадров (FPS), управление будет казаться неотзывчивым. Игрок нажимает кнопку прыжка, а персонаж реагирует с заметной паузой.

Математика кадра

Задержка ввода напрямую зависит от времени, которое тратится на отрисовку одного кадра. Это время можно рассчитать по формуле:

Где:

— время одного кадра в миллисекундах (мс).

— количество миллисекунд в одной секунде.

— количество кадров в секунду (Frames Per Second).

Если ваша игра выдает 60 FPS, то задержка между вводом и отображением результата составляет примерно 16.6 мс. Если же FPS падает до 20, задержка возрастает до 50 мс. Для динамичного мобильного шутера или платформера это критично. Оптимизация графики — это, по сути, оптимизация управления.

Настройка приоритетов UMG

Одна из самых частых проблем при переносе игры на телефон — интерфейс блокирует управление. Вы пытаетесь повернуть камеру свайпом, но палец случайно задевает невидимый край виджета, и камера замирает.

Visibility: Hit Test Invisible

В Unreal Engine у каждого элемента UI есть свойство Visibility. По умолчанию для большинства контейнеров (например, Canvas Panel или Vertical Box) оно стоит в значении Self Hit Test Invisible или Visible.

* Visible: Элемент перехватывает касания. Если у вас есть прозрачная панель на весь экран, вы не сможете использовать виртуальные джойстики под ней. * Hit Test Invisible: Элемент игнорирует касания, пропуская их сквозь себя к игровому миру или джойстикам, но при этом остается видимым глазу.

Правило: Все декоративные элементы (рамки, иконки, фоны), которые не являются кнопками, должны иметь статус Hit Test Invisible или Self Hit Test Invisible. Это гарантирует, что интерфейс не будет «съедать» касания, предназначенные для управления персонажем.

Безопасные зоны (Safe Zones)

Современные смартфоны редко имеют идеально прямоугольные экраны. У них есть «челки» (вырезы под камеру), закругленные углы и системные панели управления снизу.

Если вы прижмете кнопку прыжка к самому краю экрана в редакторе, на iPhone или некоторых Android-устройствах она может оказаться под вырезом камеры или в зоне системного свайпа «Домой».

!Схема безопасной зоны (Safe Zone), исключающая вырезы и системные панели.

Использование Safe Zone Widget

Чтобы решить эту проблему, в UMG существует специальный виджет-контейнер Safe Zone.

Откройте ваш WBP_MobileHUD.

В иерархии найдите корневой элемент (обычно это Canvas Panel).

Оберните его (или критически важные элементы) в виджет Safe Zone (Right Click -> Wrap With -> Safe Zone).

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

Отладка касаний на устройстве

Когда вы запускаете игру на телефоне, вы не видите курсора мыши. Иногда сложно понять: игра не реагирует, потому что зависла, или потому что экран не зарегистрировал касание?

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

ShowDebug Touch

Эту команду можно выполнить через Blueprint (нода Execute Console Command) при старте уровня.

Что это дает: * В местах касания пальцев будут рисоваться цветные перекрестия. * Рядом с каждым касанием будет отображаться его Finger Index. * Вы увидите координаты касания .

Это незаменимый инструмент для отладки мультитача. Например, вы сможете увидеть, что джойстик движения захватывает Index 1, а кнопка прыжка — Index 2, и убедиться, что логика не путает их.

Профилирование производительности

Если управление кажется «ватным», нужно понять причину. Это может быть тяжелая графика (GPU) или сложная логика в блюпринтах (CPU).

Используйте команду:

stat unit

На экране появятся четыре значения времени в миллисекундах:

Frame: Общее время кадра.

Game: Время, затраченное на логику игры (Blueprints, физика, AI).

Draw: Время на подготовку сцены к отрисовке (Draw Calls).

GPU: Время, затраченное видеокартой на рендеринг пикселей.

Как анализировать: * Если Game самое большое число — оптимизируйте блюпринты (меньше Cast To в Tick, меньше сложных вычислений). * Если GPU самое большое — упрощайте материалы, уменьшайте разрешение текстур или количество полигонов.

Особенности мобильных жестов ОС

На многих современных телефонах свайп от края экрана используется операционной системой для действия «Назад» или переключения приложений. Это может конфликтовать с вашими джойстиками.

В Project Settings -> Android есть настройки, позволяющие перехватывать эти жесты или скрывать системные панели (Immersive Mode). Убедитесь, что ваша игра запускается в полноэкранном режиме, чтобы минимизировать случайные выходы в меню телефона во время активного боя.

Финальная сборка (Packaging)

Никогда не судите о производительности и отзывчивости управления, запуская игру через Launch (быстрый запуск) или в редакторе. Только полноценная сборка (Package Project) с конфигурацией Shipping покажет реальную картину.

В режиме Development или Debug движок тратит много ресурсов на сбор логов и отладочной информации, что создает ложное ощущение тормозов и задержек ввода.

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

Мы прошли полный цикл создания мобильного управления в Unreal Engine 5:

Настроили Enhanced Input для обработки касаний.

Создали виртуальные джойстики для передвижения.

Реализовали сенсорный обзор через математику дельты свайпа.

Сверстали UMG-интерфейс с кнопками действий.

Разобрали методы оптимизации и отладки.

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