Juegos multijugador con React Three Fiber y WebSockets

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Slides
Rate this content

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.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Maya es una autodidacta en programación que anteriormente trabajó en varios empleos de ingeniería de software y actualmente trabaja en Linear. Tiene un título en desarrollo de juegos y ha usado esta experiencia para hablar sobre la creación de juegos multijugador para navegadores.

Maya eligió usar React para el desarrollo de juegos en el navegador debido a su accesibilidad para los desarrolladores que ya están familiarizados con esta herramienta. React permite a estos desarrolladores utilizar sus conocimientos existentes y agregar algunas habilidades adicionales para empezar a crear juegos.

React Battleship es un juego multijugador basado en el clásico juego de Battleship, diseñado para ser jugado en navegadores. Utiliza WebSockets para permitir una comunicación bidireccional entre el cliente y el servidor, donde el servidor maneja la lógica del juego y el estado, mientras que el cliente muestra este estado y actualiza las entradas del jugador.

El desarrollo de React Battleship está dividido en cuatro fases: diseño, prototipo, bloqueo y producción. Estas fases incluyen desde la planificación inicial y pruebas de concepto hasta la implementación de características 3D y la finalización del juego para hacerlo atractivo y funcional.

Maya utiliza React 3 Fiber, una re-implementación de React Reconciler para Three.js, que le permite trabajar con gráficos 3D dentro de la aplicación React. Esto facilita la creación de escenas, cámaras, y objetos 3D en un entorno que ya es familiar para desarrolladores de React.

El servidor del juego React Battleship está basado en Node.js utilizando Fastify. Se encarga de abrir una conexión WebSocket mediante Socket.io para facilitar la comunicación en tiempo real entre los clientes conectados.

Maya se enfoca en hacer el juego accesible evitando requisitos como la creación de cuentas o inicio de sesión, optimizando la experiencia para que los jugadores puedan empezar a jugar rápidamente en sus dispositivos móviles a través de una simple conexión a Internet.

Maya Nedeljković Batić
Maya Nedeljković Batić
28 min
08 Dec, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
Top Content
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
Cómo No Construir un Videojuego
React Summit 2023React Summit 2023
31 min
Cómo No Construir un Videojuego
Top Content
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Mejora el rendimiento de tus juegos utilizando Canvas
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Mejora el rendimiento de tus juegos utilizando Canvas
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
Workshop
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
Workshop
Avaer Kazmer
Avaer Kazmer
Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.