Ejecuta Juegos Dentro de Tus Aplicaciones React Native

Sí, gracias por tenerme aquí. Realmente emocionado finalmente. Dos años de no estar en conferencias presenciales para finalmente estar aquí, una de mis conferencias favoritas, así que realmente emocionado de ver al público.

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

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

Así que comencemos con la primera afirmación de que el game development es bastante difícil. Así que necesitas cuidar muchas cosas allí. Renderizado, 3D, materiales, iluminación, solo este tipo de cosas. Física, cómo interactúan los objetos. Cómo colisionan entre sí. ¿Hay gravedad, aceleración, todo este tipo de cosas? AI, cómo los enemigos atacan a tu personaje. Cómo los algoritmos de búsqueda de caminos, todo eso. Redes, motor de sonido porque no es suficiente con solo tener music regular en el juego. Son todos sonidos de interacciones, de efectos e incluso 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 hacer eso y básicamente necesitas obtener muchos y muchos activos creativos, que son horas y horas de trabajo de artistas 3D. O necesitas comprarlos. Te metes en el design de niveles. Cómo estructuras cada nivel, cómo pueden ser inherentemente más complejos que otros sin afectar realmente la jugabilidad. Hablando de eso, están las mecánicas de juego, que son diferentes de un juego a otro y que necesitas tener en cuenta. Animations, animations de personajes, animations de UI, todo eso. Y obviamente el postprocesamiento, porque los efectos importan si tienes un efecto de resplandor o cosas floreciendo o HDR y cosas así. Y la mayoría de estas cosas son atendidas por los motores de juego.

Entonces, necesitamos tener uno. Hay varios y los principales en el mercado, uno de ellos fue mencionado en la última charla. 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 React Native.

Ahora, Unity nos da muchas capacidades, eso es, desde su sitio web, tiene como 2D, 3D construcción de mundos, personajes, móvil, AR, VR, muchas cosas. Y puedes usar todas estas capacidades y envolverlas en aplicaciones React Native hoy en día, lo cual es bastante genial, creo.

Entonces, las características para móvil que Unity tiene, hay muchas de ellas, solo voy a repasar brevemente algunas de ellas. Entonces, tienes como un pipeline de renderizado con sistemas de iluminación y cómo presentas texturas realistas en objetos y cosas así. Herramientas nativas 2D si quieres crear juegos 2D complejos. Tienes scripting visual. Ahora, si digamos que no quieres escribir en C-sharp, que es el lenguaje que Unity está usando para el desarrollo, puedes usar herramientas visuales para crear realmente tu juego, como un juego completo usando 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 está yendo como a un nivel realmente 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 suministra.

Pero hoy, hablaremos sobre una característica principal que es un cambio de juego para los desarrolladores de React Native es usar Unity como una biblioteca. Entonces React Native y el código nativo, saben cómo interactuar entre sí, ¿verdad? Entonces, si miras como una versión realmente, realmente simplificada, entonces tienes el JavaScript, tienes el código nativo y podemos usar Unity como una biblioteca para hacer un puente a este código nativo desde el lado de Unity y viceversa, y hacer el mismo puente desde el nativo a JavaScript. Y eso es lo que estaremos haciendo hoy.

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

Está bien, genial. Entonces 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 estamos ejecutando a 60 cuadros por segundo. Ahora, si voy al lado de Unity, tengo dos caminos. Sí, claro, gracias. Sí, gracias. Y también lo haré más grande. Está bien, eso es mejor.

Así que tengo Unity funcionando dentro de una aplicación de React Native, y en la parte inferior está React Native. En la parte superior está Unity. Así que si cambio de color, ves 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 de React Native, ta-da, tengo el mensaje dentro de mi aplicación de React Native. Ahora puedes ver que es bastante rápido. Así que todo como, y puedes ver los cuadros en la parte superior, si te has dado cuenta, caen un poco pero no tanto. Ahora incluso puedo tener efectos de post procesamiento aquí para darle un aspecto de brillo a la vista. Pero vamos a entrar en juegos más complejos. Así que el personaje caminando, saltando, e incluso corriendo, un montón de física involucrada, y interacción más compleja. Así que veamos, en algún lugar, tiene escaleras, así que este tipo de juegos, y como puedes ver en la parte inferior, en realidad se renderiza React Native. Correcto, así que mira el performance. Todavía son 60 cuadros por segundo. Y déjame llegar a la cima. Como puedes ver, tenemos aquí a nuestro robot trabajando en el espacio exterior. Y está funcionando bastante bien. Ahora vuelvo a mi aplicación de React Native a una vista diferente, es una escena diferente dentro de Unity, y funciona como un encanto. Así que veamos cómo podemos lograr eso realmente.

Así que 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 en Unity Message callback, que básicamente establece el estado dentro de React, y tienes un mensaje publicado desde Unity dentro de la vista. Ahora, para publicar algo en Unity, básicamente, déjame poner el cursor aquí, o mejor, hazlo de esa manera, tengo estas funciones, 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 será en Unity, básicamente, parseada de nuevo en un objeto serializado, y luego puedo hacer lo que quiera con él. En mi caso, estableceré el color y el texto. Ahora, en Unity, se verá así. Tengo, como, nuestro objeto interop a la izquierda, el que está marcado allí. Y básicamente, ese es, como, el nombre del objeto que estoy llamando. Ahora, para habilitar esta funcionalidad rápidamente en Unity, necesito crear estos dos archivos. Estos son dos plugins nativos. Esa es la opción de cómo puedes conectar Unity a React Native.

Creas estos plugins. Tienen que estar en la carpeta de activos, plugins, iOS. En este ejemplo, pasaremos por el ejemplo de iOS, pero lo mismo es posible para Android.

Y luego, estos archivos nativos son básicamente dos archivos. Hay un archivo de encabezado y un archivo principal. Y entraremos un poco en Objective-C, y un poco en C-sharp, y un poco en JavaScript code. Así que, va a ser como tres lenguajes en la charla, así que espero que estés bien con eso.

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

Ahora, enviar un mensaje a nativo en Unity se hará de la siguiente manera. En Unity, usaremos el importe interno del alelo, y especificaremos el método a ser llamado 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 demo. Ahora, en Unity, lo adjuntas al componente, y especificas el método button click press para ser llamado, y así es como funciona la interacción de Unity a React Native en el lado de Unity de las cosas.

Ahora, recibir un mensaje de React Native en Unity, básicamente es tan simple como crear un script C sharp con el método que estarás llamando desde React Native. Has visto, simplemente llamas el nombre del objeto, el método, y será pasado a Unity. Ahora, depende de ti qué hacer allí. Yo simplemente cambié el color y el texto. Pero básicamente, puedes pasar cualquier data y hacer lo que quieras con eso.

Entonces, para hacer este tipo de integración, necesitas hacer algunas cosas. Y ahora vamos a pasar por los pasos, así que podrás hacerlo tú mismo. Así que primero que nada, en Unity, necesitas construir tu proyecto iOS. Esa es la ventana de configuración de construcción de Unity que cada vez que exportas a iOS, es solo una pantalla regular. Construyes como de costumbre. Nada diferente excepto tener estos dos plugins nativos, dos archivos para los plugins nativos. Ahora, en mi ejemplo, lo puse bajo la carpeta iOS de las compilaciones de Unity en el proyecto de React Native.

Ahora bien, en el proyecto de React Native, abriré un Xcode, mi espacio de trabajo regular de React Native, bajo la carpeta iOS, hay un espacio de trabajo de Xcode que abriré. Y luego simplemente añado mi proyecto Unity, el proyecto Unity construido, a este espacio de trabajo. Así que en este punto tenemos dos proyectos. Unity iPhone, que es el nombre predeterminado, y Unity Native, el proyecto de React Native.

Ahora bien, es realmente importante añadir Unity framework a los frameworks incrustados en Xcode porque necesitamos usar el framework para cierta interrupción. Otro paso importante es eliminar la vinculación de, como, vinculación binaria con bibliotecas, necesitas eliminar Unity framework de allí, de lo contrario simplemente se romperá y verás como errores salvajes. Y otra cosa útil es arrastrar y soltar los frameworks incrustados antes de los archivos de origen compilados porque lo que quieres hacer, quieres incrustar framework antes de realmente compilar los archivos nativos que estaremos escribiendo en un momento.

También necesitas cambiar la membresía de data. El proyecto Unity iPhone tiene una carpeta de data que contiene todos los activos y data para el proyecto Unity. Así que necesitamos cambiar la membresía a ser Unity framework porque cuando añades el proyecto, se asignará por defecto la membresía a nuestro proyecto de React Native, lo cual es algo que no queremos. Así que necesitamos cambiar eso. Necesitamos cambiar la ruta de los productos de construcción de Unity framework para apuntar a nuestro directorio de construcción porque queremos que todo se construya en un solo directorio de construcciones iOS. Y luego también necesitamos encontrar nuestros plugins nativos que escribimos. Y necesitamos cambiar su membresía también, en primer lugar a Unity framework y luego a ser público porque por defecto son privados. Y luego necesitamos construir el framework de Unity por separado.

Ahora estos pasos son absolutamente necesarios, necesitas pasar por ellos. Todo lo que está en esta diapositiva, necesitas pasar por ello cada vez que construyes tu proyecto Unity. Y eso es un poco la trampa porque si quieres cambiar cosas en Unity, básicamente cambias cosas, reconstruyes, haces los pasos, y obtienes cosas en React Native. Así que el proceso de desarrollo es un poco más lento, pero obtienes muchos beneficios de Unity. Así que para integrar con React Native, empezaremos por integrar regularmente los módulos nativos de la misma manera que lo hacemos al crear el Administrador de Vistas de React Native en nuestro ejemplo. Y 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 básicamente eventos para registrar la propiedad en Unity message en nuestro ejemplo y enviar eventos a JavaScript. Crearemos una clase separada para la vista Unity de React Native. Y entonces esta clase tendrá un método que acabamos de tener como postMessage fue el mensaje, el método que lo llamaremos desde JavaScript. De nuevo utilizaremos RCT export method para exportar eso al lado de JavaScript. Y utilizaremos Unity postMessage bit en la parte superior para hacer la comunicación. Y también necesitamos registrar eventos soportados. Ahora hay un enlace sobre cómo hacer eso en los docs oficiales de React Native sobre cómo realmente enviar eventos a JavaScript. Otra cosa realmente importante que necesitamos es básicamente asegurarnos de que corremos en el hilo principal porque de lo contrario habrá un hilo separado y no queremos lidiar con eso.

Así que usamos este método queue dispatch getMainQueue. De nuevo, eso está en los docs oficiales, cómo integramos cosas. En la vista de React Native Unity, no es el administrador de vistas, es el nombre de la vista un poco desviado. Pero básicamente enviamos un mensaje, usamos este send message to go with name. Ahora este es el nombre predeterminado de la API del framework de Unity para enviar realmente un mensaje a estos objetos de juego dentro de Unity y llamar al método en él. Y luego tenemos estos como envoltorios para el framework de Unity para asegurarnos de que se carga, y dice que el data bundle debe ser como esta carpeta de data, 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 UI, el evento sintético nativo, y básicamente requerimos el componente nativo y usamos nuestro administrador de vistas como la vista de React Native Unity, así. Ahora, en post message, realmente usaremos el administrador de UI, el administrador de UI get view manager config. Y publicamos el comando para enviar eso básicamente a Unity, por lo que llamará cosas en el lado nativo. Y esa es la forma en que lo usamos.

Ahora, vamos a recibir algunas noticias realmente geniales. Ahora, eso puede ser un poco complejo, ¿verdad? Para escribir todo esto, como, code nativo y cosas así. Así que hay una biblioteca para eso. Se llama React Native Unity. ¡Ta-da! Y entonces no necesitas escribir code nativo, ¿verdad? Así que eso es una gran parte de las cosas. Simplemente usas React Native Unity. Tiene la vista de Unity. También es compatible con Android. Así que acabo de describir cómo usarlo con iOS. Todavía necesitas hacer todos los pasos de configuración y construcción. Así que es realmente bueno ahora que sabes cómo funciona realmente bajo el capó.

Así que hay algunos enlaces útiles que puedes capturar y obtener. Hay un code de demostración en este repositorio. Para aprender Unity, puedes ir a learnunity.com. Hay caminos increíbles para aprender realmente 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 para mí después de la charla, etc., así que ponte en contacto en Twitter. Ese es mi Twitter en la parte superior, y puedes contactarme para consultas en mi sitio web.

Y también tengo estos foros. Estaré realizando masterclass y cursos en los próximos años, así que si estás interesado en aprender más sobre cuándo se realizarán, puedes simplemente completarlo. Y prometo no enviar spam. Solo te enviaré un correo electrónico cuando cualquier curso o masterclass esté listo.

Y creo que en este punto el clicker dejó de funcionar. Y la razón de eso es que ya he terminado, y creo que tenemos varios minutos para preguntas aquí, y muchas gracias por escuchar. ¡Buen trabajo! Sí, muchas gracias Vladimir. Adelante. ¡Vamos vamos vamos vamos! Aunque tenemos algunas preguntas. ¿Nos estamos quedando cortos de tiempo? Casi, sí.

Entonces, hay una pregunta. ¿Cuál sería un caso de uso real para integrar Unity en React Native? ¡Lo vi venir! Eso es como, sí. El caso de uso real, el escenario hoy en día, en su mayoría es AR. Porque si quieres integrar AR en tus aplicaciones de React Native, ahora mismo es o bien usas otros marcos como Viro, por ejemplo, que también es muy bueno. Pero si quieres más capacidades nativas y aprovechar todas las capacidades que ARKit tiene para ofrecer sobre ARCore, Unity tiene un marco ARFoundation que te permite aprovechar casi todo lo que puedes hacer con ARKit. Y ahora puedes hacer un puente con Unity. Ese es uno de los casos de uso. Hay bastantes. Quiero decir, 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 ToggleView antes de la mía era 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 realmente una buena respuesta porque también cubriste otra pregunta que si AR es realmente posible. Hay otra pregunta de seguimiento a la primera. ¿Cuál sería un caso de uso real para Unity dentro de Reagnative? Mostraste fuegos artificiales y cosas así, pero ¿qué crees que en tu perspectiva es un caso de uso real de Unity? Aparte de AR, ¿qué piensas de las bibliotecas de UI que ya existen en Unity? ¿Podemos aprovecharlas? Definitivamente a veces y es bueno que lo menciones porque la tienda de activos de Unity tiene muchos activos increíbles que puedes comprar y algunos de esos son bibliotecas de UI realmente sofisticadas con un montón de efectos y fuegos artificiales, así que si quieres tener algo como relacionado con la física y creo que como 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 incrustarlos dentro de la aplicación de React Native y como has visto obtienes un rendimiento bastante bueno en eso.

Hablando de rendimiento, ¿qué tan eficiente es tal UI en escenarios de interacción rápida en el juego especialmente dado 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 como React Native porque básicamente lo que estás haciendo es serializar los mismos datos y pasarlos a través del puente que llamas en los métodos nativos que van a Unity así que no hay como otra capa aquí. Así que el rendimiento será prácticamente el mismo como hablando de pasar a través del puente será prácticamente el mismo que las aplicaciones regulares de React Native. Dicho esto, si quieres hacer las cosas más eficientes, yo pensaría en serializar los datos pasándolos a Unity y entregando la lógica a Unity para hacer las animaciones y cosas así y luego pasar los datos de vuelta.

Por ejemplo, aquí tuve muchas renderizaciones y pasé cosas a través de Unity para la demostración, pero te aconsejaría que no lo hicieras, porque eso eventualmente genera mucho tráfico a través del puente, y no quieres eso. Sí, el hilo estará sobrecargado de todos modos, así que creo que ese es uno de los inconvenientes de React Native, pero creo que la nueva arquitectura va a resolver algunas partes de eso también.

Hablando de módulos nativos, ¿alguna vez has pensado en los módulos nativos de Expo, como para exponer la vista de Unity usando módulos nativos de Expo? ¿A qué te refieres, como exponiendo um.. Como 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 necesitas experimentar un poco con eso. Solo para dar un poco de contexto, Unity en algún momento tuvo algo como un registro de proveedores, no tenían esta característica, Unity como biblioteca es bastante nueva, relativamente, ya que las cosas van más lentas en el mundo del desarrollo de juegos, es como de hace un par de años, pero aún así, desde la perspectiva de Unity, es algo relativamente nuevo, por lo que no se ha experimentado mucho en ese sentido, especialmente con React Native. Pero sí, definitivamente es algo a lo que hay que prestar atención y probarlo.

Y tenemos una pregunta más, ¿por qué no usar Unity y construir iOS sin envoltorios adicionales, cuál es el beneficio en sí mismo? ¿Si solo usamos Unity? Sí, sin pasar por React Native, ¿cuál crees que es el beneficio aquí? Creo que necesitas identificar cuál es el caso de uso de tu aplicación. Así que hay una afirmación regular de los consultores, depende, ¿verdad? Por lo general, diría que si tu aplicación está realmente orientada a una interfaz de usuario sofisticada y a la renderización y a la física y cosas así, no hay razón para usar React Native, pero en muchos casos vemos que los clientes ya tienen aplicaciones existentes en React Native, quieren introducir más capacidades de juego y hasta cierto punto limita su imaginación, diría. Si quieren ver algo sofisticado, no pueden hacerlo con TypeScript y JavaScript, necesitan hacer algo más relacionado con los juegos. En ese caso, Unity y React Native serán la buena elección. Si es algo más simple, entonces es React Native o Unity. Pero es bueno saber que existe la integración y abre muchas oportunidades para la experimentación y los proyectos reales.

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

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