Мобильное управление в Unreal Engine 5 на Blueprints

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

1. Настройка проекта и основы Enhanced Input для мобильных устройств

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

Добро пожаловать на курс «Мобильное управление в Unreal Engine 5 на Blueprints». Это первая статья, в которой мы заложим фундамент для создания отзывчивого и удобного управления для мобильных игр. Мы не просто добавим кнопки на экран, а разберем современный стандарт ввода в Unreal Engine — Enhanced Input, и научимся правильно настраивать проект под Android и iOS.

Почему именно Enhanced Input?

В старых версиях Unreal Engine использовалась система ввода, жестко привязанная к настройкам проекта (Project Settings -> Input). Она была простой, но негибкой. С выходом Unreal Engine 5 стандартом стала система Enhanced Input.

Ее главные преимущества для мобильной разработки:

* Модульность: Вы можете менять схемы управления на лету (например, когда персонаж садится в машину, управление меняется с пешего на транспортное). * Фильтрация: Система сама обрабатывает «мертвые зоны» (deadzones) джойстиков и инверсию осей. * Универсальность: Один и тот же код может работать и от виртуального джойстика на экране телефона, и от физического геймпада, подключенного по Bluetooth.

!Архитектура Enhanced Input: связь физического ввода с игровыми действиями через контексты.

Шаг 1: Правильная настройка проекта

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

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

При создании нового проекта в Unreal Engine 5 выберите шаблон Third Person (Третье лицо) или Top Down (Вид сверху), так как они уже содержат базовые настройки движения. В панели настроек справа выберите:

  • Target Platform: Mobile
  • Quality Preset: Scalable
  • Если вы уже создали проект, эти настройки можно изменить через Project Settings -> Target Hardware.

    Настройка сенсорного ввода

    По умолчанию Unreal Engine может не отображать курсор или касания так, как мы ожидаем. Убедитесь в следующих настройках:

  • Откройте Project Settings.
  • Перейдите в раздел Engine -> Input.
  • Найдите категорию Mobile.
  • Убедитесь, что галочка Always Show Touch Interface включена (если вы хотите видеть стандартные виртуальные джойстики сразу).
  • В поле Default Touch Interface должен быть выбран стандартный ассет (обычно DefaultVirtualJoysticks).
  • Шаг 2: Основные компоненты Enhanced Input

    Система состоит из четырех основных элементов. Давайте разберем их на примере создания управления для движения персонажа.

    1. Input Action (IA)

    Это «смысл» действия. Это то, что делает персонаж, без привязки к тому, как он это делает. Например: «Прыжок», «Движение», «Атака».

    Для движения нам нужно действие, которое возвращает вектор (направление и силу).

    * Создайте папку Input в Content Browser. * Нажмите ПКМ -> Input -> Input Action. * Назовите его IA_Move. * Внутри ассета в поле Value Type выберите Axis2D (Vector2D). Это важно, так как джойстик выдает координаты X и Y.

    2. Input Mapping Context (IMC)

    Это «карта» или «словарь», который связывает физические кнопки с нашими Input Actions. Именно здесь мы скажем движку: «Виртуальный левый джойстик должен вызывать IA_Move».

    * Нажмите ПКМ -> Input -> Input Mapping Context. * Назовите его IMC_Default. * Откройте его и нажмите «+» в разделе Mappings. * Выберите созданный ранее IA_Move. * В выпадающем списке клавиш (Key) найдите Gamepad Left Thumbstick 2D-Axis.

    > Важно: В Unreal Engine стандартный виртуальный джойстик для мобильных устройств эмулирует поведение физического геймпада. Поэтому мы выбираем Gamepad Left Thumbstick, а не Touch 1 или Touch 2.

    3. Modifiers (Модификаторы)

    Модификаторы изменяют входящие данные до того, как они попадут в блюпринт. Это полезно для создания «мертвых зон».

    В IMC_Default разверните настройки для IA_Move и добавьте модификатор Dead Zone. Это предотвратит случайное движение персонажа, если палец игрока лишь слегка дрогнет на экране.

    Математически это работает как отсечение значений вектора, длина которого меньше заданного порога:

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

    4. Triggers (Триггеры)

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

    Шаг 3: Активация управления в Blueprints

    Создание ассетов — это только половина дела. Теперь нужно сказать персонажу использовать этот контекст (IMC_Default).

    Откройте блюпринт вашего персонажа (например, BP_ThirdPersonCharacter) и найдите событие BeginPlay.

    Логика подключения выглядит так:

  • Получаем контроллер персонажа (Get Controller).
  • Приводим его к Player Controller (Cast To PlayerController).
  • Из него получаем подсистему ввода: Enhanced Input Local Player Subsystem.
  • Вызываем функцию Add Mapping Context.
  • Пример логики на псевдокоде:

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

    Шаг 4: Обработка движения

    Теперь, когда контекст активирован, мы можем использовать событие IA_Move в Event Graph персонажа.

  • Нажмите ПКМ в графе и найдите IA_Move (в разделе Enhanced Action Events).
  • У ноды будет выход Action Value (синего цвета, так как это Vector2D).
  • Разделите этот пин (Split Struct Pin) или используйте Break Vector 2D, чтобы получить X и Y.
  • Для движения персонажа обычно используются функции Add Movement Input:

    * Значение X от джойстика подаем в Add Movement Input (World Direction: Forward Vector камеры или актора). * Значение Y от джойстика подаем в Add Movement Input (World Direction: Right Vector камеры или актора).

    !Пример реализации логики движения в Blueprints с использованием Enhanced Input.

    Особенности мобильных джойстиков

    Виртуальные джойстики в Unreal Engine — это отдельная сущность, называемая Touch Interface Setup. Это ассет, который определяет, где на экране находятся круги джойстиков и какие кнопки геймпада они эмулируют.

    По умолчанию UE5 использует ассет, где: * Левый виртуальный стик -> Gamepad Left Thumbstick * Правый виртуальный стик -> Gamepad Right Thumbstick

    Именно поэтому в настройках IMC мы выбирали Gamepad Left Thumbstick. Если вы захотите изменить внешний вид джойстиков (поменять картинки кружков), вам нужно будет создать свой ассет Touch Interface Setup и назначить его в Project Settings.

    Заключение

    Мы настроили базу: перевели проект на мобильные рельсы, разобрались с архитектурой Enhanced Input и активировали её в блюпринте. В следующей статье мы углубимся в создание кастомных виртуальных кнопок и взаимодействие с UI, чтобы сделать управление по-настоящему удобным.

    Теперь проверьте свои знания с помощью небольшого теста ниже.

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

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

    В предыдущей статье мы настроили фундамент нашей системы управления: активировали Enhanced Input, создали действия ввода (IA_Move) и контекст маппинга (IMC_Default). Мы узнали, что виртуальные джойстики в Unreal Engine эмулируют физический геймпад. Теперь пришло время взять этот процесс под полный контроль.

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

    Что такое Touch Interface Setup?

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

    Почему это важно? Потому что этот метод наиболее производителен и глубоко интегрирован в движок. Когда вы касаетесь экрана в зоне действия такого джойстика, движок автоматически рассчитывает вектор отклонения и отправляет его в систему ввода как Gamepad Left Thumbstick или Gamepad Right Thumbstick.

    Создание ассета интерфейса

    Давайте создадим наш собственный интерфейс управления.

  • В Content Browser перейдите в папку, где вы храните настройки ввода (например, Input).
  • Нажмите ПКМ -> User Interface -> Touch Interface Setup.
  • Назовите ассет TIS_MobileControls.
  • Открыв этот ассет, вы увидите пустой список Controls. Каждый элемент этого массива — это отдельный элемент управления на экране (стик или кнопка). Для полноценного управления нам обычно нужны два стика: левый для ходьбы и правый для поворота камеры.

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

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

    1. Визуальная часть (Image)

    Здесь мы задаем текстуры. У джойстика есть две составные части: * Image: Это «база» или подложка джойстика (фон). * Thumb: Это «шляпка» или подвижная часть, которую игрок тянет пальцем.

    Вы можете нарисовать свои текстуры в Photoshop или использовать стандартные из движка (VirtualJoystick_Background и VirtualJoystick_Thumb).

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

    2. Привязка к Input (Main Input Key)

    Это самый важный параметр. Он определяет, какую кнопку геймпада будет «нажимать» этот виртуальный стик.

    Так как в прошлой статье в IMC_Default мы привязали действие IA_Move к Gamepad Left Thumbstick 2D-Axis, здесь мы обязаны выбрать то же самое значение:

    * Main Input Key: Gamepad Left Thumbstick 2D-Axis

    Если вы выберете здесь что-то другое (например, Touch 1), связь с Enhanced Input разорвется, и персонаж не сдвинется с места.

    3. Позиционирование и размеры

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

    * Center: Координаты центра джойстика на экране. Значения задаются в относительных единицах или пикселях (в зависимости от настроек, но чаще всего это доля от экрана или смещение). * Для левого стика стандартное значение: , . Отрицательный Y означает отсчет от нижнего края экрана вверх. * Visual Size: Размер отрисовки джойстика (например, ). * Interaction Size: Зона, в которой джойстик реагирует на касание. Она должна быть больше визуального размера, чтобы игроку было легче попасть пальцем. Рекомендуется ставить значения вроде или даже больше.

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

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

    Понимание того, как движок превращает касание в число, поможет вам настроить чувствительность.

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

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

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

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

    Для управления камерой нам нужен второй стик. Добавьте еще один элемент в массив Controls.

  • Image / Thumb: Используйте те же текстуры.
  • Main Input Key: Выберите Gamepad Right Thumbstick 2D-Axis (или то, что вы настроили для обзора в вашем IMC).
  • Center: Нам нужно разместить его справа. Для этого используем отрицательное значение X (отсчет от правого края) и отрицательное Y (отсчет снизу).
  • * Пример: , .

    Продвинутые настройки поведения

    В Touch Interface Setup есть параметры, влияющие на удобство использования (UX).

    Prevent Recoil (Предотвращение отдачи)

    Этот параметр определяет, возвращается ли стик в центр мгновенно, когда игрок отпускает палец, или значение затухает плавно. Для четкого управления движением (особенно в платформерах) лучше, чтобы стик сбрасывался мгновенно. Однако параметр Time until reset позволяет настроить задержку исчезновения джойстика, если вы используете динамическое появление.

    Virtual Joystick Visibility

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

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

    Мы создали ассет TIS_MobileControls, но игра все еще использует стандартный. Есть два способа это исправить.

    Способ 1: Глобально через настройки проекта

    Это самый простой метод, если управление не меняется на протяжении всей игры.

  • Откройте Project Settings.
  • Перейдите в Engine - Input.
  • В категории Mobile найдите Default Touch Interface.
  • Выберите ваш ассет TIS_MobileControls.
  • Способ 2: Динамически через Blueprints

    Этот метод нужен, если, например, персонаж садится в машину, и вам нужно сменить два стика на руль и педали (другой Touch Interface).

    В блюпринте вашего PlayerController (или персонажа) используйте ноду Activate Touch Interface.

    Логика следующая:

  • Получите ссылку на Player Controller.
  • Вызовите от него функцию Activate Touch Interface.
  • В поле New Touch Interface выберите ваш ассет.
  • Чтобы убрать джойстики с экрана (например, в меню или катсцене), вызовите эту же функцию, но оставьте поле New Touch Interface пустым (None).

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

    Проблема: Джойстик перехватывает нажатия кнопок UI

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

    Решение: Включите отладку сенсорного ввода. В консоли (клавиша ~ во время игры на устройстве или в симуляторе) введите команду:

    ShowDebug Touch

    Это покажет реальные границы зон взаимодействия. Уменьшите Interaction Size или отодвиньте джойстик.

    Проблема: Стик «залипает» при выходе пальца за экран

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

    Решение: Убедитесь, что джойстики расположены с достаточным отступом от краев экрана (Safe Zone). Обычно отступа в 50-100 пикселей достаточно.

    Заключение

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

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

    3. Реализация сенсорных жестов: вращение камеры, свайпы и масштабирование

    Реализация сенсорных жестов: вращение камеры, свайпы и масштабирование

    В предыдущих статьях мы настроили Enhanced Input и создали кастомные виртуальные джойстики. Теперь наш персонаж может ходить и осматриваться, используя эмуляцию геймпада. Однако современные мобильные игры требуют большего. Игроки привыкли взаимодействовать с экраном напрямую: сводить пальцы для зума (pinch-to-zoom), делать резкие свайпы для уклонения или вращать камеру, касаясь любой свободной точки экрана.

    В этой статье мы выйдем за рамки стандартных джойстиков и реализуем полноценную систему распознавания жестов, используя комбинацию Enhanced Input и событий Input Touch.

    Вращение камеры без джойстика

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

    Настройка Enhanced Input для свободного обзора

    Самый простой способ реализовать это — использовать действие IA_Look, которое мы создали ранее, но изменить его привязку.

  • Откройте ваш Input Mapping Context (IMC_Default).
  • Найдите действие IA_Look.
  • Добавьте новую привязку клавиши: Touch 1.
  • Добавьте к этой привязке модификатор Scalar.
  • Почему Touch 1? В Unreal Engine этот ввод отслеживает положение первого касания. Однако нам нужно не положение, а смещение (дельта). К сожалению, Touch 1 передает абсолютные координаты экрана.

    Чтобы получить смещение, мы пойдем другим путем. Unreal Engine по умолчанию эмулирует мышь при одиночном касании. Поэтому, если в настройках проекта (Project Settings -> Input -> Mobile) включена опция Use Mouse for Touch, мы можем использовать привязку Mouse XY 2D-Axis.

    Если же мы хотим полного контроля, мы реализуем логику в Blueprints через событие InputTouch.

    Логика свободного вращения в Blueprints

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

    !Разделение зон ответственности экрана: левая для джойстика, правая для вращения камеры.

    В BP_ThirdPersonCharacter найдите событие InputTouch.

    Нам понадобятся две переменные: * LastTouchLocation (Vector2D) — хранит координаты касания в предыдущем кадре. * IsRotating (Boolean) — флаг, указывающий, что мы сейчас вращаем камеру.

    Логика следующая:

  • Pressed (Нажатие): Записываем текущие координаты пальца в LastTouchLocation. Устанавливаем IsRotating = True.
  • Moved (Движение):
  • * Берем текущие координаты Location. * Вычисляем дельту (разницу) между текущими координатами и LastTouchLocation. * Добавляем эту дельту к Add Controller Yaw Input (для X) и Add Controller Pitch Input (для Y). * Обновляем LastTouchLocation новыми координатами.
  • Released (Отпускание): Сбрасываем IsRotating = False.
  • Математически смещение (дельта) вычисляется так:

    Где — вектор смещения, который мы подаем на вход контроллера, — текущая позиция пальца, а — позиция пальца в прошлом кадре.

    > Важно: Не забудьте умножить полученное значение на коэффициент чувствительности (например, 0.1), иначе камера будет вращаться слишком быстро.

    Масштабирование (Pinch-to-Zoom)

    Жест «щипок» требует отслеживания двух пальцев одновременно. Enhanced Input пока не имеет встроенного «жеста» для зума, поэтому мы реализуем это математически.

    Алгоритм работы

  • Нам нужно знать координаты двух касаний: Finger 1 и Finger 2.
  • В каждом кадре мы вычисляем расстояние между этими двумя точками.
  • Сравниваем текущее расстояние с расстоянием в предыдущем кадре.
  • Если расстояние увеличилось — приближаем камеру (уменьшаем TargetArmLength). Если уменьшилось — отдаляем.
  • Реализация в Blueprints

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

    Нам нужно хранить координаты двух пальцев. Создайте Map (Словарь) переменных или две отдельные переменные Finger1_Loc и Finger2_Loc.

    Формула расстояния между двумя точками на плоскости (Евклидово расстояние):

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

    В Blueprints это делается нодой Distance (Vector2D).

    Логика зума:

  • Вычисляем CurrentDistance (текущее расстояние).
  • Вычисляем разницу: ZoomDelta = CurrentDistance - PreviousDistance.
  • Вычитаем ZoomDelta из длины SpringArm (компонент, держащий камеру).
  • !Принцип работы жеста Pinch-to-Zoom: изменение расстояния между точками касания.

    Реализация свайпов (Swipes)

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

    Для определения свайпа нам нужно проверить два условия:

  • Расстояние: Палец прошел достаточное расстояние по экрану (чтобы отличить свайп от случайного касания).
  • Время: Движение было быстрым (обычно менее 0.2–0.3 секунды).
  • Пошаговая логика

  • On Pressed:
  • * Запоминаем точку старта: StartLocation. * Запоминаем время старта: StartTime (используйте Get Real Time Seconds).

  • On Released:
  • * Вычисляем вектор свайпа: . * Проверяем длину вектора (Length). Если она больше порога (например, 50 пикселей), идем дальше. * Проверяем время: CurrentTime - StartTime. Если оно меньше 0.3 секунды, это свайп.

    Определение направления

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

    Однако проще всего сравнить модули (абсолютные значения) координат X и Y вектора свайпа.

    Где — модуль смещения по горизонтали, а — модуль смещения по вертикали. Если смещение по X больше, чем по Y, значит движение было преимущественно горизонтальным.

    Далее проверяем знак: * Если — Свайп вправо. * Если — Свайп влево.

    Конфликты управления

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

    Чтобы избежать этого, используйте State Machine (Машину состояний) или простые булевы флаги:

    * Если обнаружено два пальца — блокируем вращение камеры (IsZooming = True). * Если свайп распознан — отменяем обычное движение камеры.

    Заключение

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

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

    4. Разработка экранного интерфейса (UMG) для прыжков и взаимодействия

    Разработка экранного интерфейса (UMG) для прыжков и взаимодействия

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

    В этой статье мы разберем, как создать удобный графический интерфейс (HUD) с помощью UMG (Unreal Motion Graphics), который будет корректно работать на сенсорных экранах, не конфликтуя с нашими джойстиками и жестами.

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

    В статье про джойстики мы использовали ассет Touch Interface Setup. Он идеально подходит для аналогового ввода (стиков), но для кнопок действий (Action Buttons) он часто бывает ограничен. Например, в нем сложно реализовать анимацию нажатия, смену иконок при приближении к предмету или сложные визуальные эффекты.

    Поэтому стандартом индустрии является гибридный подход:

  • Стики реализуются через Touch Interface Setup (для максимальной отзывчивости и плавности).
  • Кнопки действий (прыжок, перезарядка, взаимодействие) реализуются через UMG Widget.
  • Шаг 1: Создание базового HUD

    Начнем с создания контейнера для наших кнопок.

  • В Content Browser нажмите ПКМ -> User Interface -> Widget Blueprint.
  • Выберите User Widget и назовите его WBP_MobileHUD.
  • Откройте его.
  • Первым делом добавьте Canvas Panel (если его нет). Это наша «холст», на котором мы будем располагать элементы.

    Важность якорей (Anchors)

    Мобильные устройства имеют самые разные соотношения сторон: от 4:3 (iPad) до 21:9 (современные Android-смартфоны). Если вы просто поместите кнопку в правый нижний угол, на другом телефоне она может уехать за край экрана или оказаться в центре.

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

    !Схема работы якорей (Anchors) в UMG для позиционирования кнопок на разных экранах.

    Шаг 2: Настройка кнопки прыжка

    Добавьте кнопку (Button) на Canvas Panel и поместите внутрь нее картинку (Image) или текст.

    Критически важная настройка: Is Focusable

    Это самая частая ошибка новичков. По умолчанию у кнопок в UMG включена опция Is Focusable. На ПК это позволяет переключаться между кнопками с помощью клавиатуры (Tab). Но на мобильном устройстве это приводит к катастрофе:

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

    Решение:

  • Выделите вашу кнопку прыжка.
  • В панели Details найдите параметр Is Focusable.
  • Снимите галочку (установите в False).
  • Теперь нажатие на кнопку будет обрабатываться независимо и не будет прерывать другие сенсорные вводы.

    Шаг 3: Связываем UMG с логикой персонажа

    В отличие от Touch Interface Setup, UMG-кнопки не эмулируют геймпад автоматически. Нам нужно прописать логику вручную.

    У кнопки есть события: * On Clicked: Срабатывает, когда палец нажат и отпущен внутри кнопки. * On Pressed: Срабатывает мгновенно при касании. * On Released: Срабатывает при отпускании.

    Для экшн-игр (прыжок, стрельба) всегда используйте On Pressed. Игрок хочет прыгнуть в момент касания, а не когда уберет палец.

    Реализация в Graph

  • В WBP_MobileHUD перейдите в Graph.
  • Выделите кнопку и добавьте события On Pressed и On Released.
  • Нам нужно сообщить персонажу, что пора прыгать.
  • Лучшая практика — не писать логику прыжка в виджете, а вызывать методы персонажа. Предположим, у вашего персонажа (BP_Character) есть функции StartJump и StopJump (которые вызывают стандартные Jump и StopJumping).

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

    Шаг 4: Кнопка взаимодействия (Interaction)

    Кнопка взаимодействия (открыть дверь, подобрать предмет) не должна быть на экране всегда. Она должна появляться только тогда, когда рядом есть активный объект. Это улучшает UX (User Experience) и разгружает интерфейс.

    Математика прозрачности интерфейса

    Чтобы кнопка появлялась плавно, мы можем использовать зависимость прозрачности от расстояния до объекта. Допустим, мы хотим, чтобы кнопка начинала проявляться на расстоянии 3 метров и становилась полностью видимой на 1 метре.

    Формула расчета непрозрачности (Opacity):

    Где: * — итоговая непрозрачность (от 0 до 1). * — текущее расстояние от игрока до объекта. * — дистанция начала появления (например, 300 единиц). * — дистанция полной видимости (например, 100 единиц). * — функция ограничения значения, чтобы оно не выходило за пределы диапазона .

    Реализация логики появления

  • В BP_Character создайте логику поиска предметов (например, Sphere Trace By Channel по таймеру или на Tick).
  • Если трейс находит объект, реализующий интерфейс взаимодействия (например, BPI_Interactable), мы сохраняем ссылку на него.
  • Отправляем сообщение в HUD: «Показать кнопку взаимодействия».
  • В WBP_MobileHUD:

  • Создайте кнопку Btn_Interact.
  • Установите ей Visibility в Hidden по умолчанию.
  • Создайте функцию UpdateInteractionState(bool bIsVisible).
  • Если bIsVisible == True, меняем Visibility на Visible.
  • Шаг 5: Safe Zone (Безопасная зона)

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

    Для решения этой проблемы в UMG есть специальный виджет — Safe Zone.

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

  • В иерархии виджета добавьте Safe Zone сразу под Canvas Panel (или как корневой элемент).
  • Все остальные элементы (кнопки, здоровье) поместите внутрь Safe Zone.
  • Движок автоматически определит модель телефона и добавит необходимые отступы (padding), сдвинув интерфейс внутрь безопасной области.

    Мультитач (Multi-touch)

    Unreal Engine поддерживает мультитач «из коробки». Это значит, что вы можете одновременно:

  • Бежать левым пальцем (виртуальный джойстик).
  • Вращать камеру правым пальцем (сенсорный жест).
  • Нажимать кнопку прыжка третьим пальцем (UMG).
  • Однако, чтобы это работало гладко, убедитесь, что: * Все кнопки имеют Is Focusable = False. * Кнопки достаточно большие. Рекомендуемый размер для мобильных кнопок — минимум 100x100 пикселей (или около 1cm физического размера). * Вы используете Hit Test Invisible для декоративных элементов (картинок, рамок), которые перекрывают кнопки, чтобы они не блокировали нажатия.

    Заключение

    Мы создали функциональный интерфейс. Теперь у нас есть гибридная система управления: джойстики обрабатываются на низком уровне движка, а контекстные действия — через гибкую систему UMG. Мы учли особенности экранов (Safe Zone) и предотвратили конфликты ввода (Is Focusable).

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

    5. Тестирование управления в мобильном превью и нюансы сборки

    Тестирование управления в мобильном превью и нюансы сборки

    Поздравляем! Вы прошли долгий путь: настроили Enhanced Input, создали виртуальные джойстики, реализовали сложные жесты и сверстали адаптивный интерфейс. Но пока ваша игра работает только в окне редактора Unreal Engine, она остается лишь прототипом. Чтобы превратить её в полноценный мобильный продукт, нужно научиться правильно тестировать и собирать проект.

    В этой заключительной статье курса мы разберем, как симулировать мобильный ввод на ПК, как использовать смартфон в качестве пульта для редактора и какие настройки критически важны для успешной сборки под Android.

    Эмуляция сенсорного ввода на ПК

    Самая большая боль мобильного разработчика — это время сборки. Компиляция и установка игры на телефон может занимать от 5 до 30 минут. Если вы будете собирать билд после каждого изменения кода, разработка растянется на годы. Поэтому первый этап тестирования всегда проходит на ПК.

    Режим Mobile Preview

    Обычный режим Play In Editor (PIE), который запускается по кнопке Play, использует рендер для ПК (SM5/SM6). Он показывает красивую картинку, но скрывает графические артефакты, которые могут возникнуть на мобильном процессоре. Кроме того, он не эмулирует поведение сенсорного экрана.

    Чтобы увидеть игру «глазами телефона», используйте Mobile Preview:

  • Нажмите на три точки рядом с кнопкой Play на верхней панели.
  • Выберите Mobile Preview ES3.1 (PIE).
  • Откроется отдельное окно с фиксированным соотношением сторон, эмулирующее графические возможности OpenGL ES 3.1 или Vulkan.

    !Меню выбора режима запуска Mobile Preview в Unreal Engine 5.

    Настройка мыши как пальца

    По умолчанию в Mobile Preview вы не сможете управлять виртуальными джойстиками с помощью мыши. Движок считает клик мыши именно кликом мыши, а не касанием (Touch).

    Чтобы это исправить:

  • Откройте Project Settings.
  • Перейдите в раздел Engine -> Input.
  • В категории Mobile найдите галочку Use Mouse for Touch.
  • Включите её.
  • Теперь левая кнопка мыши (ЛКМ) будет эмулировать одно касание (Touch 1). Вы сможете двигать виртуальный стик или нажимать UMG-кнопки.

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

    Unreal Remote: Тестирование мультитача без сборки

    Что делать, если нужно проверить мультитач, но не хочется ждать сборку билда? Unreal Engine предлагает отличное решение — Unreal Remote 2.

    Это приложение для iOS и Android, которое позволяет транслировать картинку из редактора на экран телефона, а обратно передавать данные сенсоров (касания, гироскоп).

    Как настроить:

  • Установите приложение Unreal Remote 2 на свой смартфон из магазина приложений.
  • Убедитесь, что компьютер и телефон подключены к одной Wi-Fi сети.
  • В редакторе UE5 зайдите в Project Settings -> Plugins -> UDP Messaging и убедитесь, что плагин включен.
  • Запустите игру в режиме Mobile Preview.
  • Откройте приложение на телефоне и введите IP-адрес вашего компьютера.
  • Теперь вы видите игру на экране телефона и можете управлять ею пальцами, используя полноценный мультитач, хотя сама игра запущена на ПК.

    Подготовка к сборке под Android

    Когда механики отлажены, пора переносить игру на реальное устройство. Процесс настройки Android SDK сложен и выходит за рамки одной статьи (обычно используется скрипт SetupAndroid.bat в папке движка), поэтому мы сосредоточимся на настройках самого проекта.

    Идентификация приложения

    Android-устройства различают приложения не по названию, а по уникальному идентификатору пакета. Если вы оставите значение по умолчанию, Google Play не примет вашу игру, а при установке новой версии старая может не обновиться.

    Зайдите в Project Settings -> Platforms -> Android:

    * Android Package Name: Должен иметь формат com.Company.Project. Например: com.MyStudio.SpaceShooter.

    Версии Android (SDK)

    Вам нужно задать два важных параметра версий:

  • Minimum SDK Version: Минимальная версия Android, на которой запустится игра. Для UE5.1+ рекомендуется ставить не ниже 26 (Android 8.0).
  • Target SDK Version: Версия, под которую оптимизирована игра. Google Play требует, чтобы это значение было актуальным (обычно это последняя или предпоследняя версия Android, например, 33 или 34).
  • Ориентация экрана

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

    В настройках Android найдите раздел Orientation и выберите Landscape Sensor (если ваша игра горизонтальная). Это позволит переворачивать телефон на 180 градусов, но запретит вертикальный режим.

    Launch on Device: Быстрая загрузка

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

  • Подключите телефон по USB.
  • Включите на телефоне режим разработчика и отладку по USB.
  • В UE5 рядом с кнопкой Platforms появится название вашего устройства.
  • Выберите его, и движок скомпилирует, запакует и сразу запустит игру на телефоне.
  • Это быстрее, так как при повторном запуске движок будет обновлять только измененные файлы (Cook on the fly).

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

    На телефоне нет консоли вывода, как в редакторе. Если управление не работает, сложно понять причину. Вот несколько инструментов, которые помогут.

    Визуализация касаний

    Иногда кажется, что кнопка не нажимается, хотя вы точно в нее попадаете. Часто проблема в том, что зоны джойстиков перекрывают кнопки UI.

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

    Введите команду:

    ShowDebug Touch

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

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

    Если управление кажется «ватным» или отзывчивым с задержкой, проблема может быть в низком FPS (кадрах в секунду). Время кадра (Frame Time) напрямую влияет на задержку ввода (Input Lag).

    Формула зависимости времени кадра от FPS:

    Где — время отрисовки одного кадра в миллисекундах, — количество миллисекунд в секунде, а — текущее количество кадров в секунду.

    Например, при 30 FPS задержка между кадром и реакцией составит минимум 33.3 мс. При 60 FPS — 16.6 мс.

    Введите команду:

    Stat Unit

    Она покажет время, затрачиваемое процессором (Game) и видеокартой (GPU). Если значения выше 33 мс, ваша игра тормозит, и управление будет ощущаться плохо.

    !Вид экрана смартфона с включенными инструментами отладки производительности и сенсора.

    Нюансы соотношения сторон

    Экраны телефонов имеют разное соотношение сторон (Aspect Ratio). Старые телефоны — 16:9, современные — 20:9 или даже 21:9.

    Формула соотношения сторон:

    Где — соотношение сторон (Aspect Ratio), — ширина экрана в пикселях, а — высота экрана в пикселях.

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

    Как проверить в редакторе:

  • В окне редактора (Viewport) нажмите на выпадающее меню в левом верхнем углу (обычно там написано Perspective).
  • Выберите Advanced Settings.
  • Найдите настройки Play in New Window и задайте нестандартное разрешение, например, , чтобы симулировать вытянутый экран.
  • Заключение курса

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

  • Настроили Enhanced Input для гибкой обработки ввода.
  • Создали и кастомизировали виртуальные джойстики.
  • Реализовали сенсорные жесты (свайпы, зум, вращение).
  • Сверстали UMG-интерфейс с учетом безопасных зон.
  • Научились тестировать и собирать проект под Android.
  • Теперь у вас есть надежная база для создания любого мобильного проекта — от платформера до шутера. Главное правило мобильной разработки: тестируйте на устройстве как можно чаще. Никакой эмулятор не заменит ощущения реального телефона в руках.

    Удачи в ваших проектах!