Руководство по созданию веб-интерфейса с Unreal Engine Remote Control

Что вы узнаете из этого руководства?

Unreal Engine Remote Control — система для управления содержимым проекта вне интерфейса редактора движка. Она принимает HTTP-запросы и сообщения WebSocket через веб-сервер; веб-приложения могут использовать этот интерфейс, чтобы читать и изменять параметры, открытые для Blueprint и Python. В этом руководстве мы расскажем, как включить плагин Remote Control Web Interface, вывести параметры из Remote Control Preset в веб-приложение и управлять ими с помощью виджетов.

Система позволяет не только управлять проектом удалённо, но и одновременно подключать к одному проекту несколько веб-клиентов. Изменения, внесённые в одном клиенте, передаются остальным через веб-сервер. Такой подход может пригодиться для совместной работы в реальном времени или когда нужен отдельный интерфейс для управления выбранными параметрами проекта. Поскольку функция имеет статус бета-версии, перед использованием, особенно в проектах, предназначенных для публикации, стоит проверить её ограничения и условия работы.

Требования и установка

В официальном руководстве по Remote Control Web Interface указана минимальная версия NodeJS 8 и максимальная — 14.15.5. Это диапазон версий, приведённый в документации; перед установкой важно проверить совместимость с используемой версией Unreal Engine и текущей средой разработки. В источниках не указана конкретная версия Unreal Engine, поэтому мы не делаем дополнительных предположений о совместимости версий.

Откройте проект в Unreal Editor, затем перейдите в главном меню в окно Edit > Plugins. Найдите плагин Remote Control Web Interface в категории Messaging, включите его и перезапустите движок. Чтобы проверить, запустилось ли веб-приложение, откройте Output Log через Window > Developer Tools > Output Log и отфильтруйте записи по фразе «remote control web». В официальном руководстве приведён пример сообщения об успешном запуске, в котором говорится, что веб-приложение работает на порту 7000.

Порт для Remote Control Web Interface можно изменить в настройках Plugins > Remote Control в разделе Edit > Project Settings. Чтобы открыть веб-приложение в браузере на компьютере, где запущен движок, введите в адресную строку 127.0.0.1:7000. Для доступа с других компьютеров официальная документация рекомендует обратиться к инструкции Quick Start по открытию Remote Control API для других компьютеров. Поскольку в этом руководстве не приводятся дополнительные шаги по настройке сети, здесь рассматривается только локальное подключение.

Пошаговая инструкция: подключаем preset к веб-интерфейсу

1. Подготовьте preset. Система Remote Control позволяет работать с функциями и параметрами, открытыми для Blueprint и Python. Чтобы открыть содержимое проекта через API без написания кода, можно использовать Remote Control Preset. Веб-приложение считывает содержимое preset, открытого в сессии Unreal. Поэтому перед переходом к интерфейсу проверьте, что в preset есть параметры, которыми нужно управлять.

2. Откройте веб-приложение. После запуска плагина воспользуйтесь одним из поддерживаемых браузеров. В официальном руководстве перечислены Chrome, Firefox и Safari. Если веб-приложение открывается на том же компьютере, используйте указанный локальный адрес. Если интерфейс не загружается, проверьте сообщение о запуске в Output Log и убедитесь, что подключаетесь к правильному порту.

3. Переключитесь в режим дизайна. При открытии страницы может отобразиться пустое приложение Remote Control. Переключитесь в режим Design с помощью переключателя Control в интерфейсе. Затем изучите параметры preset на вкладке Properties. Если перетащить параметр из списка слева в область интерфейса, для него будет создан связанный виджет. Если разместить параметр на панели, виджет добавится на неё; если панели ещё нет, приложение создаст её и поместит туда виджет.

4. Выберите подходящий тип виджета. В интерфейсе доступны кнопка, палитра цветов, dial, выпадающий список, джойстик, метка, список, панель, слайдер, вкладки, текст, toggle и vector. Панель служит контейнером для других виджетов, поэтому её нужно добавить первой. Чтобы разделить интерфейс на группы, можно использовать List widget, в котором размещаются панели. Для некоторых форматов данных можно изменить способ отображения: например, данные vector можно представить в виде джойстика, dial или слайдера.

5. Проверьте работу в режиме управления. Разместив виджеты, вернитесь в режим Control. Измените параметр в веб-интерфейсе и проверьте, обновилось ли его значение в Unreal Editor. Чтобы изменения отображались, когда редактор находится в фоновом режиме, рекомендуется отключить параметр Use Less CPU when in Background в разделе General > Performance меню Edit > Editor Preferences.

6. Сохраните макет. Чтобы сохранить макет веб-интерфейса, сохраните соответствующий Remote Control Preset в Unreal Editor. При следующем запуске приложение использует последний сохранённый макет. Во время настройки можно выбрать виджет и изменить его метку в панели параметров; если виджет связан с параметром, можно также изменить этот параметр. Ненужные виджеты можно удалить по отдельности или вместе с содержащей их панелью.

Влияние на архитектурные и archviz-процессы

Для команд в области архитектуры, дизайна интерьеров и archviz главное преимущество такого подхода — возможность собрать в веб-интерфейсе выбранные элементы управления проектом, не предоставляя доступ ко всему редактору. Например, команда может создать интерфейс под свой рабочий процесс, но сначала нужные для управления параметры необходимо открыть через Remote Control Preset. В источниках не приводятся примеры конкретных архитектурных параметров, поэтому выбор свойств сцены зависит от структуры проекта.

Возможность одновременно работать с несколькими клиентами и передавать изменения остальным может быть полезна при совместных сессиях просмотра в реальном времени. В веб-приложение можно добавить вкладку Level Snapshots, чтобы создавать новые снимки уровня или переходить к уже созданному; для этого должен быть включён плагин Level Snapshots. Вкладка Sequencer отображает секвенции проекта и позволяет запускать или продолжать секвенции, находящиеся в текущем уровне. Однако, даже если страница показывает все секвенции проекта, воспроизводить можно только те, что находятся в текущем уровне; фильтрация выполняется по пути к ресурсу, а не по принадлежности к уровню.

Офисам и студентам стоит учитывать совместимость установки, сетевой доступ и статус бета-версии. В официальной документации диапазон NodeJS ограничен устаревшими версиями; кроме того, система по умолчанию отключена в упакованных проектах и в режиме запуска игры. Чтобы включить её в этих режимах, используются указанные в документации флаги запуска:

-RCWebControlEnable -RCWebInterfaceEnable

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

Частые проблемы

Если веб-приложение не открывается, сначала убедитесь, что плагин включён и движок перезапущен. Затем найдите в Output Log запись о запуске, отфильтровав её по «remote control web»; если порт был изменён, он должен совпадать с портом в адресе браузера. Если обновления не отображаются в редакторе, проверьте настройку снижения нагрузки на CPU в фоновом режиме.

Если параметр не отображается в списке, проверьте, есть ли он в открытом Remote Control Preset. Можно использовать несколько preset, но одновременно открыт только один. Также макет интерфейса может не сохраниться в ожидаемом виде при следующем запуске, если не сохранить соответствующий preset. Даже если отображаются вкладки Level Snapshots или Sequencer, отдельно проверьте наличие необходимых плагинов и выполнение условий для уровня.

Следующие шаги

Сначала проверьте локальное подключение с одним preset и небольшим количеством виджетов. Затем настройте нужный интерфейс с помощью вкладок и панелей и сохраните preset. Если планируете использовать несколько клиентов, Level Snapshots или Sequencer, проверьте каждую функцию в соответствующих условиях работы. Для доступа с других компьютеров обратитесь к официальной инструкции Quick Start; не пытайтесь настраивать сеть наугад, если в источнике не приводятся необходимые подробности.

Источник и лицензия

Этот материал адаптирован на турецкий язык по официальной документации Epic Games по Unreal Engine Remote Control и Remote Control Web Application. Оба источника распространяются по свободной лицензии.