How to Make a Game With React

Hola, hola, mi nombre es Chris Baumgartner. Estoy aquí con el Poimandris Open Source Dev Collective, y voy a mostrarte cómo hacer un juego con React usando patrones que conoces y probablemente muchos que no.

De hecho, será este juego justo aquí. Vamos a hacer esto hablando sobre renderizado, cómo dibujamos cosas en 3D con React. Luego vamos a hablar sobre gestión de estado, cuál es nuestra estrategia para actualizar datos muy rápidamente en React. Vamos a hablar sobre generación, cuáles son nuestros patrones para crear y destruir entidades dinámicamente, y vamos a hablar sobre comportamiento, cómo hacemos que nuestras entidades hagan cosas. Luego vamos a darle a todo un buen resplandor. Para hacer eso, vamos a usar, por supuesto, React. También vamos a usar React 3 Fiber y Kota. Ambas son bibliotecas creadas por Poimandris y en las que he trabajado yo mismo. Vamos a usar esta herramienta llamada Triplex. Nos va a dar un IDE visual para mover cosas y guardarlas de nuevo en el código.

Comencemos con el renderizado. React 3 Fiber probablemente no necesita una introducción para mucha gente, pero en caso de que no estés familiarizado, te permite construir escenas 3D de manera declarativa en React, tal como lo haces con el DOM. Puedes hacer eso con 3D. Es totalmente interactivo con HTML. Participa en el ecosistema de React, lo que significa que todas las mismas herramientas y bibliotecas que usas, puedes usar en 3D. Está potenciado por 3JS, así que si te preguntas cómo sucede la magia, puedes buscar 3.

Así es como se ve. Se parece mucho a un componente regular de React, excepto que aquí tenemos una malla. Dentro de la malla hay una geometría y un material. La geometría nos dice la forma que va a tener nuestra malla. El material nos dice cómo se va a ver. Aquí va a cambiar de color de rojo a azul cuando hagamos clic en él. Luego, en nuestra aplicación, tenemos un lienzo. Ese lienzo aquí es el entorno 3D en el que vamos a dibujar. Así es como se ve. Con solo un poco de código, obtenemos una pieza interactiva en 3D. Una diferencia adicional con los componentes de React es que a menudo necesitamos actualizar en un bucle de fotogramas muy rápidamente. Tenemos un hook llamado useFrame.

Es un callback que va a ocurrir en un request animation frame en nuestro bucle central de fotogramas. Aquí solo estamos obteniendo la ref para la malla y la estamos rotando en cada tick del fotograma.

Nuestro juego, teníamos tres entidades que estábamos tratando de crear. Teníamos un jugador, teníamos enemigos, y luego teníamos balas. Queríamos que nuestro jugador se moviera con las teclas, con nuestro teclado. Queríamos disparar balas. Queríamos que nuestros enemigos se agruparan hacia el jugador, y luego queremos que desaparezcan cuando sean disparados. Queremos que nuestras balas se muevan rápidamente desde donde se generan, y queremos que colisionen con los enemigos para saber cuándo destruirlos. Vamos a comenzar con wireframes solo para asegurarnos de que no nos preocupamos por los visuales. Nos preocuparemos primero solo por cómo funciona.

Aquí hay un pequeño video rápido de mí haciendo eso. Aquí estoy solo tomando una vista del jugador. Es una geometría de caja con una malla de wireframe, y estoy creando una vista para el enemigo y para las balas, un dodecaedro para el enemigo. Luego nuestras balas solo van a ser una esfera por ahora. Estamos haciendo que las balas se reduzcan. Hay un prop allí como en CSS con un transform. Vamos a añadir eso a nuestra escena. A la derecha está triplex, que es un pequeño IDE visual agradable. Solo voy a entrar allí rápidamente y moverlos para que podamos verlos. No están superpuestos uno encima del otro. Ahí está nuestra primera escena.

Pero ahora, ¿cómo hacemos que haga algo? Ahora hablamos de probablemente la parte más importante de esta charla, la gestión de estado. Las soluciones de estado actuales son demasiado lentas para lo que queremos hacer. Asumen una baja frecuencia de actualizaciones. Asumen relativamente pocos objetos y generalmente también una estructura rígida. Solo piensa en tu típica aplicación de React donde tienes una jerarquía. Es como un documento. Estás actualizando en la interacción del usuario o la obtención de datos o una llamada a la API. Normalmente no tienes miles y miles de objetos. Por el contrario, los juegos son mucho más exigentes.

Se actualizan varias veces por segundo, cada fotograma. Usualmente hay muchos objetos, a veces miles, y hay una estructura dinámica. No sabemos de antemano exactamente cómo deberían estar ordenadas las cosas. De lo contrario, probablemente no sería un juego muy divertido.

Así que necesitamos una solución de estado que sea más ágil de lo que estamos acostumbrados a ver. Eso es en lo que he estado trabajando. Esto es algo que estamos lanzando en Poimandris junto con Zustand, Jotai, Valtio. Se llama Cota. Cota, en esencia, crea una base de datos local que es muy eficiente en la actualización de grandes volúmenes de datos muy rápidamente. Consultamos esos datos con React, y usamos esos datos para dibujar una vista. Luego usamos acciones en React para mutar Cota. Esto es como el patrón al que estás acostumbrado cuando obtienes algunos datos de la web para crear algunas publicaciones. Haces un mapeo sobre ellos, y luego si quieres crear una publicación, de vuelta a ella, publicas una acción.

Sin embargo, los conceptos aquí son un poco diferentes. Tenemos algo que es más como un mundo de entidades. Tengo un pequeño círculo allí. Ese es nuestro mundo. En él, tenemos entidades, y cada entidad va a tener diferentes características. Van a hacer cosas diferentes, tener comportamientos diferentes. Aquí tenemos, podemos imaginar que cada una de esas entidades tiene una característica rosa, verde y púrpura.

Una cosa común que queremos hacer es encontrar todas las entidades verdes. Las características contienen datos. Son como átomos de datos. Así es como se ve. Definimos una característica. Aquí tenemos una característica de movimiento. Tenemos empuje. El empuje es aceleración para nosotros. Tiene una velocidad. La velocidad describe en qué dirección y qué tan rápido va algo.

Luego vamos a generar una entidad con una característica de movimiento. Esta es una entidad móvil. Ahora sabemos que esta entidad es algo que debería moverse. Si quisiéramos una entidad voladora, podríamos generar una entidad con una característica de vuelo. Luego tenemos que actualizar todas esas entidades por característica. Vamos a consultar el mundo. Vamos a decir, dame todas las entidades que tienen la característica de movimiento. Luego vamos a iterar sobre ellas con updateEach. Aquí solo estamos sumando a la velocidad con el empuje. Luego usamos una acción para mutar desde React.

Estamos creando una acción aquí. Es una acción de generación de entidad. Luego la estamos usando dentro de React. Al hacer clic, estamos generando una entidad con ese div. Imagina que esto es un botón. Es muy rápido. Esto es una simulación en el cuerpo. Con 3,000 cuerpos funcionando a más de 60 fotogramas por segundo, eso significa que está haciendo 9 millones de iteraciones cada fotograma. Hablemos de la generación. ¿Cómo vamos a crear nuestras entidades y destruirlas? Vamos a comenzar con nuestro patrón de renderizador. Así es como vamos a consultar entidades y dibujarlas en React. El primer paso es que queremos consultar las entidades que queremos renderizar. Vamos a obtener esos datos. El segundo paso es que vamos a mapear sobre ellos, como una lista, y asignarlos a un componente de vista. El tercer paso es que vamos a vincular esos datos de vista de nuevo a Kota para que sepamos cómo actualizar las cosas en nuestros bucles.

Así es como se ve. Comenzamos con un hook de consulta. Aquí estamos consultando enemigos que tienen una transformación. Estamos mapeando sobre ellos a nuestra vista de enemigos que creamos antes. Luego, en un efecto de diseño dentro de nuestra vista, estamos sincronizando la transformación en la malla con Kota.

Si nunca has usado 3 antes, no te preocupes. Esto es como en CSS cuando tienes un transform, tienes posición, rotación, escala. Solo nos aseguramos de que esos datos estén vinculados con nuestros traits. Pero eso solo no nos da nada en nuestro juego.

Tenemos que empezar a generar cosas. Ahora necesitamos escribir algo de lógica de juego. Vamos a crear nuestra primera acción. Nuestras primeras acciones aquí van a ser una para generar jugadores. Vamos a generar entidades que tengan el trait de jugador y transform. Y luego generar enemigos genera entidades que tengan el trait de enemigo y transform.

Cuando lo usamos en React aquí al inicio, al montar, simplemente lo llamamos en efecto spawn player. Luego estamos configurando un intervalo para generar un enemigo cada segundo. Estamos añadiendo startup a nuestra app. Estamos añadiendo startup a nuestra app. Y obtenemos esto.

Ahora tenemos nuestro jugador y tenemos nuestros enemigos, pero todos están generándose amontonados uno encima del otro, así que queremos hacer algo al respecto. Vamos a volver a nuestra acción de enemigo. Vamos a asegurarnos de que cuando generemos nuestro enemigo, estemos creando una posición y rotación aleatorias. De esa manera, cada vez que se llama a esa acción, sabemos que se están colocando aleatoriamente alrededor del mapa.

Y se está pasando al trait como una prop por defecto. Muy bien. Ahora obtenemos lo que queremos. Cada vez que se llama a esa acción en el intervalo, se están colocando aleatoriamente alrededor de nuestro nivel de juego. Ahora hablemos sobre el comportamiento. Los tenemos generándose, pero queremos que hagan cosas. Queremos hacer el juego.

Muy importante aquí es que rompamos, una de las reglas más fundamentales de React. Queremos actualizar cada fotograma.

Si haces un set state en cada fotograma, la gente diría que tu aplicación de React está rota, y realmente lo estaría. Sin embargo, con Kota, para que las cosas cobren vida de modo que cada vez que miras la pantalla, cada fotograma, se está moviendo, está haciendo algo nuevo, necesitamos asegurarnos de que estamos actualizando todo en cada fotograma. Por eso es importante el rápido volumen de transformación de datos. Eso nos permite hacer algo llamado comportamiento componible. Ahí es donde dividimos toda la lógica del juego en pequeños comportamientos individuales, muy parecido a lo que hacemos con los componentes. Y luego en un bucle de fotogramas, podemos componerlos. Aquí puedes imaginar que tienes un comportamiento de mover a la derecha, y también un comportamiento de mover hacia arriba, y el comportamiento compuesto de llamarlos todos en un bucle de fotogramas va a ser mover en diagonal.

Recordemos que nuestro jugador, queremos que se mueva con las teclas, queremos que dispare. Esta es la estrategia que vamos a seguir. Vamos a añadir un trait de input y movimiento a nuestro jugador que va a permitir que nuestro juego sepa que esta es una entidad movible que está recibiendo input del teclado. Y luego vamos a capturar el input, el input del teclado en nuestro bucle de fotogramas. Luego vamos a crear un comportamiento para convertir el input en velocidad, en una dirección en la que se va a mover. Y luego vamos a crear un comportamiento para mover las entidades basándonos en esa velocidad. Aquí vamos. El primer paso es bastante fácil. Añadimos los traits a nuestra acción. Segundo, vamos a crear nuestro componente de bucle de fotogramas con nuestro hook use frame, para que ese callback se llame en cada fotograma. Y en él estamos actualizando el tiempo, así que estamos manteniendo un reloj, y luego estamos capturando el input del teclado. Lo añadimos a nuestra app.

Muy bien. Ahora la primera función de actualización, nuestro comportamiento de mover entidades, tomamos una porción de tiempo. ¿Cuánto tiempo pasó desde la última vez que llamamos a esta función? Ese es nuestro delta time. Vamos a hacer una consulta para todas las entidades que son movibles. Y luego vamos a iterar sobre ellas, y vamos a actualizar la posición basándonos en cuánto se movió en esa porción de tiempo. Tomas la velocidad multiplicada por el delta time. Obtienes la fracción de movimiento que haría en esa porción de tiempo. Lo añadimos a la posición, y luego se mueve. Creamos nuestro comportamiento de convertir input en movimiento. Esto es un poco más complicado, así que voy a explicarlo a un nivel un poco más alto. Lo que realmente estamos haciendo aquí es...

Esto es algo de matemáticas para decir, bien, obtuvimos un vector de input de nuestras teclas. Queremos convertir eso en un vector de dirección, así que estamos multiplicando nuestro thrust, qué tan rápido se está moviendo, y luego lo estamos sumando a la velocidad previa para que las cosas se aceleren. Y luego aquí, simplemente estamos tomando ese mismo vector de input, y lo estamos convirtiendo en una rotación.

Muy bien. Y luego añadimos todo eso a nuestro bucle de fotogramas, y así actualizamos el tiempo, capturamos el input, convertimos el input en movimiento, y luego movemos las entidades. Y aquí vamos. Ves que tenemos la velocidad corriendo allí. Voy a ir a nuestro bucle de fotogramas y eliminar mover entidades. La velocidad sigue actualizándose, pero ya no nos estamos moviendo porque ese comportamiento ya no está funcionando. Si lo añadimos de nuevo, y una vez más, gracias, HMR, hermosa invención, ahora nos estamos moviendo. Eso es comportamiento componible.

Ahora queremos agruparnos hacia el jugador. Voy a saltar aquí porque solo tengo tanto tiempo. Esto está pre-hecho. Añado el comportamiento de agrupamiento, y ahora todo se mueve hacia el jugador, pero ahora se están amontonando, así que voy a añadir un comportamiento de evitarse entre sí. Tan pronto como eso está habilitado, ¡puf!, ahora ya no se amontonan. Si lo eliminamos de nuevo, van a empezar a amontonarse.

Esto hace que la depuración sea muy fácil. Y voy a hacer un poco de trampa aquí también. Tenemos un montón de comportamiento de disparo de balas que queremos añadir. Los pre-hice, y solo te voy a mostrar aquí, tenemos manejar disparo, que maneja presionar el teclado y disparar, actualizar balas, mueve las balas hacia adelante, colisionar balas con los manejadores de enemigos, calculando la colisión. Si elimino eso, como hice aquí, las balas todavía disparan, pero ya no colisionan con los enemigos.

Si lo añado de nuevo, comenzará a funcionar de nuevo. Así que ahora, a la izquierda, tenemos que hacer nuestro brillo. Tenemos nuestro comportamiento. Generamos todas nuestras entidades. Les dimos algo de comportamiento de manera componible, pero todavía parece como wireframes, ¿verdad? Así que necesitamos hacer que parezca un juego. Esto es algo más en lo que me encantaría entrar en más detalle, pero es una charla completa en sí misma. Pero aquí, vas a ver que voy a añadir una vista HiFi. Así que tenemos nuestro renderizador que se mapea en vistas. Lo estoy cambiando a uno HiFi pre-hecho que tiene materiales que están iluminados. Tiene un modelo que fue hecho en Blender. Y luego estoy añadiendo algunas luces. Así que las luces direccionales van a apuntar desde una dirección. Estoy entrando en triplex aquí, y voy a intentar ajustar las luces. Copio una nueva luz direccional. La hago blanca. Hago la otra roja. Ahora voy a añadir algo de post-procesamiento para que obtengamos algo de bloom. Eso va a hacer que todo brille.

Y ahora voy a añadir un fondo de Nebula. Esto lo hizo mi amigo Maxime Heckel. {{^}}Y ahora voy a añadir un rastreador de puntuación. Pero añadí el de LoFi, así que añado el de HiFi. Y ahora quiero animar un poco la jugabilidad, así que estoy añadiendo algo de empuje. Así que cuando me encuentro con cosas, se mueven.

Y ahora quiero añadir explosiones. Así que cuando disparamos a cosas, quiero que exploten. Pero primero, estoy ajustando la iluminación porque no podía ver las cosas con la Nebula. Muy bien. Y ahora voy a añadir un render de explosión para que podamos renderizar las explosiones. Y voy a añadir el comportamiento de explosión de tick para que se descompongan así.

Y eso, en resumen, es nuestro juego. Lo hicimos. Sí. Así que sé que mucho de eso probablemente fue bastante técnico a simple vista, pero espero que pudiéramos seguir con los conceptos. Lo importante es que queremos pensar en hacer juegos en React. Queremos pensar en crear un mundo o generar entidades dinámicamente y darles comportamiento. ¿Verdad? Y es un poco diferente de una aplicación rígida. Pero podemos usar todas las mismas herramientas. Podemos usar todo el mismo conocimiento que toda la UI construida directamente en React, exactamente como lo haces, comparte el mismo estado. Y luego solo algunos créditos rápidos. Este es todo el mundo que me ayudó aquí. Y aquí están todos los enlaces para React 3 Fiber, para Kota, para Triplex. Y luego esta presentación aquí mismo, puedes encontrarla en ese GitHub. Y luego este código QR es para nuestro Discord, el Discord de Poimandris Collective, donde estamos desarrollando toda esta tecnología. Y eso es lo que tengo para ustedes hoy. Muy bien, así que tenemos tres preguntas aquí mismo. ¿Cuál es tu estrategia de pruebas con juegos hechos en Canvas? Bueno, lo que viste allí es mucho de mi ciclo de desarrollo donde tengo Triplex abierto dentro de mi navegador. A medida que hago cambios, HMR está allí.

Veo si funciona. Los juegos se tratan mucho de la sensación. Y sabes de inmediato si algo no está funcionando. Así que mucho de esto es probar la sensación. Si algo no se siente bien, entonces con el comportamiento componible, puedo entrar allí y comenzar a comentar cada sistema o actualizar la función una a la vez y decir, ¿cuál está fallando? Es un gran beneficio de hacer una configuración como esta.

Sí, eso tiene sentido. Bien. ¿Funciona esto con React Native? Así que todo esto aquí es solo código JavaScript simple que mostré aquí. Kota como biblioteca de estado es completamente agnóstica. Es una biblioteca vanilla. Es como Zustand donde hay enlaces de React que estamos usando aquí. Y está hecho pensando en React, pero al igual que Zustand se puede usar en vanilla o con React Native, también se puede usar esto. Sin embargo, no será tan rápido, porque si estás familiarizado, Apple no permite JIT en React Native. Eso es una pena.

Bien. Debido a la limitación de tiempo, voy a hacer rápidamente una última. ¿Cuáles son las principales cosas que React específicamente te ofrece? ¿Por qué harías el juego con React? Sí, tenía esta diapositiva al principio y debería haberla vuelto a poner. La primera razón es porque todos programamos en React. Y siento que quiero llevar el desarrollo de juegos a una audiencia más amplia. Muchos de nosotros tenemos un trabajo diario, ¿verdad? No tenemos tiempo para aprender C Sharp o C++ o Unity o Unreal. Pero tenemos todas nuestras herramientas y tenemos todo nuestro conocimiento que tenemos de hacer lo que estamos haciendo, y quiero mostrarle a la gente que saben suficiente programación para hacer un juego. Y así estoy tratando de llevar ideas y conceptos de juegos al ecosistema de React donde están los desarrolladores.

Sí, así que menos tiempo de incorporación y algo con lo que los desarrolladores de front-end ya están familiarizados. Sí. Gran parte del desarrollo de juegos se trata de iteración. Algo que creo que el desarrollo web ha hecho como una revolución para nosotros es que ha hecho que iterar ideas sea muy rápido. Algo de lo que los desarrolladores de juegos y otras plataformas están muy celosos. Sí. Y así creo que aunque las ideas de juegos podrían ser un poco más pequeñas ahora de lo que obtendrías con un motor de juego regular, un motor de juego tradicional, podrías divertirte más haciéndolo. Sí, seguro. Bueno, eso es todo el tiempo que tenemos en esa nota. Si tienes alguna pregunta, encuentra a Chris en la sala de preguntas y respuestas. Y ahora tenemos un poco de tiempo para que cambies de pista o te quedes aquí. Muchas gracias. Muy bien. Gracias. Gracias.