React Native como un sistema de UI para juegos en Unreal Engine

Hola a todos. Esta es una charla llamada React Native como un sistema de UI para juegos en Unreal Engine. Hablaremos un poco sobre por qué esto es algo bueno, cómo se logra y cuándo y cómo puedes involucrarte con ello. Así que, primero que nada, un poco sobre mí. Mi nombre es Danny. He estado programando durante 24 años. Desde aproximadamente los 13 años, haz las cuentas, 18 de esos años fueron profesionalmente. Mi trayectoria es muy variada. He visto el mundo móvil, el mundo web, que es donde me he familiarizado muy bien con React Native. Y también he estado participando en algunas producciones de desarrollo de juegos, lo que creo que me proporciona un punto de vista único sobre lo que cada industria está haciendo bien.

Ahora mismo, soy director de ingeniería en Star Atlas. Star Atlas es un estudio de desarrollo de juegos que está haciendo un juego triple-A ambientado en el espacio. Sí, realmente deberías echarle un vistazo. Antes de presentar mi integración de React Native para Unreal Engine, quiero explicar cómo llegamos a esta idea. Así que entraremos un poco en la historia de por qué React Native es bueno para móviles y qué paralelismos podemos trazar de eso a Unreal Engine.

Así que si miramos la historia de las aplicaciones móviles antes del año 2015, la mayoría de las aplicaciones que no querían ir por la ruta nativa se veían obligadas a hacer una de dos cosas. O bien harían una aplicación basada en componentes HTML. Sería simplemente una aplicación regular de JavaScript y HTML. Luego la empaquetarían en un WebViewRenderer que parece una aplicación nativa, pero no se comporta como tal. La otra opción que la gente tenía era tomar un script de construcción de UI imperativa, empaquetarlo en JavaScript, crear un puente que construya UIs imperativamente en Kotlin o antes de Kotlin en Java y Objective-C. Y esa sería una forma realmente pobre de hacer las cosas. Así que llegó React.js Conf en 2015 y React Native fue introducido con una nueva forma de ver las cosas.

Y esta nueva forma, haríamos UI declarativa al estilo React. Y trataríamos, lo más importante, con componentes nativos que son completamente renderizados por la plataforma. Así que la pregunta entonces se convierte en, ¿cómo sería una evolución como esta para Unreal Engine? Y para responder a eso, quiero darte una pequeña introducción a cómo se hacen las UIs de juegos hoy en día.

Así que ahora mismo, si estás construyendo un juego, lo harás de una de tres maneras. La primera forma en que construirías una UI sería simplemente utilizar la UI nativa del motor en el que estás construyendo tu juego. Así que si tienes suerte y tu motor realmente tiene un sistema de UI nativo, en Unreal 5, esto sería Slate y UMG. Esos son solo los nombres de los toolkits de UI nativos en C++. Tendrías Unity con un toolkit de UI. Tendrías sistemas de UI propietarios como Anvil. Probablemente has jugado muchos juegos que hacen esto.

He enumerado algunos a continuación. La segunda forma, que también es muy popular, es utilizar algún tipo de middleware. Así que esto es usualmente y comúnmente hecho cuando el motor propietario elegido para el juego realmente no tiene un framework. Y quieren utilizar un framework construido por alguien más. Así que estos también son frameworks de UI nativos. Son como módulos que pones en el motor.

Y he enumerado algunos juegos que probablemente has jugado que tienen esta técnica. La última opción, y esta es la opción que siento que la integración de React Native evoluciona, es tomar un navegador y renderizar ese navegador de manera invisible sobre una textura y luego colocar esa textura encima de la UI existente. Esto se hace en una sorprendente cantidad de juegos. Así que la forma en que funciona es que actualmente tendrías algo como un motor de juego que renderizaría todo lo regular del motor de juego. Y luego, al lado, tendrías un navegador sin cabeza que no vive en una ventana. Todavía ejecuta HTML. Todavía ejecuta CSS y JavaScript. Pero también toma todo eso y lo empaqueta en un buffer. Y ese buffer tiene la textura con toda tu UI. Y eso se dibuja siempre encima del marco que el motor proporcionó para el juego. Así que solo para que entiendas más o menos dónde lo has visto antes, probablemente uno de tus juegos favoritos hace eso. Y esto es antes de que los programadores de C en la última fila empiecen a lanzarme tomates por siquiera sugerir poner navegadores web en un juego. Así que si has jugado FIFA o Football Club, has visto una UI HTML. Lo que estás viendo es una UI HTML. Si has jugado juegos de PlayStation como Control, esa es una UI renderizada por un navegador HTML. Si has jugado juegos de simulación con datos complejos como City Skylines, esa también es una UI web HTML. Y hay muchos, muchos, muchos más. Solo de memoria, puedo nombrar juegos como Sea of Thieves, PUBG en móvil, SimCity, The Sims de Maxis, y muchos, muchos otros juegos.

Así que la pregunta es, ¿por qué alguien haría eso? ¿Por qué alguien tomaría un navegador y lanzaría un juego con un navegador que renderiza UI encima de un juego? Eso suena como si fuera muy redundante y poco eficiente. Bueno, resulta que, en primer lugar, las interfaces de usuario con muchos datos son muy difíciles de construir. El diseño para interfaces con muchos datos es muy difícil de construir de manera eficiente. Y la forma web de hacer las cosas, la forma de React de hacer las cosas, y por extensión la forma de React Native de hacer las cosas está probada por 5.5 mil millones de usuarios de Internet y contando. Y hay este detalle no insignificante de que contratar talento de front-end de React es contratar de un gigantesco grupo global con millones de personas. Todo está bien y es bueno. Hoy podrías hacer las cosas de una manera similar a como solían hacerse para aplicaciones móviles antes de que React Native apareciera, pero tiene algunos problemas. El primero de esos problemas es sistemas redundantes. Lo que sucede es que un navegador tiene un motor de renderizado de texto, un navegador tiene un motor de gráficos vectoriales, un navegador consume memoria y CPU, y lo más probable es que tu motor de juego vaya a tener lo mismo. Y lo mismo ocurre con la integración con constructos nativos del motor. Si quieres hacer transparencia, opacidad, colores, efectos como desenfoque, filtros, corrección de color, vas a estar lidiando con el motor del navegador que no tiene comunicación con el motor del juego. Y me preguntaba si podemos hacerlo mejor.

¿Cómo sería una mejor manera? Entonces, la manera perfecta sería no tener un navegador, seguir teniendo código de React Native o código similar a React que luego se alimenta a algún tipo de tiempo de ejecución nativo, al igual que en móvil, que tiene una integración nativa con todos los constructos nativos del motor de juego y renderizaría un marco que tiene la UI encima. Antes de mostrar mi integración, quiero decir que probablemente ya has interactuado con algo como esto. Esta no es una idea completamente nueva. Esta es una idea que ha sido explorada, y creo que algunos de ustedes se sorprenderán al escuchar esto, pero si tienes una PlayStation, estás jugando con una UI de React Native en la PlayStation. Así que, toda la UI de la PlayStation, toda la experiencia principal de la PlayStation con todas las aplicaciones es en realidad una colección de docenas y docenas de aplicaciones de React Native que se están renderizando en 3D. Así que, para recapitular, hasta ahora, cuando queríamos usar tecnologías web en juegos, lo hacíamos de una manera que se asemeja a las aplicaciones antes de 2015. Tomábamos componentes HTML, los renderizábamos dentro de una vista web, y mi esperanza es que después de esta conferencia, podamos pensar en ello de manera similar a cómo la conferencia en 2015 abrió nuevas formas de construir cosas. Podríamos pensar en términos de componentes nativos de pizarra en Unreal Engine que son renderizados nativamente por la plataforma, pero mientras hacemos eso, también podemos seguir escribiendo código JavaScript y TypeScript.

Entonces, ¿cómo funciona eso? ¿Cómo funcionaría un sistema como este? React Native tiene algo llamado plataformas. Plataformas en el árbol y plataformas fuera del árbol. Así que, si has estado construyendo cualquier código de React Native para iOS y Android, estás familiarizado con el hecho de que hay un núcleo C++ que se compila en un objeto compartido y luego se distribuye con enlaces a las plataformas nativas. Lo que quizás no estés tan familiarizado es que hay plataformas fuera del árbol como Mac OS y Windows que están siendo desarrolladas por Microsoft y Vision OS, que creo que está siendo hecho por Callstack actualmente. Estas también están en una sorprendente cantidad de lugares. He escuchado que si actualmente haces clic en el menú de inicio en Windows, estás interactuando con la mini aplicación de React Native que impulsa el menú de inicio. Así que, mi propuesta es una plataforma fuera del árbol de Unreal Engine. Esa plataforma se empaqueta como un plugin estándar de Unreal Engine. Este plugin tiene enlaces para todos los diferentes sistemas de React. Así que, React tiene componentes centrales nativos como un programador, administrador de superficies. Tiene una clase host de React que ayuda a iniciar todo. Tiene interfaces para HTTP, WebSocket, temporizador, todo tipo de funcionalidad de API nativa. Todo eso es satisfecho por este plugin nativo de React de Unreal Engine. Todo eso habla con el juego. Con este tipo de arquitectura, podemos entonces tomar las vistas familiares de React, los componentes de texto familiares de React, componentes de imagen, y luego traducirlos directamente a componentes de pizarra, como vistas de React, párrafos de React, imágenes de React, que son solo componentes hijos, clases hijas de componentes de pizarra nativos regulares. Eso suena genial. He estado trabajando en esto por bastante tiempo, y hasta ahora, todo es fácil, pero la realidad no es tan rápida, no tan fácil. El primer desafío para hacer que todo esto funcione fue que React Native actualmente asume que vas a trabajar con iOS y Android, a pesar de la existencia de muchas plataformas fuera del árbol. Si estás tratando de construir una base de código de React Native para C++, va a asumir una de dos cosas. O estás construyendo para Android o estás construyendo para algo llamado Phantom, que es un probador sin cabeza privado de meta que usan para confirmar que el código central está funcionando como debería. La solución a esto fue una gran cantidad de listas de CMake feas, y voy a usar esta plataforma para decir que sería bueno si meta hiciera el sistema de construcción más modular, porque creo que las plataformas fuera del árbol son una gran parte del futuro. Hay muchas más plataformas que son maduras y se beneficiarían de una integración con React Native.

El segundo desafío es que las sobrescrituras de JavaScript eran, o tal vez son, todavía una pesadilla. Si estás escribiendo código en React Native, sabrías que para escribir código en React Native, necesitas importar la base de código JavaScript de React Native en el sitio de JavaScript. Esa base de código tendría cosas como el componente de imagen, por ejemplo. Habría componentes de imagen para iOS, sobrescrituras para Android, y luego todo tipo de tipos y funciones de soporte. Ahora, cuando estás construyendo una plataforma personalizada fuera del árbol, además de escribir la tuya propia, por ejemplo, en nuestro caso, Unreal Components, todavía necesitas importar y usar esas estructuras de datos y funciones comunes de propósito general. Desafortunadamente, si el metro bundler está redirigiendo tu juego para consumir la plataforma fuera del árbol, necesitas tener esos archivos presentes allí. No puedes simplemente extender la plataforma con archivos adicionales. Tienes que hacer algo que fusione los dos juntos. Por supuesto, la solución es que el proceso de construcción para la plataforma tiene un montón de fusiones de carpetas realmente feas. Esto está modelado según la forma en que React Native Windows maneja actualmente esta situación, donde tomamos el código de React Native que tiene todo el material de iOS y Android y de propósito general, y luego lo copiamos en nuestra propia plataforma React Native Unreal antes de empaquetar y enviar el código.

El segundo desafío también podría resolverse haciendo que el sistema de construcción sea más modular en el futuro. Así que, gran petición. Suficiente charla, quiero mostrar una demostración rápida de cómo se ve un plugin como este en la vida real. Lo que tenemos aquí es un proyecto de Unreal, y este proyecto de Unreal tiene un sistema muy mínimo configurado para mostrar un servidor de desarrollador que se está ejecutando actualmente con Metro enviando una aplicación estándar de JavaScript React Native para la plataforma Unreal. Así que, en el lado nativo de Unreal tenemos un widget blueprint, que actualmente solo tiene una superficie React, y esta superficie React es todo lo que necesitamos para poder conectarnos al servidor de desarrollo de React Native. Mostraré esto primero sin ningún tipo de efectos o mundo de juego 3D, solo para ver con qué estamos tratando. Así que, esta es una UI simple que he hecho como demostración. Esta es una sesión de hacking ficticia en la que estamos. Estamos tratando de entrar en algún tipo de laboratorio secreto en un juego. Necesitamos ingresar una clave de acceso, y necesitamos entrar en el sistema. Esto está impulsado por un código que te resultaría muy familiar si alguna vez has hecho algo con React. Así que, estamos viendo el código ahora mismo. Así que, esta es una página rápida y simple. Ves todas las diferentes piezas que esperarías de una aplicación regular de React Native. Así que, tenemos un enrutador en memoria con inicio de sesión, múltiples ubicaciones autorizadas, y además podemos ir y hacer cosas como esta. Podemos, por ejemplo, decidir que queremos que nuestros elementos, que son los dígitos, no sean azul marino. Podemos hacerlos rojos, y si volvemos al juego y actualizamos, obtenemos instantáneamente el cambio recargado en caliente en el motor. Vamos a hacerlos azules de nuevo, porque es mucho más agradable. Y vamos a actualizar de nuevo. Ahora, esta es una UI muy rudimentaria.

Lo que es genial cuando realmente tienes una UI que está en el motor es que ahora puedes hacerle cosas que una UI nativa aprovecharía, siendo la más importante de todas los shaders. Así que, preparé esta pequeña demo. Así que, siguiendo con el tema de nuestro laboratorio de operación clandestina secreta, tenemos este tipo de pequeño mundo aquí donde están sucediendo algunas cosas misteriosas. Instalación de salud abandonada con habitaciones de aspecto misterioso, y lo que vamos a intentar hacer es intentar hackearla en el juego, por supuesto, y de alguna manera interactuar con nuestra pequeña UI. Pero, como puedes ver, algo es diferente.

Ahora, lo que hemos hecho es tomar la UI básica de React Native y hemos aplicado algunos shaders geniales a ella. Así que, este shader va un poco con el tema de horror analógico. Así que, probemos algunas contraseñas. Me pregunto cuál sería la contraseña de una instalación secreta. Tal vez el cumpleaños de alguien. No. Probemos 1234, porque creo que la gente en instalaciones clandestinas secretas, sí, están usando contraseñas realmente estúpidas. Así que, ahora tenemos nuestra UI siendo renderizada en esta especie de textura sombreada sobre un mundo 3D que hemos creado para esto. Así que, ahora estamos viendo las imágenes de la cámara de seguridad de esta instalación sombría, tratando de entender qué está pasando. Parece realmente, realmente abandonada.

Parece que no está pasando mucho allí. Me pregunto si el libro de registro tendrá algo útil. Bien. Así que, transferencias de especímenes, temperaturas de mantenimiento, filtración de biohazard rota, pureza del aire excede el nivel base en un 300%. Esto parece realmente, realmente malo. Veamos nuestros experimentos. No tenemos acceso a eso. Bien. Así que, esto es solo una pequeña demo, pero te muestra cómo una simple UI de juego realmente puede ser elevada aplicando shaders y simplemente poniéndola en el juego. Y todo esto está impulsado por React Native. Así que, podemos continuar y volver a la clave de inicio de sesión. Y al igual que antes, podríamos editar cosas en tiempo real. Puedo volver al editor y, nuevamente, cambiar el color de fondo a rojo y recargarlo y boom. Tenemos el holograma y esta UI analógica holográfica mostrando un color diferente. Bien.

Así que, este es un flujo de trabajo con el que estarías muy, muy familiarizado, pero completamente en el motor, completamente nativo, y todo lo que acabas de ver se renderiza de forma nativa a través del sistema de UI nativo slate C++ real.

Entonces, ¿qué sigue? Creo que si has visto esto y piensas que es genial, probablemente querrás poner tus manos en esto lo antes posible. Y realmente me gustaría que la gente se involucre. Lo primero que me gustaría que hicieras es, mientras esto se está puliendo para compartirlo con el resto del mundo, ve a rnue.dev. Habrá un formulario allí para decirme cómo planeas usar React Native en Unreal Engine.

Estoy buscando socios para informar cómo esto debería crecer e informar decisiones arquitectónicas para la primera versión 1.0 del sistema. Después de algunas pruebas iniciales con algunos proyectos interesados, el código estará disponible en GitHub. Así que, por favor, ve a rnue.dev. Déjame saber para qué planeas usar esto. Conviértete en parte de la comunidad, y lanzaremos esto al público en GitHub en breve, con suerte dentro de los próximos meses. Y eso es todo. Muchas gracias. Estoy muy ansioso por el futuro donde podamos usar React Native para hacer juegos de una manera mucho mejor, mucho más integrada en rendimiento.