Juegos multijugador con React Three Fiber y WebSockets

Rate this content
Bookmark
Slides

Los juegos multijugador son los más geniales: nos acercan, incluso cuando estamos luchando. Si bien no puedes construir World of Warcraft en un fin de semana, tampoco necesitas un gran equipo de producción de un estudio de juegos AAA para crear un juego que sea divertido y atractivo. ¡Todo lo que necesitas es el buen viejo React con un poco de magia de Three.js y WebSocket! Esta charla te guía a través de la creación de un simple juego multijugador en el navegador utilizando React Three Fiber y Socket.IO. Aprenderás cómo estructurar el código del juego, renderizar una escena 3D interactiva en el navegador y establecer una comunicación bidireccional entre el cliente y el servidor.

28 min
08 Dec, 2023

AI Generated Video Summary

Estamos discutiendo la creación de juegos multijugador en React, centrándonos en la accesibilidad y las fases de desarrollo. La arquitectura del juego implica un monorepo con un solo servidor y conexiones WebSocket. El contexto de React se utiliza para la comunicación del servidor y la actualización del estado de React. El juego introduce 3D usando React 3 Fiber e implementa mecánicas de juego como temporizadores. La charla también menciona el uso de herramientas de IA generativas para el diseño y prueba de juegos con herramientas como Cypress. También se discuten diferentes técnicas de renderizado y el uso de la función de salas de Socket.io en el servidor WebSocket.

1. Introducción a la Creación de Juegos en React

Short description:

Vamos a hablar sobre la creación de juegos multijugador para el navegador y WebSockets. Mi nombre es Maya, y tengo un título en desarrollo de juegos. Estoy aquí para explicar por qué hacer juegos en React es una opción legítima. La accesibilidad es la clave. Muchos programadores ya tienen las habilidades y herramientas necesarias para hacer juegos, solo necesitan un cambio de mentalidad.

♪♪ ♪♪ ♪♪ ♪♪ ¡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.

2. Haciendo Juegos Web Accesibles y Fases de Desarrollo

Short description:

Estamos hablando de hacer los juegos web accesibles para los jugadores. Presentamos React Battleship, un juego multijugador con mecánicas clásicas de Battleship. Seguiremos un plan de desarrollo de cuatro fases: diseño, prototipo, bloqueo y producción. Comenzando con el diseño, definimos el concepto y las restricciones del juego.

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.

3. Haciendo Juegos Accesibles y Arquitectura

Short description:

Queremos centrarnos en el móvil y tener un público objetivo de adultos. El juego tendrá diferentes modos de juego y debe ser accesible sin autenticación. La arquitectura del juego implica un monorepo con un único servidor, Node.js con Fastify y conexiones WebSocket para la comunicación bidireccional entre los clientes y el servidor.

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

4. Comunicación del Servidor y Contexto de React

Short description:

El cliente no tiene que saber nada de eso. El servidor envía mensajes al cliente, incluyendo información del jugador. El cliente actualiza al servidor sobre sus acciones. El contexto de React se utiliza para actualizar el estado de React. El juego al final de la fase de prototipo es HTML básico, pero es jugable.

y el estado del juego. El cliente no tiene que saber nada de eso. Básicamente, la fuente de verdad es lo que sea que esté en el servidor. Y luego el cliente puede simplemente mostrar el estado, actualizar cualquier entrada que provenga del jugador, y estamos listos para continuar.

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

5. Mecánicas del Juego e Introducción al 3D

Short description:

Si tu oponente tarda mucho en hacer su turno, se añade un temporizador para evitar la desconexión o la renuncia. En la fase de bloqueo, se introduce el 3D utilizando un gráfico de escena. Esto permite una representación virtual de objetos en una escena 3D. React 3 Fiber permite escribir componentes de React para el código 3JS, lo que lo hace más eficiente. Los objetos de los jugadores se crean en el juego utilizando componentes de React, y se añade movimiento utilizando un plano para representar el agua.

el propósito. E incluso en esta etapa, noté algo que era bastante crítico para las mecánicas del juego, o para el juego en sí. Y eso fue que si tu oponente tarda mucho tiempo en hacer su turno, ¿qué vas a hacer? Realmente no tienes una opción. Puedes desconectarte o renunciar. Y eso no te pone en una buena posición. Así que añadí un temporizador para evitar que eso suceda si no decides dentro de siete segundos, tu turno se hace por ti. Así que el siguiente paso, ahora que tenemos este juego, es la fase de bloqueo donde realmente introducimos el 3D en el juego. Y cuando hablamos de 3D en términos de tecnologías 3D, usamos palabras como escena, cámara, iluminación, objetos. Y esto evoca la imagen de un set de película. Y creo que esta metáfora es realmente muy apropiada porque al igual que en un set de película donde tienes un mundo físico, puedes caminar a través de él, esas cosas existen. Pero cuando ves una película, es desde un solo punto de vista. Lo mismo es cierto para una escena 3D. Hay una representación virtual de cosas que realmente existen, pero sólo llegas a ver lo que está en la pantalla. Y la forma en que representamos esta escena virtual 3D es a través de algo llamado gráfico de escena. Y esto es del sitio web de 3JS. Así que 3JS es la tecnología subyacente de React 3 Fiber. Y esto nos resulta familiar, ¿verdad? Se parece un poco a un árbol DOM o a un árbol de componentes. Eso está bien. Creo que puedo entender cómo funcionaría dentro de una aplicación React. Pero porque 3JS es la tecnología subyacente y eso es un gráfico de escena de 3JS, esta es la forma en que tradicionalmente escribirías código 3JS. Es muy procedimental. Tienes que añadir cosas a la escena manualmente, componer cosas manualmente. Y eso no nos gusta. Queremos escribir React, ¿verdad? Así que ahí es donde usarías React 3 Fiber. Y estos dos fragmentos de código están haciendo lo mismo. Excepto que uno de ellos nos permite escribir React y React components. Así que lo que eso parece dentro de nuestro juego es que donde teníamos una tabla y recorríamos todos los jugadores para crear filas de tabla, ahora recorremos todos los jugadores y creamos objetos de jugadores, que son 3D. No necesariamente queremos que simplemente estén ahí. Queremos añadirles algún movimiento. Pero están ahí. Así que para añadir movimiento, la forma en que lo hice fue creando una especie de plano que representaría

6. Capacidades móviles y React 3 Fiber

Short description:

Nuestras capacidades en móviles son limitadas, pero React 3 Fiber simplifica el proceso de traducir toques en puntos 3D. El contexto de React se sincroniza con el servidor, permitiendo a los jugadores moverse en las pantallas de los demás.

el agua. Y debido a que nuestras capacidades en móviles son algo limitadas en lo que respecta a la entrada del jugador, solo obtienes dos toques, ¿verdad? Y si esta fuera una masterclass sobre solo 3JS, estaría hablando sobre el trazado de rayos y cómo traduces un toque en un punto 3D que corresponde a un componente. Pero esta es una masterclass de React 3 Fiber. Y simplemente obtenemos un manejador de clics sencillo que se encarga de todo eso por nosotros y nos dice dónde en el espacio 3D hicimos clic. Así que este es el estado actual donde tenemos movimiento. Y porque ya tenemos el contexto de React sincronizando con el servidor, nuestra aplicación ya se está actualizando. Así que nuestros jugadores se están moviendo en las pantallas de los demás.

7. Cambiando el Juego y Añadiendo Modelos 3D

Short description:

Para cambiar el juego de batalla naval real, se utilizó un ayudante de cuadrícula de 3JS para crear la cuadrícula y determinar las coordenadas clicadas. Colocar los barcos en 3D requirió matemáticas adicionales, considerando sus posiciones, orientaciones y puntos centrales. Los modelos, creados en Blender, pueden no ser los más atractivos, pero añaden encanto al juego. Se implementaron técnicas de animación, incluyendo barcos flotantes, disparos de cañones y animaciones de modelos, para mejorar la experiencia náutica.

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.

8. Aspecto del Juego, Mejoras de la Interfaz de Usuario, Recursos y Latencia

Short description:

Hace que tu juego parezca 3D. Finalmente, se realizaron pequeñas mejoras en la interfaz de usuario para que parezca un juego móvil. Mención a los recursos para React 3.Fiber. La latencia en los juegos no es importante, la fiabilidad de los mensajes sí lo es.

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.

9. Construyendo Juegos y Lidiando con la Latencia

Short description:

Si estás construyendo un juego que requiere reacciones rápidas, la latencia es mucho más importante. El juego fue reconstruido usando React y tomó cuatro días. La primera versión se hizo en Vue.JS sin React para la interfaz de usuario, lo que resultó en código innecesario. La pronunciación de mi nombre es Maya con una J en mi pasaporte y Maya con una Y para todos los demás. El servidor se estrelló, posiblemente debido a que bit.ly estaba fuera de línea. Alguien elogió mis habilidades de diseño, pero no hice nada. Las habilidades gráficas pueden ser un obstáculo, pero puedes usar herramientas de IA generativas como mid journey para crear diseños atractivos.

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.

10. Construyendo Juegos con IA Generativa y Pruebas

Short description:

Encontré un tutorial sobre cómo hacer un juego a partir de IA generativa. Hay sitios web como Sketchfab y BlendSwap donde puedes obtener modelos 3D. Las pruebas de extremo a extremo para los aspectos visuales del juego se pueden realizar con herramientas como Cypress. Juegos como GTA pueden tener complicaciones en el navegador, pero hay juegos impresionantes como Hordes.io que se asemejan a World of Warcraft.

Y te animaría a intentarlo. Voy a publicar un tutorial que encontré de alguien que hizo un juego completamente a partir de IA generativa. Todos sus activos son de mid journey. Así que esa podría ser una forma de avanzar si no quieres aprender realmente cómo mejorar en design. También hay dos sitios web que uso genuinamente para obtener modelos 3D si estoy mirando algo y no quiero hacerlo. Sketchfab. Por favor, no olvides atribuir a las personas en Sketchfab y también BlendSwap. La mayoría de las cosas en BlendSwap son en realidad CC0. Y eso solo funciona en Blender, pero seamos honestos. ¿Vas a comprar Maya? No lo harás. También puedes, como, sí, si estás importando tecnicismos, si estás haciendo como 3JS o React 3 Fiber, probablemente vas a exportar a GLTF de todos modos. Y hacen GLTF automático en Sketchfab, lo cual es agradable. Así que sí, esto se está volviendo demasiado técnico ahora.

¿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.

11. Técnicas de Renderizado y Servidor WebSocket

Short description:

Existen diferentes técnicas de renderizado en motores de juegos como Unreal. Three.js utiliza rasterización, que crea un efecto de neblina. Para separar los juegos en el servidor WebSocket, se utiliza la función de salas de Socket.io. Ahora, dos preguntas fáciles: la API busca de manera perezosa, y se prefiere Linear sobre Jira.

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.

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

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.