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.

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

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
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. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
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.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
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.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
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.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
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.