Ejecuta juegos dentro de tus aplicaciones React Native

Rate this content
Bookmark

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


28 min
02 Dec, 2022

Video Summary and Transcription

La charla de hoy trata sobre la integración de Unity en aplicaciones React Native para el desarrollo de juegos. Unity ofrece una amplia gama de capacidades y se puede integrar perfectamente con React Native. La integración implica el uso del componente Unity View y el callback Unity Message para permitir la comunicación entre las dos plataformas. Se crean complementos nativos para facilitar la comunicación entre Unity y React Native. El rendimiento de Unity en aplicaciones React Native es comparable al de 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 de la necesidad de capacidades avanzadas de interfaz de usuario y juegos.

Available in English

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

Short description:

Hoy hablaremos sobre cómo puedes ejecutar juegos dentro de tus aplicaciones de React Native. 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, interfaz de usuario y post procesamiento. Los motores de juegos se encargan de la mayoría de estas tareas.

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.

2. Usando Unity como una biblioteca en React Native

Short description:

Hoy hablaremos sobre cómo usar Unity como una biblioteca en React Native. Unity ofrece una amplia gama de capacidades, incluyendo construcción de mundos en 2D y 3D, personajes, móvil, AR, VR y más. Nos enfocaremos en la característica principal de usar Unity como una biblioteca, lo cual permite una integración perfecta 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 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.

3. Integrando Unity en React Native

Short description:

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

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.

4. Integrando complementos nativos en Unity

Short description:

Para integrar complementos nativos en Unity, debes crear dos archivos: un archivo de encabezado y un archivo principal. El archivo de encabezado contiene el registro de la API para las llamadas nativas, mientras que el archivo principal maneja la función sendMessageToMobileApp. Para enviar mensajes desde Unity a React Native, utiliza la importación interna en Unity y especifica el método que se llamará en el lado nativo. Para recibir mensajes de React Native en Unity, crea un script en C# con el método deseado. Finalmente, en Unity, construye tu proyecto de iOS y coloca los complementos nativos en la carpeta Unity builds iOS de tu proyecto de 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.

5. Unity con React Native en iOS

Short description:

Para integrar Unity en React Native, debes seguir varios pasos. Estos incluyen agregar el framework de Unity a los frameworks integrados en Xcode, eliminar la vinculación del framework de Unity de la vinculación binaria con bibliotecas, cambiar la membresía de datos del proyecto de Unity iPhone, cambiar la ruta de los productos de compilación del framework de Unity, encontrar y cambiar la membresía de los complementos nativos, y construir el framework de Unity por separado. Además, debes 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 de Unity en React Native, exportando métodos al lado de JavaScript utilizando RCT export method, utilizando Unity postMessage para la comunicación, registrando eventos compatibles y asegurándote de que el código se ejecute en el hilo principal.

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.

6. Integración de React Native Unity y Enlaces Útiles

Short description:

Utilizamos el método queue dispatch getMainQueue para integrar la vista de React Native Unity. En el lado de JavaScript, obtenemos el administrador de interfaz de usuario, el evento sintético nativo y utilizamos 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.

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.

QnA

Casos de uso de integración de Unity y rendimiento

Short description:

Realizaré talleres y cursos en los próximos años. El caso de uso del mundo real para integrar Unity en React Native es principalmente AR. Unity tiene un marco de trabajo ARFoundation que te permite aprovechar casi todo lo que puedes hacer con ARKit. Además 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 interfaz de usuario 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 transferir la lógica a Unity.

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.

Consideraciones de Integración de Unity

Short description:

El paso de 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 se pueden utilizar para exponer la vista de Unity, pero no ha habido mucha experimentación con esta integración. La decisión de utilizar 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í 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.

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

React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
React Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React & React Native in combination.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introduction to React Native Testing Library
Workshop
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests
Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/