Ejecuta juegos dentro de tus aplicaciones React Native

Sí, gracias por tenerme aquí. Realmente emocionado finalmente. Dos años sin estar en conferencias en persona y finalmente estar aquí, una de mis conferencias favoritas, así que estoy muy emocionado de ver a la audiencia.

Y hoy vamos a hablar sobre cosas interesantes. Hablaremos sobre cómo puedes ejecutar juegos dentro de tus aplicaciones de React Native. Así que, sí. El clicker está funcionando. Genial.

Así que, un poco sobre mí. Soy Vladimir Novik, soy arquitecto de software y consultor, y hago un montón de cosas en todos estos campos, y más allá de eso. Si estás interesado en algo dentro de estos campos, puedes contactarme en Twitter o en mi sitio web.

Comencemos con la primera afirmación de que el desarrollo de juegos es bastante difícil. Así que tienes que ocuparte de muchas cosas allí. Renderizado, 3D, materiales, iluminación, solo este tipo de cosas. Física, cómo interactúan los objetos. Cómo chocan entre sí. ¿Hay gravedad, aceleración, todas estas cosas? IA, cómo los enemigos atacan a tu personaje. Cómo funcionan los algoritmos de búsqueda de ruta, todo eso. Redes, motor de sonido porque no es suficiente tener música regular en el juego. Son todos los sonidos de interacciones, de efectos e incluso los sonidos de los pasos cuando tu personaje está caminando.

Y cuando piensas en un juego, comienzas con un arte conceptual. Entonces, necesitas idear cómo hacerlo y básicamente necesitas obtener muchas y muchas activos creativos, que son horas y horas de trabajo de artistas 3D. O necesitas comprarlos. Entras en el diseño de niveles. Cómo estructurar cada nivel, cómo pueden ser inherentemente más complejos que otros sin afectar realmente la jugabilidad. Hablando de eso, hay mecánicas de juego, que son diferentes de un juego a otro y que debes tener en cuenta. Animaciones, animaciones de personajes, animaciones de la interfaz de usuario, todo eso. Y obviamente el post procesamiento, porque los efectos importan si tienes un efecto de brillo o HDR y cosas así. Y la mayoría de estas cosas son atendidas por los motores de juegos.

Entonces, necesitamos tener uno. Hay varios en el mercado, uno de ellos fue mencionado en la charla anterior. Es Unity.

Ahora, el otro es Unreal, pero hoy hablaremos sobre Unity game engine, y cómo podemos crearlo, crear un envoltorio para Unity y envolverlo en nuestra aplicación de React Native.

Ahora, Unity nos brinda muchas y muchas capacidades, es decir, según su sitio web, tiene construcción de mundos en 2D, 3D, personajes, móvil, AR, VR, muchas cosas. Y actualmente puedes usar todas estas capacidades y envolverlas en aplicaciones de React Native, lo cual es bastante genial, creo.

Entonces, características para móviles que tiene Unity, hay muchas, solo mencionaré brevemente algunas de ellas. Por ejemplo, tienes un pipeline de renderizado con sistemas de iluminación y cómo presentar texturas realistas en objetos y cosas así. Herramientas nativas en 2D si quieres crear juegos 2D complejos. Tienes scripting visual. Ahora, si no quieres escribir en C#, que es el lenguaje que Unity utiliza para el desarrollo, puedes usar herramientas visuales para crear realmente tu juego, como un juego completo utilizando scripting visual. Soluciones de armonización, AR, que es una de las principales razones para usar Unity dentro de React Native, porque AR dentro de Unity va a un nivel muy bajo, trabajando con ARKit y ARCore y es realmente, realmente eficiente. Y puedes ver otras características aquí en el enlace de arriba sobre lo que Unity proporciona.

Pero hoy, hablaremos sobre una característica principal que es un cambio de juego para los desarrolladores de React Native, que es usar Unity como una biblioteca. Entonces, React Native y código nativo, saben cómo interactuar entre sí, ¿verdad? Si miras una versión muy simplificada, tienes el JavaScript, tienes el código nativo y podemos usar Unity como una biblioteca para conectar este código nativo desde el lado de Unity y viceversa, y hacer la misma conexión desde el nativo al JavaScript. Y eso es lo que haremos hoy.

Pasemos a la demostración. Porque quiero mostrarte lo que puedes lograr con Unity y React Native. Centrándonos también en el rendimiento, veremos qué tan eficiente es. Carguemos el inicio. Toma un poco de tiempo cargar todo. Veamos.

Bien, genial. Tenemos una aplicación regular de React Native. Solo una pantalla en blanco, ¿verdad? Y en la parte superior tienes el perfil de rendimiento, es un poco pequeño para ver, pero puedes ver que se ejecuta a 60 cuadros por segundo. Ahora, si voy al lado de Unity, tengo dos rutas. Sí, claro, gracias. Sí, gracias. Y también lo haré más grande. Bien, eso es mejor.

Así que tengo Unity ejecutándose dentro de la aplicación React Native y en la parte inferior está React Native. En la parte superior está Unity. Si cambio el color, verás que inmediatamente el color cambia dentro de Unity. Ahora, si escribo texto, escribiré, hola Berlín. Podemos ver que este texto se renderiza dentro de Unity y obviamente puedo borrarlo.

Ahora, si hago clic en el mensaje React Native, ta-da, tengo el mensaje dentro de mi aplicación React Native. Ahora puedes ver que es bastante rápido. Así que todo, y puedes ver los cuadros en la parte superior, si te has dado cuenta, bajan un poco pero no mucho. Ahora incluso puedo tener efectos de postprocesamiento aquí para darle un aspecto de brillo a la vista. Pero vayamos a juegos más complejos. Así que el personaje caminando, saltando e incluso corriendo, con mucha física involucrada y una interacción más compleja. Veamos, en algún lugar hay una escalera, juegos de este tipo, y como puedes ver en la parte inferior, en realidad se está renderizando React Native. ¿Correcto, mira el rendimiento? Todavía es de 60 cuadros por segundo. Y déjame ir a la parte superior. Como puedes ver, aquí tenemos a nuestro robot trabajando en el espacio exterior. Y funciona bastante bien. Ahora vuelvo a mi aplicación React Native a una vista diferente, es una escena diferente dentro de Unity, y funciona de maravilla. Así que veamos cómo podemos lograr eso.

Después de la charla, tendrás un video de la misma demostración, así que si quieres ver eso, y en React Native, es tan simple como usar Unity View, un componente que he creado, y veremos cómo crear eso. Y tengo el callback Unity Message, que básicamente establece el estado dentro de React, y tienes un mensaje publicado desde Unity dentro de la vista. Ahora, para enviar algo a Unity, básicamente, déjame poner el cursor aquí, o mejor dicho, hacerlo de esta manera, tengo esta función, postMessage, y uso el GameObject dentro del Editor de Unity, su nombre, y uso el nombre del método del script que está adjunto a ese GameObject, y paso la carga útil. Esta carga útil se analizará en Unity, básicamente, se convertirá en un objeto serializado y luego puedo hacer lo que quiera con él. En mi caso, estableceré el color y estableceré el texto. Ahora, en Unity, se verá así. Tengo, como, nuestro objeto de interoperabilidad a la izquierda, el que está marcado allí. Y básicamente, ese es el nombre del objeto al que estoy llamando. Ahora, para habilitar esta funcionalidad rápidamente en Unity, necesito crear estos dos archivos. Estos son dos complementos nativos. Esa es la opción de cómo puedes conectar Unity en React Native.

Creas estos complementos. Deben estar en la carpeta assets, plugins, iOS. En este ejemplo, veremos el ejemplo de iOS, pero lo mismo es posible para Android.

Luego, estos archivos nativos son básicamente dos archivos. Hay un archivo de encabezado y un archivo principal. Entraremos un poco en Objective-C, un poco en C# y un poco de código JavaScript. Así que serán tres lenguajes en la charla, espero que estés bien con eso.

El primero es este archivo de encabezado, y tiene dos funciones básicamente. Tiene el registro de la API para las llamadas nativas, que será llamado por el framework de Unity, y registrará nuestra función sendMessageToMobileApp, y podremos llamarla desde Unity. Básicamente, usamos X y C, y escribimos nuestro mensaje aquí bajo sendMessageToMobileApp. Básicamente, lo hacemos disponible para Unity. Eso es todo. Eso es todo lo que necesitamos hacer desde la perspectiva de los complementos nativos en Unity.

Ahora, enviar mensajes a nativo en Unity se hará de la siguiente manera. En Unity, usaremos la importación interna allele e especificaremos el método que se llamará en el lado nativo. En ese caso, el framework de Unity buscará el nombre del método y lo llamará. Y lo adjuntaremos a un botón y llamaremos a la clase NativeAPI, sendMessageToMobileApp, y eso es lo que has visto en la demostración. Ahora, en Unity, adjuntas eso al componente y especificas el método que se llamará al presionar el botón, y así es como funciona la interacción de Unity a React Native en el lado de Unity.

Ahora, recibir mensajes de React Native en Unity es tan simple como crear un script en C# con el método que llamarás desde React Native. Has visto que simplemente llamas al nombre del objeto, el método y se pasará a Unity. Ahora, depende de ti qué hacer allí. Yo solo cambié el color y el texto. Pero básicamente, puedes pasar cualquier dato y hacer lo que quieras con eso.

Para hacer este tipo de integración, debes hacer algunas cosas. Y ahora pasaremos por los pasos para que puedas hacerlo tú mismo. Primero, en Unity, debes construir tu proyecto de iOS. Esa es la ventana de configuración de construcción de Unity que cada vez que exportas a iOS, es solo una pantalla normal. Construyes como de costumbre. Nada diferente excepto tener estos dos complementos nativos, dos archivos para los complementos nativos. Ahora, en mi ejemplo, los coloqué en la carpeta Unity builds iOS de mi proyecto de React Native.

Ahora, en el proyecto de React Native, abriré Xcode, mi espacio de trabajo regular de React Native, dentro de la carpeta iOS, hay un espacio de trabajo de Xcode que abriré. Luego, simplemente agregaré mi proyecto de Unity, el proyecto de Unity compilado, a este espacio de trabajo. En este punto, tenemos dos proyectos: Unity iPhone, que es el nombre predeterminado, y Unity Native, el proyecto de React Native.

Es realmente importante agregar el framework de Unity a los frameworks integrados en Xcode porque necesitamos usar el framework para ciertas interrupciones. Otro paso importante es eliminar la vinculación binaria del framework de Unity con las bibliotecas, debes eliminar el framework de Unity de allí, de lo contrario, se romperá y verás errores inesperados. Otra cosa útil es arrastrar y soltar los frameworks integrados antes de las fuentes compiladas porque lo que quieres hacer es incrustar el framework antes de compilar los archivos nativos que escribiremos en un momento.

También debes cambiar la membresía de datos. El proyecto de Unity iPhone tiene una carpeta de datos que contiene todos los activos y datos del proyecto de Unity. Por lo tanto, debemos cambiar la membresía para que sea el framework de Unity, porque cuando agregas el proyecto, por defecto se asigna la membresía a nuestro proyecto de React Native, lo cual no queremos. Así que debemos cambiar eso. Debemos cambiar la ruta de los productos de compilación del framework de Unity para que apunte a nuestro directorio de compilación, porque queremos que todo se compile en un solo directorio de compilación de iOS. Luego, también debemos encontrar nuestros complementos nativos que hemos escrito y cambiar su membresía, primero al framework de Unity y luego a pública, porque por defecto son privados. Y luego debemos construir el framework de Unity por separado.

Ahora, estos pasos deben seguirse absolutamente. Todo lo que está en esta diapositiva, debes seguirlo cada vez que construyas tu proyecto de Unity. Y eso es un poco complicado porque si quieres hacer cambios en Unity, básicamente cambias las cosas, reconstruyes, haces los pasos y obtienes cosas en React Native. Por lo tanto, el proceso de desarrollo es un poco más lento, pero obtienes muchos beneficios de Unity. Para integrarlo con React Native, comenzaremos integrando los módulos nativos de la misma manera que creamos un Administrador de Vistas de React Native en nuestro ejemplo. Utilizaremos RCT export module, que es la forma de exportar el módulo al lado de JavaScript. Y utilizaremos RCT export view property, que nos da la capacidad de enviar eventos para registrar una propiedad en el mensaje de Unity en nuestro ejemplo y enviar eventos a JavaScript. Crearemos una clase separada para la vista de Unity en React Native. Y esta clase tendrá el método que acabamos de tener, como postMessage era el mensaje, el método lo llamaremos desde JavaScript. Nuevamente utilizaremos RCT export method para exportarlo al lado de JavaScript. Y utilizaremos Unity postMessage en la parte superior para realizar la comunicación. Y también debemos registrar eventos compatibles. Hay un enlace en la documentación oficial de React Native sobre cómo hacer eso, cómo enviar eventos a JavaScript. Otra cosa realmente importante es asegurarnos de que se ejecute en el hilo principal, de lo contrario, habrá un hilo separado y no queremos lidiar con eso.

Entonces, utilizamos este método queue dispatch getMainQueue. Nuevamente, eso está en la documentación oficial, cómo integramos cosas. En la vista de Unity de React Native, no es el administrador de vistas, es el nombre de la vista un poco diferente. Pero básicamente enviamos un mensaje, utilizamos este send message para ir con el nombre. Ahora, este es el nombre predeterminado de la API del framework de Unity para enviar un mensaje a estos objetos de juego dentro de Unity y llamar al método en él. Y luego tenemos estos envoltorios para el framework de Unity para asegurarnos de que se cargue, y dice que el paquete de datos sea como esta carpeta de datos, etc.

Ahora, volviendo al lado de JavaScript. En el lado de JavaScript, ¿recuerdas esta vista de Unity que teníamos, verdad? Así es como escribimos esta vista de Unity. Obtenemos el administrador de interfaz de usuario, el evento sintético nativo y básicamente requerimos el componente nativo y utilizamos nuestro administrador de vistas como la vista de React Native Unity, así. Ahora, en post message, realmente utilizaremos el administrador de interfaz de usuario, el administrador de vistas de la interfaz de usuario get. Y enviamos el comando para enviar eso a Unity, para que llame a cosas en el lado nativo. Y así es como lo usamos.

Ahora, obtengamos algunas noticias realmente geniales. Ahora, eso puede ser un poco complejo, ¿verdad? Escribir todo este código nativo y cosas así. Así que hay una biblioteca para eso. Se llama React Native Unity. ¡Ta-da! Y así que no es necesario escribir código nativo, ¿verdad? Eso es una gran parte de las cosas. Solo usa React Native Unity. Tiene la vista de Unity. También es compatible con Android. Así que acabo de describir cómo usarlo con iOS. Aún necesitas hacer toda la configuración y los pasos de compilación. Así que ahora sabes cómo funciona realmente bajo el capó.

Entonces, hay algunos enlaces útiles que puedes capturar y obtener. Hay un código de demostración en este repositorio. Para aprender Unity, puedes ir a learnunity.com. Hay caminos increíbles para aprender el desarrollo de Unity. Hay una tienda de activos de Unity donde puedes comprar activos por una fracción del costo. Y si tienes alguna pregunta después de la charla, etc., contáctame en Twitter. Ese es mi Twitter en la parte superior, y puedes enviarme un mensaje para consultas en mi sitio web.

Y también tengo estos foros. Realizaré talleres y cursos en los próximos años, así que si estás interesado en aprender más sobre cuándo se realizarán, simplemente completa el formulario. Prometo no hacer spam, solo te enviaré un correo electrónico cuando algún curso o taller esté listo.

Y creo que en este punto el clicker dejó de funcionar. La razón es que ya he terminado y creo que tenemos varios minutos para preguntas aquí. ¡Muchas gracias por escuchar! ¡Buen trabajo! Sí, muchas gracias Vladimir. Adelante, ven, ven, ven. Sin embargo, tenemos algunas preguntas. ¿Se nos está acabando el tiempo? Casi, sí.

Entonces, hay una pregunta. ¿Cuál sería un caso de uso del mundo real para integrar Unity en React Native? ¡Lo vi venir! Eso es, sí. El caso de uso del mundo real en estos días, principalmente es AR. Porque si quieres integrar AR en tus aplicaciones de React Native, ahora mismo puedes usar otros frameworks como Viro, por ejemplo, que también es bueno. Pero si quieres más capacidades nativas y aprovechar todas las capacidades que ARKit tiene para ofrecer sobre ARCore, Unity tiene un marco de trabajo ARFoundation que te permite aprovechar casi todo lo que puedes hacer con ARKit. Y ahora puedes conectar eso con Unity. Ese es uno de los casos de uso. Hay muchos más. Puedes hacer gamificación, puedes hacer anuncios llamativos, sé que todos odiamos los anuncios, pero a veces impulsan el negocio. He oído que los anuncios de Unity son bastante buenos. Puedes usar anuncios, puedes usar algunas vistas 3D que están realmente orientadas al rendimiento. Para juegos simples, la vista ToggleView antes de la mía fue bastante buena para probar cosas en juegos 2D y publicarlos como una vista web. Realmente me gustan las capacidades de Unity en general.

Esa es una buena respuesta porque también cubriste otra pregunta que es si AR es realmente posible. Hay otra pregunta de seguimiento a la primera. ¿Cuál sería un caso de uso real de Unity dentro de React Native? Mostraste fuegos artificiales y cosas así, pero ¿qué piensas tú en tu perspectiva que es un caso de uso real de Unity? Aparte de AR, ¿qué opinas sobre las bibliotecas de UI que ya existen en Unity? ¿Podemos aprovecharlas? Definitivamente, a veces es posible y es bueno que lo menciones porque la tienda de activos de Unity tiene muchas cosas increíbles que puedes comprar y algunas de ellas son bibliotecas de UI realmente llamativas con muchos efectos y fuegos artificiales, por lo que si quieres tener algo en general como relacionado con la física y creo que las partículas también están relacionadas con la física, como los fuegos artificiales y cosas así, puedes usar estos activos de la tienda de activos y embeberlos en la aplicación de React Native y como has visto, obtienes un buen rendimiento en eso.

Hablando de rendimiento, ¿qué tan eficiente es esa interfaz de usuario en escenarios de interacción rápida en el juego, especialmente considerando que en cada llamada se incluye la serialización y deserialización de JSON? Básicamente, no estás introduciendo otro puente, básicamente estás en el mismo mundo que en general con React Native porque básicamente lo que estás haciendo es serializar los mismos datos y pasarlos a través del puente que llamas a métodos nativos que van a Unity, por lo que no hay otro nivel aquí. Por lo tanto, el rendimiento será prácticamente el mismo que en las aplicaciones regulares de React Native. Dicho esto, si quieres que las cosas sean más eficientes, considera la serialización de los datos que pasas a Unity y transfiere la lógica a Unity para hacer todas las animaciones y cosas así, y luego pasa los datos de vuelta.

Por ejemplo, aquí tenía muchos renders y pasando cosas a través de Unity, eso es solo para la demostración, pero aconsejaría no hacer eso porque eventualmente habrá mucho tráfico a través del puente, y eso no es deseable. Sí, el hilo se saturará de todos modos, por lo que creo que ese es un inconveniente de React Native, pero creo que la nueva arquitectura resolverá algunas partes de eso también.

Hablando de módulos nativos, ¿alguna vez has pensado en los módulos nativos de Expo para exponer la vista de Unity? ¿A qué te refieres, como exponer...? Sí, Expo ha creado estos módulos nativos... Ah, sí, básicamente con Expo, sí, he pensado en eso, es algo que no he probado y que debes experimentar un poco. Solo para dar un poco de contexto, en algún momento Unity tenía algo así como un registro de proveedores, no tenían esta función, Unity como biblioteca es bastante nueva, relativamente, en comparación con el desarrollo de juegos, lleva un par de años, pero aún así, desde la perspectiva de Unity, es relativamente nueva, por lo que no se ha experimentado mucho en ese sentido, especialmente con React Native. Pero sí, definitivamente es algo que vale la pena investigar y probar.

Tenemos una pregunta más, ¿por qué no usar Unity y construir iOS sin envoltorios adicionales, cuál es el beneficio en sí? Si solo se usa Unity, ¿qué opinas? Creo que debes identificar cuál es el caso de uso de tu aplicación. Como siempre se dice, depende. Por lo general, diría que si tu aplicación se centra mucho en una UI llamativa, renderizado y física, no hay razón para usar React Native, pero en muchos casos vemos que los clientes ya tienen aplicaciones en React Native y quieren introducir más capacidades de juegos, lo que limita su imaginación en cierta medida. En ese caso, Unity y React Native serán una buena elección. Si es algo más sencillo, entonces es React Native o Unity. Pero es bueno saber que existe la integración y que abre muchas oportunidades para la experimentación y proyectos reales.

Hablando de la integración, ¿alguna vez has pensado en el tamaño del paquete después de integrar Unity? Sí, el paquete será considerablemente más grande porque, obviamente, con Unity necesitas lidiar con todos los activos 3D si estás trabajando en un juego. Estas demostraciones, creo que tienen un paquete de 150 megabytes, lo cual es bastante grande, pero si piensas en el desarrollo de juegos en general, por lo general tienen un paquete grande. Así que eso es algo a tener en cuenta, obviamente. Bueno, es algo nuevo que mejorará con el tiempo, pero ahora también debemos pensar en los árboles y la naturaleza, solo digo, porque 150 megabytes solo para un Hola Mundo o una caja 3D es bastante, pero definitivamente puede mejorar. Hay opciones de optimización, hablando de eso, hay una opción en Unity para usar paquetes de activos, por lo que básicamente no descargas todos los activos, los obtienes a través de la red sobre la marcha. Existe la capacidad para hacer eso, y eso es algo que debes tener en cuenta al desarrollar tu aplicación, especialmente con AR, por ejemplo, porque tienes todos estos modelos 3D, que realmente ocupan espacio en el dispositivo.

Gracias. Creo que nos estamos quedando sin tiempo, así que sí, demos un gran agradecimiento a Vladimir. Muchas gracias. Gracias.