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.

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.

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.
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.
¡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.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
31 min
Cómo no construir un videojuego
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
WorkshopFree
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
WorkshopFree
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.