Juegos multijugador con React Three Fiber y WebSockets

♪♪ ♪♪ ♪♪ ♪♪ ¡Hola! Gracias a todos por estar aquí. Gracias, Sarah, por la energía. Realmente la necesito. Ha sido un largo día. Vamos a hablar sobre la creación de juegos multijugador para el navegador y WebSockets. ¿Quiénes somos? Primero que nada, ¿quién soy yo? Mi nombre es Maya. Ese es mi perro, Api. Sí, eso significa API. Soy una nerd. Fui a la escuela de arte y luego la abandoné, así que ahora soy una desertora de la escuela de arte. Me enseñé a programar. Conseguí varios trabajos de ingeniería de software por alguna razón, y actualmente estoy trabajando en Linear, donde el equipo y yo estamos haciendo que el software sea un poco más mágico. Pero lo más relevante para esta charla es que tengo un título en game development. Sí, lo tengo. Siéntete libre de seguirme en las redes sociales si te apetece.

Muchos de ustedes pueden ser como esta persona que respondió al tweet de React Day Berlin anunciando esta charla. Y esta persona dice, ¿Por qué en nombre de todo lo sagrado alguien haría un juego en React? Esta es una excelente manera de comenzar una charla. Tengo que estar de acuerdo con ellos, porque es una pregunta legítima. Entiendo el desconcierto. Hay muchas mejores plataformas para jugar juegos que el navegador. Hay muchas mejores tecnologías para construir juegos que React o JavaScript. Entonces, ¿por qué querrías hacer esto? Accessibility. No estoy hablando de lectores de pantalla y etiquetas ARIA, aunque son cosas realmente importantes y, por supuesto, pueden surgir en los juegos. Estoy hablando de la accessibility del game development para ti, como desarrollador. Así que digo que tengo un título en game development. La gente suele decir algo como, Tengo una idea realmente genial para un juego, pero abrí Unity, es muy confuso, lo cerré, nunca hice el juego. Y estas personas son programadores. Saben cómo usar React. Ya tienen estas herramientas en sus manos. Solo necesitan unas pocas habilidades adicionales y un cambio de mentalidad para saber que es posible hacer juegos.

La otra razón por la que podrías querer usar React y hacer juegos web es para hacerlos accesibles a tus jugadores. Así que he hecho un juego para esta conferencia, y no esperaba que ninguno de ustedes trajera su PlayStation 5 o Nintendo Switch. Solo espero que tengan un teléfono móvil con una conexión a internet y un navegador web. Y eso es genial, porque tus jugadores no necesariamente quieren instalar nada. Quizás quieran jugar a tu juego en el trabajo. Solo digo.

Entonces, ¿de qué estamos hablando? Estamos hablando de un juego llamado React Battleship, y va a ser un juego multijugador con las mecánicas clásicas de Battleship que probablemente jugaste en la escuela primaria cuando estabas aprendiendo el sistema de coordenadas. Así que la idea es que tienes una cuadrícula, pones tus barcos en esa cuadrícula, tu oponente también lo hace, y luego intentas hundir los barcos del otro disparando al azar en su cuadrícula. Vale. Plan de juego. Juego de palabras intencionado. Cuando también hablo con desarrolladores de juegos, como desarrolladores de juegos indie o solitarios, algunas de las prácticas que dicen que son realmente útiles para ellos son cosas que ya sabemos en la ingeniería de software y simplemente se topan con ellas porque no están en esa industria. Y me dicen que necesitas gestionar el alcance del proyecto, en primer lugar. Necesitas iterar rápidamente en tus ideas para averiguar si funcionan o no, y necesitas fracasar rápido. Con eso en mente, sería beneficioso para nuestro juego hacer un poco de planificación por adelantado, y propongo que lo hagamos dividiendo el desarrollo del juego en cuatro fases distintas. Primero tendremos una fase de diseño donde averiguamos qué estamos haciendo. ¿Qué es exactamente esta idea del juego que queremos? Lo ponemos en papel y estamos de acuerdo en ello, y decimos, eso es el juego y nada más. Luego hacemos un prototipo de él. ¿Tiene sentido este tipo de juego con las tecnologías que queremos usar? ¿Es posible tener este tipo de mecánica? ¿Es incluso divertido jugar? Y llegamos a hacer esto, probamos estas ideas a una resolución muy, muy baja con muy poco compromiso de tiempo. El siguiente paso es una fase de bloqueo, y esto es porque estamos haciendo un juego en 3D y aquí es donde nuestro desarrollo se aleja del desarrollo de software tradicional. Esta es la fase en la que realmente introducimos el 3D en nuestro juego. ¿Todavía tiene sentido nuestra mecánica si el juego es en 3D? Y finalmente tenemos un paso de producción donde lo hacemos mágico. Lo hacemos agradable para el jugador y realmente lo convertimos en un juego presentable. Así que empezamos con el diseño. En la escuela nos enseñaron porque tengo un título en desarrollo de juegos, que necesitas empezar cada juego con un documento de diseño de juego, o un GDD. Y estos documentos de diseño de juego pueden tener cientos de páginas. Son wikis enteros. Son utilizados por varios equipos, en varios departamentos, abarcan años y son mantenidos. O pueden ser una página. Que es nuestro caso, y puede que no parezca mucho, pero definir estas cosas que están definidas en el GDD son restricciones super importantes para lo que realmente es el juego.

Entonces, por ejemplo, queremos centrarnos en el móvil. Eso significa que no tengo que preocuparme por resoluciones más grandes, resoluciones de escritorio, tabletas. Vas a jugar en tus teléfonos, ¿verdad? Puedo limitar la plataforma en la que va a estar.

A continuación, el público objetivo. Entonces, supongo que todos son adultos, de cualquier manera, están aquí en una conferencia de software, probablemente no esperan un juego súper llamativo, y a mi sobrino de 11 años no tiene que ser un fan. Es un crítico muy, muy fuerte. Especialmente con mis juegos. Así que si no le gusta, no me importa.

A continuación, cuando definimos los modos de juego. Entonces, en este caso, tengo la idea de tener una especie de mar abierto donde todos pueden explorar y encontrarse, y desafiarse mutuamente a un juego específico de batalla naval, y luego tener otro modo de juego que es el juego real de batalla naval. Esto me ayuda, en mi mente, a entender qué tipo de escenas necesito preparar para el juego.

Y finalmente, los puntos de venta únicos del juego son cosas que el juego debe tener absolutamente. Sin estas cosas, no tiene mucho sentido. Así que quiero que el juego sea algo realmente accesible para ustedes, en términos de no tener que iniciar sesión, no tener que tener ningún tipo de authentication. No van a querer crear una cuenta, seamos honestos. Y la experiencia tiene que ser bastante rápida. Tiene que ser divertido, porque tampoco van a invertir horas y horas jugándolo. Probablemente solo van a escanear el código QR al final de esta presentación, jugarlo unas cuantas veces, si eso, y espero que se diviertan, y tengan una experiencia única de este juego.

Así que estos son los bocetos. La idea general de cómo va a ser este juego.

A continuación, pasamos a la architecture, como parte del design todavía. Entonces, la forma del juego es técnicamente en un monorepo, con un único servidor, que es Node.js, específicamente Fastify, pero no necesitamos entrar en detalles. Y abrirá una conexión WebSocket usando Socket.io. El cliente son múltiples clientes React, así que todos sus teléfonos se conectan a ese mismo servidor. Y cada uno de los clientes React creará una conexión al socket, el socket abierto en el servidor, lo que permite una comunicación bidireccional. Así que en caso de que no lo sepan, los WebSockets son una conexión TCP. Es un protocolo que utiliza la conexión TCP para permitir la comunicación bidireccional. Así que los clientes pueden enviar y recibir data del servidor. Y lo que esto nos permite hacer es separar las responsabilidades de nuestro juego en lo que está en el servidor y lo que está en el cliente. Así que el servidor puede manejar la lógica del juego

Así que advertencia, este juego tiene mucho código. Y voy a revisar algo de él, pero no mucho como verán. Si están interesados en el resto, está allí arriba. Y cada una de estas fases de desarrollo son ramas separadas en el repositorio.

Entonces, prototipo. Tiene sentido porque nuestro código de cliente depende tanto de lo que el servidor le está diciendo que es el estado actual, para hablar de cómo el servidor está realmente implementado y cómo se comunica con el cliente.

En primer lugar, el servidor enviará ciertas solicitudes o no realmente solicitudes, sino ciertos mensajes al cliente que le dicen al cliente cuál es su estado como jugador. Así, su ID, dónde está ubicado, y también enviará toda la información sobre otros jugadores a cada jugador que esté conectado. Así que cuando un jugador se une, cuando se desconecta, cuando se mueve, todos los demás jugadores se actualizan.

A su vez, el cliente le dirá al servidor cosas como cuándo quiere unirse y cuándo se está moviendo. También hay situaciones en las que el servidor necesita facilitar la comunicación entre dos clientes diferentes. Así que digamos que el jugador uno quiere desafiar al jugador dos a un partido. Le dirá al servidor, estoy desafiando al jugador dos. El servidor diría, hey jugador dos, el jugador uno te está desafiando. El jugador dos dice, acepto. Y entonces el servidor inicia un juego y pone las dos conexiones de socket en una sola sala. Así que su comunicación está segregada del resto del grupo de jugadores.

Así que esto es genial. Tenemos todas estas cosas en el servidor. El servidor sabe todo lo que está pasando, y el cliente sólo tiene que actualizarse. ¿Cuál es una buena manera de hacer eso? Bueno, tenemos el contexto de React. Y podemos crear un único contexto de React que abrirá la conexión de socket, se conectará al servidor, escuchará todos los eventos requeridos, y luego simplemente actualizará el estado de React. Y con esto, tenemos un estado reactivo agradable que el resto de nuestra aplicación puede usar sin necesariamente tener que escuchar cada evento y cada componente. Y esto es lo que el juego parece al final de la fase de prototipo. Es muy básico HTML, pero realmente muestra que este juego es viable. Realmente puedes jugarlo. La tecnología que queremos usar puede servir

La parte final es cambiar el juego de batalla naval real. Y esto requiere un poco de matemáticas. Utilicé algo llamado un ayudante de cuadrícula de 3JS para crear la cuadrícula y luego averiguar en base a otro plano debajo de la cuadrícula qué coordenadas fueron clicadas. Finalmente, para completar el resto de la fase de bloqueo fue realmente colocar nuestros barcos. Y aunque fue fácil en la fase de prototipo simplemente decir, este bloque representa un submarino, y este otro bloque al lado también representa un submarino, eso no es tan simple cuando estás haciendo 3D. Porque quieres añadir modelos. Quieres añadir cosas reales que ocupen espacio. Y la posicionamiento no es tan simple. Especialmente porque algunos de ellos son verticales, algunos de ellos son horizontales. Algunos de ellos ocupan un número par de espacios. Algunos de ellos son impares. Y estás posicionando todos ellos basándote en su centro exacto. Así que es solo un poco más de matemáticas. Pero hacer esto mientras solo tenemos cilindros para trabajar hace que sea mucho más fácil cuando realmente ponemos nuestros modelos. Así que hablando de los modelos, estos son ellos. Los hice en Blender. Y solo quiero recordarte, abandoné la escuela de arte. Así que sé amable. Y así es como se ven en el juego. Así que, quizás no sea el juego más atractivo. Pero todavía tiene un encanto ¿verdad? Es algo que puedes conceptualmente entender sobre cómo pasar de algo que es solo HTML, solo UI, a algo que es más o menos 3D. Y realmente esto es solo como habilidades de artista que están fallando en este momento. Finalmente, para hacerlo un juego náutico real, necesitas tener un nivel de animación que cause mareos. Así que hice esto de tres maneras diferentes. A saber un ayudante llamado float de React 3.J, que es un conjunto de ayudantes para React 3.Fiber. Cualquier cosa que envuelvas en este componente, automáticamente flotará, lo cual es muy apropiado para nuestros barcos. Lo siguiente es cuando estás disparando la bola de cañón. Una biblioteca llamada React Spring con una callback llamada uSpring que permite esta bonita animación fluida sin tener que hacer mucho. Y la parte final es las animaciones de los modelos. Así que el pequeño fuego es en realidad un activo que encontré en Sketchfab y tenía esta animación dentro de él.

Hace que tu juego parezca 3D. Y finalmente hice unas pocas mejoras pequeñas en la interfaz de usuario solo para hacer que se sienta más como un juego móvil. Así que en lugar de tener botones, botones con iconos y emojis.

Bien. Entonces. Si quieres probarlo. Nunca lo he probado con tanta gente. Así que estoy realmente emocionado de ver cuán rápido se bloquea. Pero les daré un momento. Todavía hay algunos teléfonos levantados.

Finalmente, solo quiero hacer una mención a algunos recursos que realmente me han ayudado con React 3.Fiber. Olvidé poner la documentation actual porque como dijo Eddie, una buena documentation vale su peso en oro. Pero sí. Echa un vistazo a la Guía Definitiva de React 3.Fiber de Wawa Sanjay y a la leyenda 3.JS Journey de Bruno Simons. Y también al boletín de noticias de Web Game Dev y al servidor de Discord. Así que supongo que todos ustedes se están divirtiendo. Ya no me están escuchando. Estoy feliz. Esto ha sido genial. Muchas gracias.

Bien. Entonces, lo primero que quiero decir es que me parece muy gracioso que tu nombre sea Maya y que uses Blender. Y hubo tres personas que entendieron esa broma y los amo a todos. Bien. Entonces comencemos con algunas preguntas. Y lo primero que creo es... ¿Qué tan viable es la latencia en estos juegos? Me encanta. Esta es siempre la primera pregunta. Entonces, para este juego en específico, la latencia no es tan importante. Lo que es más importante es la fiabilidad de recibir los mensajes de ida y vuelta.

Si estás construyendo un juego que es más como un juego de lucha o una carrera, cualquier cosa que requiera reacciones rápidas, la latencia es mucho, mucho más importante. Podrías querer mirar algo como WebRTC en su lugar.

¿Cuánto tiempo te llevó hacer esto? Así que este juego específicamente es una reconstrucción de un juego similar que hice con solo jugar 3.JS. Construir ese tomó, quiero decir, como dos semanas. Y este tomó quizás cuatro días. ¿Hiciste el primero en Vue.JS? Sí. Y ni siquiera React para la interfaz de usuario, solo hice como document create element. ¡Eso fue mucho código! Sí, fue innecesario. Vale. Y creo que hay una pregunta sobre cómo pronunciar tu nombre básicamente. Pero es igual que un software 3D. Sí. La pregunta de si es Maya con una J o Maya con una Y, es Maya con una J en mi pasaporte. Y Maya con una Y para el resto de ustedes. Oh sí, el servidor se estrelló. Había un montón de gente diciendo que tampoco podían acceder. Pero para ser justos, me dijo que bit.li estaba fuera de línea. Así que no estoy seguro si fuiste tú o ellos los que se estrellaron. Hicimos estrellar bit.ly, chicos. Estoy orgulloso. Alguien está diciendo que tus habilidades de design son impresionantes. Gracias. Eres muy bienvenido. No hice nada. Vale. Así que. Las habilidades gráficas podrían ser un gran obstáculo. ¿Tienes alguna sugerencia allí? ¿Probarlo? Tal vez funcionaría. Creo que ahora con la llegada de la IA generativa, me van a cancelar por esto, pero puedes hacer que las cosas se vean realmente bonitas con cosas como mid journey.

¿Cómo escribirías pruebas de extremo a extremo? Esa es una buena pregunta. ¿Verdad? Me encanta. ¿Eso es incluso posible? Así que para escribir pruebas de extremo a extremo, si estás haciendo algo visual probablemente la forma en que querrías hacerlo es con ¿cuáles son esas herramientas que hacen análisis de capturas de pantalla? Cypress. Sí, Cypress. Creo que Playwright también lo hace. Necesitarías algo que tuviera en cuenta los aspectos visuales de ello si no estás testing solo como la funcionalidad del juego. Alguien está preguntando ¿son posibles juegos como GTA en el navegador? A quien preguntó esto, quiero preguntar, ¿estás hablando de la complicación subyacente de construir un juego como GTA o estás hablando de los gráficos? Porque creo que la complicación es, pero no creo que los gráficos lo sean. Estoy de acuerdo. Creo que incluso la complicación podría ser demasiado para lo que el navegador. Va a colapsar. Pero GTA también lo hace, para ser justos. Eso es cierto. Diré, GTA específicamente, ese nivel de gráficos tienes desarrolladores de gráficos o desarrolladores de tarjetas gráficas y desarrolladores de plataformas como PlayStation y Xbox, trabajando con los estudios de juegos para obtener ese nivel de detalle real y obtener estas especificaciones allí. Tenemos WebGL que tiene como 30 años en el navegador. Así que, sí. En términos de gráficos, no tan genial. Pero diré, hay un desarrollador construyendo un juego llamado Hordes.io, creo que se parece mucho a World of Warcraft en el navegador. Así que, échale un vistazo si quieres impresionarte.

Oh, sí. Hay personas haciendo, como, olvidé la palabra, pero como renderizado de ciclos en el navegador. ¿Cuál es la diferencia? Olvidé la palabra. La forma en que funciona el renderizado la mayoría de las veces en la mayoría de los motores de juegos como Unreal y cosas así es que cada partícula de luz se emite y luego tienen que calcular dónde golpea y dónde golpea y todos los colores y todo eso. Eso no es lo que hace Three.js. Three.js suena así, lo haré. Y alguien está haciendo lo otro en el navegador, y eso hará que tu computadora se bloquee. Sí. Entonces, ¿estás hablando de ray marching? Pensé que comenzaba con ray, pero no sabía dónde terminaba. Ray tracing también. Sí, como dijo Sarah, básicamente está calculando para cada píxel cada lugar en la pantalla, calculas todas las diferentes fuentes de luz y de dónde rebotó esa luz. Eso es realmente intensivo en términos computacionales. Lo que hace Three.js se llama rasterización. Es un pipeline completamente diferente y la mayor parte de eso son solo trucos. Cuando tienes algo que se ve bien en Three.js o cualquier cosa que solo haga rasterización, es principalmente solo como, tenemos este plano que tiene neblina sobre él y por eso se ve genial. Gráficos de PS1. Nunca se fueron realmente.

Alguien está preguntando, ¿puedes elaborar cómo mantienes cada juego separado de los demás en el servidor WebSocket? Estoy usando Socket.io para eso. Básicamente tiene esta función llamada salas, donde puedes agrupar jugadores en una sala. Es como una cosa en memoria, no es algo más técnico que eso. Te permite tener una API agradable para simplemente emitir eventos a esa sala cuando los jugadores juegan el juego y no necesitan estar aislados del resto.

Genial. Ahora dos preguntas que te serán muy fáciles de responder. La primera pregunta es, ¿la API busca? Es realmente perezoso. No busca. Corre hacia la pelota, la toma y se tumba y la mastica. Oh, eso es lo que hace mi gato. Genial. Y la última pregunta que tengo para ti es, ¿usas Jira en Linear? Entonces, ¿prefieres Linear en lugar de Jira? Vaya, loca aquí arriba. Linear todo el camino. Muchas gracias, eso fue increíble. Muchas gracias. Eres libre de irte, Maya. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias.