Guía para crear una interfaz web con Unreal Engine Remote Control

¿Qué aprenderás en esta guía?

Unreal Engine Remote Control es un sistema diseñado para gestionar el contenido de un proyecto fuera de la interfaz del editor del motor. Acepta solicitudes HTTP y mensajes WebSocket a través de un servidor web; las aplicaciones web pueden utilizar esta interfaz para consultar y modificar propiedades expuestas a Blueprint y Python. En esta guía veremos cómo activar el plugin Remote Control Web Interface, trasladar propiedades de un Remote Control Preset a una aplicación web y controlarlas mediante widgets en la interfaz.

Además del control remoto, el sistema permite que funcionen varios clientes web conectados al mismo proyecto. Los cambios realizados en un cliente se reflejan en los demás a través del servidor web. Por ello, este método puede ser útil en un entorno de trabajo colaborativo en tiempo real o cuando se necesita una interfaz específica para controlar determinados elementos del proyecto. Como la función está marcada como beta, conviene probar sus límites y condiciones de funcionamiento antes de utilizarla, especialmente en proyectos que se vayan a publicar.

Requisitos e instalación

La guía oficial de Remote Control Web Interface indica que NodeJS debe ser, como mínimo, la versión 8 y, como máximo, la 14.15.5. Este intervalo corresponde a los requisitos especificados en la documentación; antes de la instalación, es importante comprobar la compatibilidad con la versión de Unreal Engine utilizada y con el entorno de desarrollo existente. Las fuentes no indican un número de versión concreto de Unreal Engine, por lo que aquí no se hacen suposiciones adicionales sobre la compatibilidad de versiones.

Después de abrir el proyecto en Unreal Editor, ve a Edit > Plugins desde el menú principal. Busca el plugin Remote Control Web Interface en la categoría Messaging, actívalo y reinicia el motor. Para comprobar si el plugin ha iniciado la aplicación web, abre Output Log desde Window > Developer Tools > Output Log y filtra por la expresión “remote control web”. La guía oficial muestra como ejemplo un mensaje de inicio correcto que indica que la aplicación web está funcionando en el puerto 7000.

El puerto de Remote Control Web Interface se puede cambiar en los ajustes de Plugins > Remote Control, dentro de Edit > Project Settings. Para abrir la aplicación web desde el equipo en el que se ejecuta el motor, escribe 127.0.0.1:7000 en la barra de direcciones del navegador. Para acceder desde otros equipos, la documentación oficial remite a las instrucciones de Quick Start sobre cómo habilitar Remote Control API para otros ordenadores. Como esta guía no detalla los pasos adicionales de configuración de red, solo se explica la conexión local.

Paso a paso: conectar un preset a la interfaz web

1. Prepara el preset. El sistema Remote Control puede operar sobre funciones y propiedades expuestas a Blueprint y Python. Puedes utilizar un Remote Control Preset para exponer contenido del proyecto a la API sin escribir código. La aplicación web lee el contenido del preset abierto en la sesión de Unreal. Por eso, antes de pasar a la interfaz, comprueba que el preset incluya las propiedades que quieras controlar.

2. Abre la aplicación web. Cuando el plugin esté activo, utiliza uno de los navegadores compatibles. La guía oficial enumera Chrome, Firefox y Safari como navegadores compatibles. Si la aplicación web se abre en el mismo equipo, utiliza la dirección local indicada. Si la interfaz no carga, comprueba el mensaje de inicio en Output Log y asegúrate también de conectarte al puerto correcto.

3. Cambia al modo de diseño. Al abrir la página, puede que aparezca una aplicación Remote Control vacía. Utiliza el control Control de la interfaz para cambiar al modo Design. A continuación, revisa las propiedades del preset en la pestaña Properties. Al arrastrar una propiedad de la lista de la izquierda al área de la interfaz, se crea un widget vinculado a ella. Si la sueltas sobre un panel, el widget se añade a ese panel; si todavía no hay ninguno, la aplicación crea uno y coloca el widget dentro.

4. Elige el tipo de widget según lo que necesites. La interfaz incluye widgets como botones, selectores de color, diales, listas desplegables, joysticks, etiquetas, listas, paneles, sliders, pestañas, campos de texto, toggles y vectores. El panel contiene otros widgets y debe añadirse primero. Para presentar distintos grupos de interfaz en una pestaña, el widget List puede contener paneles. En algunos formatos de datos se puede cambiar la forma de visualización; por ejemplo, los datos de tipo vector se pueden mostrar como joystick, dial o slider.

5. Pruébalo en el modo de control. Después de colocar los widgets, vuelve al modo Control. Cambia la propiedad desde la interfaz web y observa si se actualiza en Unreal Editor. Para que los cambios se muestren mientras el editor está en segundo plano, se recomienda desactivar la opción Use Less CPU when in Background, que se encuentra en General > Performance, dentro de Edit > Editor Preferences.

6. Guarda el diseño. Para guardar el diseño de la interfaz web, guarda el Remote Control Preset correspondiente en Unreal Editor. La próxima vez que se abra, la aplicación utilizará el último diseño guardado. Durante el diseño, al seleccionar un widget se puede cambiar su etiqueta desde el panel de ajustes; si está vinculado a una propiedad, también se puede cambiar la propiedad asociada. Los widgets innecesarios se pueden eliminar individualmente o junto con el panel que los contiene.

Efectos en los flujos de trabajo de arquitectura y archviz

Para los equipos de arquitectura, interiorismo y archviz, la principal ventaja de este enfoque es la posibilidad de reunir en una interfaz web controles específicos del proyecto, sin tener que dar acceso a todo el editor. Por ejemplo, un equipo puede diseñar una interfaz adaptada a su forma de trabajar; sin embargo, primero debe exponer los parámetros que quiera controlar mediante Remote Control Preset. Las fuentes no ofrecen ejemplos de parámetros arquitectónicos concretos, por lo que las propiedades de escena que se utilicen dependerán de la estructura del proyecto.

La posibilidad de trabajar con varios clientes a la vez y transmitir los cambios a los demás puede resultar útil en sesiones de revisión colaborativas en tiempo real. Se puede añadir una pestaña Level Snapshots a la aplicación web para capturar nuevas imágenes del nivel o volver a una captura anterior; para ello, es necesario activar el plugin Level Snapshots. La pestaña Sequencer muestra las secuencias del proyecto y permite iniciar o reanudar las que estén en el nivel actual. Aunque la página muestra todas las secuencias del proyecto, solo se pueden reproducir las que se encuentran en el nivel actual; además, el filtro se basa en la ruta del recurso, no en la pertenencia al nivel.

Los aspectos que deben tener en cuenta los estudios y estudiantes son la compatibilidad de la instalación, el acceso a la red y el estado beta. La documentación oficial limita el intervalo de NodeJS a versiones antiguas; además, el sistema está desactivado de forma predeterminada en proyectos empaquetados y en el modo de ejecución del juego. Para activarlo en esos modos se utilizan los argumentos de inicio indicados en la documentación:

-RCWebControlEnable -RCWebInterfaceEnable

Estos argumentos se añaden a la línea de comandos al iniciar el proyecto de Unreal. Como la función está descrita como beta, conviene probar específicamente el escenario en el que se vaya a utilizar antes de publicar el proyecto o presentarlo a un cliente.

Problemas frecuentes

Si la aplicación web no se abre, comprueba primero que el plugin esté activado y que hayas reiniciado el motor. Después, busca el registro de inicio en Output Log filtrando por “remote control web”; si has cambiado el puerto, el puerto de la dirección del navegador también debe coincidir con el nuevo. Si no aparecen las actualizaciones en el editor, revisa el ajuste para reducir el uso de CPU en segundo plano.

Si una propiedad no aparece en la lista, comprueba si está incluida en el Remote Control Preset abierto. Se pueden utilizar varios presets, pero solo uno puede estar abierto a la vez. Además, si no se guarda el preset correspondiente, es posible que el diseño de la interfaz no se conserve como se esperaba la próxima vez que se abra. Aunque aparezcan las pestañas Level Snapshots o Sequencer, comprueba también que estén activos los plugins necesarios y que se cumplan las condiciones del nivel correspondientes.

Próximos pasos

Primero, comprueba la conexión local con un único preset y unos pocos widgets. Después, organiza la interfaz necesaria con pestañas y paneles y guarda el preset. Si tienes previsto utilizar varios clientes, Level Snapshots o Sequencer, prueba cada función en sus propias condiciones de trabajo. Para configurar el acceso desde otros equipos, consulta las instrucciones oficiales de Quick Start; no supongas ni apliques ajustes de red que no estén detallados en esa fuente.

Fuentes y licencia

Este contenido se ha adaptado al turco a partir de la documentación oficial de Unreal Engine Remote Control y Remote Control Web Application de Epic Games. Ambas fuentes se ofrecen bajo una licencia libre.