Casar juegos WASM/WebGL con interfaz de React

Hola a todos, soy Jonny, y hoy estoy hablando sobre la combinación de juegos WebAssembly y WebGL con React, o en otras palabras, el uso de la tecnología adecuada para el trabajo adecuado. Entonces, primero sobre mí, trabajo en una empresa de redes sociales como ingeniero web, esa empresa de redes sociales tiene un logotipo azul, pero no es Facebook. En mi tiempo libre, me encanta andar en bicicleta. Eso puede ser ayudar a mis hermanos con anuncios de bicicletas, puede ser una bicicleta de carretera, puede ser una bicicleta de montaña, siempre y cuando esté relacionado con bicicletas, probablemente me guste. Y mi otro gran pasatiempo son los juegos.

Junto con mi papá, he estado creando múltiples juegos de mesa, como Lost Valley, Nord, Half-Band Heroes, que generalmente se financian a través de campañas de crowdfunding. Y desde la escuela secundaria, también he estado desarrollando múltiples juegos electrónicos.

Inicialmente, todos eran para iOS, pero recientemente he estado ampliando un poco, como podrán notar en la charla, hablo sobre la creación de juegos en la web. ¿Por qué me convertí en ingeniero? Me convertí en ingeniero para ahorrar tiempo, para ahorrar mi tiempo y para ahorrar tiempo a otras personas, para que tengan más tiempo disponible para jugar juegos. Y eso me lleva a lo primero de lo que quiero hablar, elegir la herramienta adecuada para el trabajo.

Mis juegos anteriores los hice principalmente con Cocos2D, pero Cocos2D es un motor de juegos muy basado en código, por lo que es familiar para un desarrollador simplemente escribir el código, pero no es muy eficiente en cuanto al tiempo porque no tiene herramientas. Comencé a usar el motor de juegos Godot, lo cual me permite ahorrar mucho tiempo en el desarrollo web. Me encanta usar React, lo cual también me permite ahorrar mucho tiempo, e intencionalmente lo puse en el lado de los juegos de mesa aquí porque hay una similitud interesante en el desarrollo de juegos de mesa y el desarrollo web con React, y eso es ser declarativo.

Si se me ocurre una nueva regla para jugar en la mesa con mis otros probadores, simplemente les explico aproximadamente la regla y declaro mi objetivo, mi intención, ¿para qué se supone que debe servir este cambio de regla? Luego ellos lo interpretarán y usarán su capacidad de procesamiento cerebral para encontrar una interpretación sobre cómo llevarlo al sistema de juego, cómo ejecutar la regla. Por otro lado, si quiero enseñarle una nueva regla a la computadora para jugar juegos, necesito ser muy preciso en todo.

Preguntémonos, ¿cuál es la forma más rápida de hacer un juego y por qué React podría ser una buena opción para eso, y por qué Godot podría ser una buena opción para eso? Además, y muy importante, ¿cuál es la forma más divertida de hacer un juego? Porque al final, esta es una charla sin interés comercial. Solo se trata de divertirse desarrollando algunos juegos.

Ok, entonces, ¿por qué React? Algunas personas pueden recordar mi charla en la edición remota del React Summit en 2020, donde hablé sobre la creación de Diagonal 4. Lo interesante de ese juego es, en primer lugar, que es muy declarativo. Solo tengo un estado de tablero muy simple. Al final, es solo un campo de bits de ocho por siete piezas. A partir de ese campo de bits, puedo calcular todos los movimientos disponibles para cada jugador y puedo calcular la vista de manera muy directa porque es un estado muy simple y un renderizado muy simple. Eso se mapea bien con React.

La otra gran ventaja de usar React es que es muy fácil crear una interfaz de usuario receptiva y tener algunos sistemas de diseño, lo que facilita aún más en la web. ¿Por qué React podría no ser la mejor opción para hacer un juego o un juego moderno en la web? Veamos este ejemplo, Blood Fever. Es un juego de un vampiro vegetariano que defiende su ataúd contra zombies. Pero el punto importante es que puede haber cientos de enemigos que todos están ejecutando animaciones por sí mismos. No tienen una posición muy discreta. Es más como un estado continuo. Algunos puristas de la Programación Reactiva Funcional podrían decir que sigue siendo un estado y aún puedes hacer cálculos muy atómicos para encontrar posibles acciones del jugador. Y luego poner eso en una máquina de estados muy grande. Por otro lado, con las animaciones, simplemente no es lo mejor, diría yo, para mantener un buen rendimiento. Entonces, solo en cuanto al rendimiento, React podría no ser la mejor opción aquí. Y también las herramientas. El desarrollo de juegos se vuelve mucho más rápido si usas las herramientas correctas.

Y React no está realmente bien equipado allí. El ecosistema funciona. Entonces, ¿quién podría aportar buenas herramientas a la mesa? Godot. ¿Por qué usar Godot para el desarrollo de juegos? Lo primero es lo primero, es software gratuito. Es un software muy popular. Si miras este gráfico en OSS Insight a la derecha, verás a Godot convertirse en el jugador más importante con la mayoría de los colaboradores en el espacio de los motores de juegos. Se exporta a web, iOS, Android, Windows, Linux, OSX, prácticamente todas las plataformas que podrías necesitar. Y es un editor muy poderoso. Si miras la captura de pantalla a la izquierda, verás el gráfico de escenas. A la derecha, verás la escena en el editor y el editor de nodos. Puedes hacer clic en cosas simples y moverlas, lo que realmente lo hace mucho más rápido que hacer todo eso solo a través de código. Y por último, trae un lenguaje de programación integrado llamado Godot Script, que es muy similar a Python y puede ser fácil de aprender para muchas personas. Algunas personas aún pueden escribir mal script, pero hay soluciones para eso. Pero esa es una historia para otro momento.

¿Por qué tal vez no deberías usar Godot? Bueno, no tiene FlexBlock o Grid, por lo que los diseños pueden complicarse un poco. ¿Por qué podría ser un problema? Solo mira este ejemplo de Age of Empires 3. Ves una captura de pantalla, la pantalla era muy grande, pero el menú no se escaló, así que hicieron algunas imágenes de fondo en movimiento. No es muy bueno. Puede empeorar aún más en el juego si tienes una pantalla aún más ancha. Y donde la persona naturalmente solo miraría al centro de la pantalla y solo vería eso. Y los menús a la izquierda y a la derecha están muy lejos, es posible que necesites girar físicamente tu cabeza. Así que esto es realmente terrible en términos de interfaz de usuario, porque las tooling no son tan buenas, o no están hechas para eso.

Otra razón para no usar Godot es que es posible que falten algunos SDK externos. Una gran ventaja de la web es que es muy fácil ir a npm e integrar algunos modules en tu aplicación. Es un poco más complicado con Godot. Además, en la web puedes simplemente integrar fácilmente un SDK de authentication de Twitter o de Facebook y luego agregar alguna funcionalidad de intercambio, mientras que hacer eso nativamente en el game engine en sí sería mucho más complicado. Y por último, soy un ingeniero web la mayor parte del tiempo, así que podría extrañar algunas tooling web si solo uso el game engine. También quiero estar al día con las cosas web, así que es una forma divertida de jugar. Dicho esto, también se trata de divertirse en esta charla. Entonces, ¿cuál es la solución? Quiero decir, la solución obvia es combinar React con Godot, pero ¿cómo abordaríamos eso? Bueno, primero, advertencia, no comercial. Esta charla, como dije, no tiene ningún interés comercial. Soy solo yo en mi tiempo libre jugando con juegos. Entonces, si quieres ganar dinero con tus juegos, es posible que tengas consideraciones muy diferentes que pensar. La otra advertencia es solo un prototipo. Comencé a desarrollar esto hace unos 2 meses y estaba pensando, oye, ¿cómo puedo combinar mis dos tecnologías favoritas? Se me ocurrió esto, así que lo estoy mostrando en este momento y vamos a ver el ejemplo video. Entonces, todo se está ejecutando en un sitio web. El sitio web está alojado en localhost, está en el Playground y hay otro juego en ejecución en localhost. Entonces, hay mi juego llamado Kellergewurl und Lauf, que es solo un corredor de mazmorras. Y puedes ver la conexión entre la interfaz de usuario de React y el juego en sí. Así que cambié mi nombre. Johnny ahora aparece en el juego mismo. ¿De qué se trata el juego? Simplemente corres en esa mazmorra. Puedes empujar a tu aventurero hacia arriba y hacia abajo y debes evitar a todos los habitantes de la mazmorra y no tocarlos.

Ahora, toqué a los desarrolladores, por lo que el juego se reinicia. Creo que eso no fue lo suficientemente rápido, así que usemos la interfaz de usuario de React para cambiar la velocidad del juego. Y, bueno, eso podría haber sido un poco demasiado rápido, así que vamos a reducirlo un poco de nuevo. Y luego acelerarlo de nuevo, solo para ver, como, la conexión es instantánea, por lo que no espera a que el juego se recargue nuevamente para recoger los cambios de estado de la interfaz de usuario de React, sino que es una conexión completa.

Y, bueno, hablemos de algo muy molesto, compartir puntuaciones en redes sociales. Es posible que todos hayamos estado molestos por la locura de palabras y las personas que llenan nuestros feeds de Twitter, pero este juego también puede generar, como, un tweet para ti, estás autenticado en segundo plano en Twitter, puedes presionar compartir y se compartirá automáticamente en tu feed. Es solo una posibilidad de integración web. Pero veamos otra característica, cambiemos de juegos dinámicamente en el mismo sitio web. Ahora estoy cambiando a la versión alojada de Caligrelden Live, que tiene un modo de escalado diferente activado, por lo que ahora solo usa el tamaño de diseño del juego, que es solo 480 x 320. Y por último, cambió a otro juego, Blood Fever, solo para mostrar que también hay otros patrones de interfaz de usuario posibles, el juego que hemos estado usando el teclado y con Blood Fever ahora todo se controla con el mouse, y todo sigue funcionando bien en la web. Y eso es todo para una demostración rápida de combinar React con juegos GoDo en la web.

¿Cómo llegas allí? Bueno, el primer paso es tener un juego en el motor GoDo. Caligrelden Live, como mencioné, es un rápido corredor de mazmorras en 2D. Todo está disponible en GitHub bajo licencia GPL si quieres echar un vistazo. Así que simplemente crea ese juego en GoDo, puedes debugarlo en GoDo. ¿Cómo lo exportas? Bueno, GoDo tiene un diálogo de exportación muy sencillo. Simplemente dices que quieres exportarlo a la web en la versión HTML5. Presionas exportar y generaremos algunos archivos. En realidad, generaremos esta carpeta doc a la izquierda. Ahí estará el juego.html. Este es el envoltorio nativo del juego de GoDo, pero ese envoltorio de juego solo admite ejecutar el juego de forma independiente en el sitio web. Realmente no tiene un entorno agradable para agregar más interfaz de usuario. También hay un archivo llamado game.js, que contiene parte del código del juego y parte del código del motor, pero veremos los detalles de eso un poco más adelante. Dentro hay un archivo game.wasm y un archivo game.pak. El archivo game.wasm es el motor real compilado a WebAssembly y también parte de tu código de juego compilado dependiendo de cómo configures la exportación. El archivo game.pak es básicamente todos los recursos que necesitas para tu juego, que la mayoría de las veces serán texturas o archivos de audio. Entonces, Godot exportó eso, pero ¿cómo podemos usarlo? Retrocedamos un poco inicialmente. Hablemos rápidamente sobre WebAssembly y WebGL. Eso podría ser relevante para ti. WebAssembly, hay una descripción larga que puedes leer si quieres, pero hablando en términos generales es solo el formato de instrucción binaria al que las aplicaciones pueden compilar si no quieren, por ejemplo, compilar a JavaScript u otra transpilación, sino que es más como un formato binario.

Y eso es muy común para los motores nativos agregar ahora otro objetivo de compilación. El motor Godot puede simplemente elegir WebAssembly como otro objetivo de compilación y luego puede compilar el código del motor en C++ a eso. WebGL es una API de JavaScript para renderizar gráficos 3D y 2D. Personalmente me encanta hacer juegos en 2D porque es más fácil como desarrollador único tomar algunos gráficos de Open Game Art en Internet de forma gratuita y usarlos en sus propios juegos. Es mucho más rápido que con 3D, pero también podrías, con la tecnología presentada aquí, construir un juego en 3D si quisieras.

Y WebGL también significa que estás renderizando en este lienzo. Eso significa que no hay más elementos DOM para el propio juego. Es todo un objetivo de píxeles. Se renderiza en la textura y la textura se renderiza en el lienzo. Bueno, suficiente con esa excusa. Volvamos al archivo game.js. El archivo game.js considera una gran área de dos partes. La primera parte, que parece muy espantosa, por eso no estoy haciendo zoom, es en última instancia solo mapear parte del código JavaScript a parte del código de WebAssembly. La conexión de ida y vuelta funciona, pero podemos ignorar eso por completo porque no importa en absoluto para incrustar nuestros juegos. También hay algo de código del motor. Ese código del motor carga los archivos fetch. Eso es un poco más relevante para nosotros porque el envoltorio de Godot que estoy presentando extrae parte de ese código del motor.

Ahora, podrías preguntar, bueno, Godot lo proporciona completamente. ¿Por qué no podemos simplemente usar un iframe? Sí, podrías no usar un iframe, pero tampoco puedes usar un iframe porque podrías tener algún problema con CORS porque vas a ejecutar instalaciones donde no puedes ejecutar el código. Si quieres, podrías ejecutar una instalación donde no puedes enviar mensajes al iframe porque está bloqueado. Además, simplemente usar un iframe no es realmente el enfoque de React, diría yo. Entonces, ¿cuál será nuestra arquitectura local? Bueno, primero las cosas primero, el usuario visita el sitio web, el sitio web renderiza alguna interfaz de usuario y esa interfaz de usuario del sitio web también renderiza el host gsgd, que se proporciona en un paquete local. Ese host gsgd luego va a algún otro host web, donde subiste el archivo game.js, game.pak y el archivo wasm que se exportan, y luego el host carga ese JavaScript en el contexto local. Recoge la definición del motor del archivo game.js. Lo instancia y también proporciona un contexto WebGL, y luego el motor comienza a ejecutarse y se renderiza en el contexto WebGL con el que el usuario puede interactuar.

¿Cuál es la infraestructura para eso? Porque suena muy horrible configurar todo eso para todos los juegos que quieres publicar. Además, nuevamente, creo que una solución muy conveniente y divertida para eso es simplemente tener un sitio web de incrustación en el que quieras trabajar, tener un proyecto Godot en el que quieras trabajar. El proyecto Godot simplemente se envía a un repositorio de juegos en GitHub. En un archivo YAML, puedes reutilizar los flujos de trabajo que proporciono en el paquete KS Godot CI. Estos flujos de trabajo utilizarán una imagen Docker para compilar el juego en el CI con el objetivo web, y luego se publicarán en la página del juego y puedes ejecutar tu CI normal en tu repositorio web como estás acostumbrado.

Y luego tu página web está configurada para obtener los archivos de datos del juego desde la página del juego y luego puede ejecutarlo desde allí.

El siguiente paso, podrías preguntar, ¿podemos realmente ver el código? Absolutamente. Todo está disponible en línea. También puedo compartir una captura de pantalla para mostrar los fundamentos básicos, pero realmente no tengo tiempo para entrar en los detalles. Así que veamos una abstracción de alto nivel aquí.

¿Cuál es la comunicación real que ocurre entre React y el juego GoDo que se ejecuta en tu sitio web? En el componente del sitio web, tienes un componente host. Ese componente host tiene propiedades de un nombre de jugador y un power-up. Hay una devolución de llamada onReportScore para activar esa ventana emergente de compartir puntuación. El host compartirá estas propiedades a través del objeto window, porque necesita haber un intercambio de ida y vuelta para compartir las devoluciones de llamada con el juego. El propio juego GoDo buscará en el objeto window, verá, okay, ¿cuál es mi nombre de jugador inicial? ¿Cuál es el valor inicial de mi power-up? Luego también estableceremos estas dos funciones onPlayerNameChanged y onPlayerPowerUpChanged en la ventana. Si las propiedades cambian en tu componente, se llamarán estas devoluciones de llamada. Y luego hay señales en el lado de GoDo, como la señal PlayerNameChanged, que se activará si quieres cambiar el nombre del power-up, y luego los otros componentes del juego pueden leer las señales. ¿Cómo se ve? Muy simple. Al final, solo estás registrando una devolución de llamada para decir, okay, cuando cambie el power-up, llamemos a esa función. En este caso, esto cambia ligeramente algunos de los efectos de partículas. Eso es en realidad la mayor parte desde la perspectiva técnica.

¿Qué está funcionando bien en este momento? Funciona bien la carga y el almacenamiento en caché de juegos. Está prácticamente completo en cuanto a funciones. Es rápido. Volverías al sitio web. Obtendrías la versión en caché. Todo funciona bien. La comunicación entre React y GoDo funciona perfectamente, como se vio en el ejemplo. Es solo ir y venir. Instantáneamente, podría ser un poco más abstracto, pero más sobre eso en un momento. En general, es muy fácil agregar nuevos juegos a tu propio parque de juegos personales. Diría que la experiencia del desarrollador es muy agradable. Puedo crear un nuevo repositorio de juegos, reutilizo mis flujos de trabajo y prácticamente se ejecuta en GitHub al instante. Eso es bastante bueno. Lo más importante, es muy divertido, porque puedes usar tu motor de juegos completo y aún así reutilizar los juegos en tu sitio web personal de React. Tomar nuevas tecnologías y tecnologías con las que estás familiarizado. ¿Qué se podría mejorar en el futuro? Bueno, la recolección de basura aún no es perfecta, porque a veces el motor de juegos se queda y ocupa algo de memoria, así que tendré que investigar eso. Se podrían integrar más integraciones, como, por ejemplo, el SDK de Twitter para compartir tweets, o un SDK de anuncios si realmente quieres ganar dinero con los juegos, cosas así. Y la comunicación entre Godot y el juego podría ser un poco más abstracta. Puede que notes que no es la parte divertida, así que no lo he investigado, pero lo haré en el futuro. Y la última pregunta, ¿quieres probarlo? Todo está disponible en GitHub en github.com. Hay diferentes repositorios que puedes consultar. Hay dos juegos de ejemplo. Hay un paquete de CI. En realidad, hay un paquete de puente GSGD, que proporciona el componente de React mencionado. Y si tienes alguna pregunta adicional, no dudes en contactarme en ChaosYogo en Twitter. Y muchas gracias por escuchar.