Ejecuta Juegos Dentro de Tus Aplicaciones React Native

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

En esta charla veremos cómo podemos conectar la aplicación React Native con el motor de juegos comúnmente utilizado Unity3d para una interacción bidireccional entre el juego y la aplicación React Native


This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Vladimir Novik habla sobre cómo ejecutar juegos dentro de aplicaciones nativas de React, el uso del motor Unity, y cómo integrar Unity en React Native para aprovechar funcionalidades como AR, VR, y renderizado 3D.

Los desafíos incluyen el manejo de renderizado, 3D, materiales, iluminación, física de objetos, inteligencia artificial, redes y sonido, lo que requiere atención a muchos aspectos técnicos complejos.

Unity puede integrarse como una biblioteca en React Native, lo que permite un puente entre el código JavaScript de React Native y el código nativo, utilizando Unity para mejorar la capacidad de las aplicaciones móviles con características como AR y juegos 3D.

Usar Unity como biblioteca en React Native permite aprovechar las capacidades avanzadas de Unity en aplicaciones móviles, como gráficos 3D, AR y VR, mejorando la interactividad y la experiencia del usuario.

Se requiere construir el proyecto Unity, añadirlo al espacio de trabajo de Xcode en React Native, manejar la vinculación de frameworks y asegurar la correcta configuración de plugins y archivos nativos para la integración.

Integrar Unity puede afectar el rendimiento debido al manejo de recursos pesados como gráficos 3D y animaciones. Se recomienda optimizar el manejo de datos y considerar el uso de paquetes de activos para reducir la carga.

Vladimir Novick
Vladimir Novick
28 min
02 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy discute la integración de Unity en aplicaciones React Native para el desarrollo de juegos. Unity ofrece una amplia gama de capacidades y puede integrarse sin problemas con React Native. La integración implica el uso del componente Unity View y el callback de Unity Message para habilitar la comunicación entre las dos plataformas. Se crean plugins nativos para facilitar la comunicación entre Unity y React Native. El rendimiento de Unity en las aplicaciones React Native es comparable a las aplicaciones React Native regulares, y la decisión de usar Unity o React Native depende del caso de uso de la aplicación y la necesidad de capacidades avanzadas de interfaz de usuario y juegos.

1. Introducción al desarrollo de juegos en React Native

Short description:

Hoy hablaremos de cómo puedes ejecutar juegos dentro de tus aplicaciones nativas de React. El desarrollo de juegos es difícil e implica renderizado, física, IA, redes, motor de sonido, arte conceptual, activos creativos, diseño de niveles, mecánicas de juego, animaciones, UI y postprocesamiento. Los motores de juego se encargan de la mayoría de estas tareas.

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.

2. Uso de Unity como una biblioteca en React Native

Short description:

Hoy hablaremos sobre el uso de Unity como una biblioteca en React Native. Unity ofrece una amplia gama de capacidades, incluyendo la construcción de mundos en 2D y 3D, personajes, móvil, AR, VR y más. Nos centraremos en la característica principal de usar Unity como una biblioteca, que permite una integración sin problemas con React Native. También tendremos una demostración para mostrar las posibilidades y el rendimiento de Unity en React Native.

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.

3. Integrando Unity en React Native

Short description:

Unity se puede integrar en las aplicaciones de React Native utilizando el componente Unity View y el callback de Unity Message. Mediante la función postMessage, se pueden enviar datos desde React Native a Unity, permitiendo una comunicación fluida entre las dos plataformas. Para habilitar esta funcionalidad en Unity, se deben crear dos plugins nativos. Esto proporciona una forma de conectar Unity con React Native.

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.

4. Integrando Plugins Nativos en Unity

Short description:

Para integrar plugins nativos en Unity, necesitas crear dos archivos: un archivo de encabezado y un archivo principal. El archivo de encabezado contiene la API de registro para llamadas nativas, mientras que el archivo principal maneja la función sendMessageToMobileApp. Para enviar mensajes desde Unity a React Native, utiliza el importe interno de alelo en Unity y especifica el método a ser llamado en el lado nativo. Para recibir mensajes de React Native en Unity, crea un script C sharp con el método deseado. Finalmente, en Unity, construye tu proyecto iOS y coloca los plugins nativos en la carpeta iOS de las compilaciones de Unity de tu proyecto 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.

5. Unity con React Native en iOS

Short description:

Para integrar Unity en React Native, necesitas seguir varios pasos. Estos incluyen agregar el marco de Unity a los marcos incrustados en Xcode, eliminar la vinculación del marco de Unity de la vinculación binaria con bibliotecas, cambiar la membresía de datos del proyecto Unity iPhone, cambiar la ruta de los productos de construcción del marco de Unity, encontrar y cambiar la membresía de los plugins nativos, y construir el marco de Unity por separado. Además, necesitas integrar módulos nativos creando un Administrador de Vistas de React Native, utilizando RCT export module y RCT export view property, creando una clase separada para la vista Unity de React Native, exportando métodos al lado de JavaScript usando RCT export method, utilizando Unity postMessage para la comunicación, registrando eventos soportados, y asegurándote de que el código se ejecuta en el hilo principal.

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.

6. Integrando React Native Unity y Enlaces Útiles

Short description:

Usamos el método queue dispatch getMainQueue para integrar la vista de React Native Unity. En el lado de JavaScript, obtenemos el administrador de UI, el evento sintético nativo, y usamos nuestro administrador de vistas como la vista de React Native Unity. Existe una biblioteca llamada React Native Unity que elimina la necesidad de escribir código nativo. También es compatible con Android. Los enlaces útiles incluyen un código de demostración, learnunity.com para aprender Unity, y la tienda de activos de Unity para comprar activos.

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.

QnA

Casos de Uso de la Integración de Unity y Rendimiento

Short description:

Estaré realizando masterclass y cursos en los próximos años. El caso de uso real para la integración de Unity en React Native es principalmente AR. Unity tiene un marco ARFoundation que te permite aprovechar casi todo lo que puedes hacer con ARKit. Aparte de AR, puedes usar Unity para gamificación, anuncios llamativos, vistas 3D y bibliotecas de UI de la tienda de activos de Unity. El rendimiento de la UI en escenarios de interacción rápida en el juego es similar a las aplicaciones regulares de React Native. Para mejorar el rendimiento, considera serializar los datos y entregar la lógica a Unity.

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.

Consideraciones de Integración de Unity

Short description:

Pasar demasiadas cosas a través del puente de Unity puede causar congestión de tráfico. La nueva arquitectura de React Native tiene como objetivo abordar este problema. Los módulos nativos de Expo pueden ser utilizados para exponer la vista de Unity, pero no se ha experimentado mucho con esta integración. La decisión de usar Unity o React Native depende del caso de uso de la aplicación y de la necesidad de capacidades avanzadas de UI y juegos. La integración de Unity aumentará el tamaño del paquete, especialmente si se trata de activos 3D. Las opciones de optimización, como el uso de paquetes de activos, pueden ayudar a gestionar el tamaño del paquete. Gracias.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
Top Content
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
React Advanced 2023React Advanced 2023
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Llevando los Componentes del Servidor React a React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Llevando los Componentes del Servidor React a React Native
Top Content
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
Detectar y evitar problemas comunes de rendimiento y memoria en compilaciones de Unity WebGL
JS GameDev Summit 2022JS GameDev Summit 2022
10 min
Detectar y evitar problemas comunes de rendimiento y memoria en compilaciones de Unity WebGL
Top Content
Today's Talk focuses on avoiding performance and memory issues in Unity WebGL builds. The importance of managing memory and keeping the heap size small is highlighted. Techniques such as using asset bundles or an addressable system can help reduce memory usage. The limitations of garbage collection in WebGL builds are discussed, along with tips for optimizing Unity code. Tools like Backtrace can assist in debugging memory and performance issues.
Herramienta Multiplataforma de React Native Kotlin
React Day Berlin 2022React Day Berlin 2022
26 min
Herramienta Multiplataforma de React Native Kotlin
Top Content
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.

Workshops on related topic

Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
Workshop
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Pruebas Efectivas con Detox
React Advanced 2023React Advanced 2023
159 min
Pruebas Efectivas con Detox
Workshop
Josh Justice
Josh Justice
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena?
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
Creación para Web y Móvil con Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Creación para Web y Móvil con Expo
Workshop
Josh Justice
Josh Justice
Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web? ¡Para escribir una aplicación para Android, iOS y la web en un solo código base! Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas.
En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web!
Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil
Requisitos previos- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/