Configurar Unreal Engine Pixel Streaming: llevar el proyecto al navegador

Qué aprenderá en esta guía

Unreal Engine Pixel Streaming transmite la imagen y el sonido de una aplicación a un dispositivo remoto y permite recibir entradas de ese dispositivo. Así, un proyecto de Unreal Engine puede visualizarse en una página web y los usuarios pueden interactuar con la aplicación desde un ordenador o dispositivo móvil mediante el teclado, el ratón o la pantalla táctil. No es necesario instalar software adicional en el navegador.

Esta guía explica cómo preparar el proyecto para transmitirlo, iniciar los componentes del servidor y conectarse desde un navegador en la misma red local. La guía de inicio de Epic Games ofrece ejemplos para Windows y señala que los scripts del servidor se encuentran en una carpeta diferente en Linux y Mac.

Requisitos y preparación

El complemento Pixel Streaming puede codificar vídeo en equipos con Windows, Linux o Mac y determinado hardware GPU compatible. La guía original remite al documento Pixel Streaming Reference para consultar los tipos de hardware compatibles. Como no enumera modelos concretos de GPU, conviene comprobar la compatibilidad antes de transmitir.

Para la configuración inicial en una red local, los puertos 80 y 8888 deben estar abiertos para la comunicación. Si hay otros servidores web en el equipo, la guía recomienda detenerlos antes de empezar la instalación. Para conectarse a través de Internet o entre redes distintas, puede ser necesaria una configuración de red adicional. Para una primera prueba, es más sencillo empezar en el mismo equipo con la dirección localhost o 127.0.0.1.

La guía no menciona ningún requisito de cuenta de usuario. La infraestructura del servidor se obtiene del repositorio Pixel Streaming Infrastructure de Epic Games en GitHub. El proyecto debe ejecutarse como una aplicación empaquetada o mediante la opción Standalone Game en Unreal Editor; el uso del complemento se explica para estas dos formas de inicio.

Instalación: preparar el proyecto y los servidores

1. Abra el proyecto en Unreal Editor. En el menú principal, vaya a Edit > Plugins; en la categoría Graphics, active el complemento Pixel Streaming o Pixel Streaming 2 y reinicie el proyecto. Si el proyecto incluye un personaje y necesita controles táctiles en dispositivos móviles, puede activar la opción Always Show Touch Interface en la categoría Engine > Input, dentro de Edit > Project Settings. Este ajuste no es obligatorio; el componente Player Controller del personaje también debe admitir la entrada táctil.

2. Configure el parámetro de inicio del proyecto. En Edit > Editor Preferences..., vaya a la categoría Level Editor > Play y añada la dirección de conexión local en el campo Additional Launch Parameters:

-PixelStreamingURL=ws://127.0.0.1:8888

Este parámetro especifica la dirección a la que se conectará la aplicación en el servidor de Pixel Streaming. Si va a empaquetar el proyecto para Windows, en el menú de Unreal Editor vaya a Files > Package Project > Windows (64-bit) y elija la carpeta de salida. La aplicación debe recibir el mismo parámetro cada vez que se inicia. La guía también explica que se puede añadir el parámetro al campo Target del acceso directo de inicio.

1. Obtenga los componentes del servidor de Pixel Streaming. La guía indica que puede descargar la infraestructura directamente desde el repositorio de GitHub o ejecutar el siguiente comando en el terminal que prefiera. Sustituya UEX.Y del ejemplo por la rama que vaya a utilizar; el documento da 5.7 como ejemplo.

git clone --branch UEX.Y https://github.com/EpicGamesExt/PixelStreamingInfrastructure.git

Como alternativa, vaya a la carpeta \Engine\Plugins\Media\PixelStreaming\Resources\WebServers de la instalación de Unreal Engine y ejecute el script get_ps_servers, con extensión .bat en Windows o .sh en Linux o Mac. Este proceso descarga la rama correspondiente de la infraestructura en la carpeta.

1. En el ejemplo para Windows, ejecute el script de instalación que se encuentra en la carpeta SignallingWebServer de la infraestructura descargada, desde PowerShell abierto como administrador:

SignallingWebServer\platform_scripts\cmd\setup.bat

Una vez completada la instalación, ejecute el script de inicio del servidor en la misma estructura de carpetas:

SignallingWebServer\platform_scripts\cmd\start_with_stun.bat

Para Linux y Mac, la guía indica que deben utilizarse los scripts de la carpeta SignallingWebServer\platform_scripts\bash. Cuando el servidor esté listo, en la consola deberían aparecer mensajes de escucha relativos a la conexión del emisor en el puerto 8888, la conexión del usuario en el puerto 80 y el servicio HTTP.

Iniciar la aplicación y conectarse desde el navegador

Con los servidores en funcionamiento, inicie la aplicación empaquetada con el parámetro de dirección de conexión de Pixel Streaming. Comando de ejemplo:

MyPixelStreamingApplication.exe -PixelStreamingURL=ws://127.0.0.1:8888

MyPixelStreamingApplication.exe es un nombre de archivo de ejemplo; debe utilizar el nombre de su propia aplicación empaquetada. Cuando la aplicación se conecte al servidor, debería aparecer el mensaje Streamer connected en la consola del servidor.

Abra un navegador compatible en el mismo equipo y vaya a http://127.0.0.1. La guía de Epic menciona Google Chrome y Mozilla Firefox como opciones adecuadas. Haga clic en la página y, después, en el botón de reproducción para iniciar la transmisión. La página de usuario predeterminada puede enviar a la aplicación de Unreal Engine las entradas de teclado, ratón y pantalla táctil.

Para conectarse desde otro ordenador o dispositivo móvil de la misma red local, introduzca en el navegador la dirección IP del equipo que transmite. Con este método, todos los dispositivos conectados ven la misma escena de la misma instancia de Unreal Engine; con la configuración predeterminada, las entradas de los dispositivos también se dirigen a la misma aplicación. Para conectarse a través de Internet o desde otras subredes, puede ser necesaria una configuración de red más avanzada. La guía original menciona la configuración de servidores STUN/TURN para este tipo de conexiones.

Problemas comunes y su lugar en el flujo de trabajo de visualización arquitectónica

Si no se establece la conexión, compruebe primero que los componentes del servidor estén en funcionamiento, que la aplicación se haya iniciado con el parámetro correcto PixelStreamingURL y que los puertos 80 y 8888 sean accesibles. La presencia de otro servidor web en el mismo equipo también puede afectar a la configuración inicial. Si se interrumpe el flujo de entrada cuando se minimiza la ventana de la aplicación, la guía indica que el parámetro -RenderOffScreen permite ejecutar la aplicación sin una ventana visible.

En los flujos de trabajo de arquitectura, interiorismo y archviz, esta configuración puede ser útil para los equipos que quieran mostrar la misma escena en varios ordenadores o dispositivos móviles y ofrecer una presentación interactiva desde el navegador. El render se genera en el equipo principal donde se ejecuta la aplicación; los dispositivos conectados reciben la misma vista. Por eso, la compatibilidad de la GPU del equipo principal y la configuración de red son importantes. La guía indica que se pueden configurar opciones como la resolución, el tamaño de pantalla, las direcciones IP y los puertos. Las fuentes no explican las condiciones de licencia y precio del producto ni su compatibilidad con un software de archviz específico.

Próximos pasos

Una vez que funcione la transmisión básica, se puede personalizar la página web del usuario para adaptarla al proyecto. También es posible comprobar la identidad de los usuarios que envían entradas o añadir elementos de interfaz HTML5 a la página. Epic ofrece una guía de optimización de streaming que aborda los ajustes relacionados con la calidad, la latencia y la fiabilidad de la conexión. Para necesidades como varios servidores, distintos clientes o la prestación del servicio a través de Internet, puede consultarse la Hosting and Networking Guide.

Si va a modificar archivos de la infraestructura, la guía recomienda editar la ubicación de instalación original en lugar de la copia de la carpeta empaquetada. Si se modifican los archivos de la carpeta empaquetada, el siguiente proceso de empaquetado puede sobrescribir esos cambios. Después de completar la instalación inicial en la red local, conviene revisar los requisitos del proyecto y los ajustes de red que se utilizarán antes de pasar a escenarios de conexión más complejos.

Fuentes y licencia

Esta guía se ha adaptado al turco a partir de la documentación de Unreal Engine Pixel Streaming y la guía de inicio de Pixel Streaming de Epic Games. Ambas fuentes se ofrecen bajo licencias libres.