Multiplayer Games with React Three Fiber and WebSockets

Rate this content
Bookmark
Slides

Multiplayer games are the coolest: they bring us closer together, even when we’re battling it out. While you can’t build World of Warcraft in a weekend, you also don’t need a big AAA game studio production team to create a game that is fun and engaging. All you need is good old React with some Three.js and WebSocket magic sprinkled in! This talk walks you through creating a simple multiplayer game in the browser using React Three Fiber and Socket.IO. You will learn how to structure the game code, render an interactive 3D scene in the browser, and establish two-way communication between the client and server.

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

Comments

Sign in or register to post your comment.

Video Summary and Transcription

We're discussing making multiplayer games in React, focusing on accessibility and development phases. The game architecture involves a monorepo with a single server and WebSocket connections. React context is used for server communication and updating the React state. The game introduces 3D using React 3 Fiber and implements game mechanics like timers. The talk also mentions using generative AI tools for game design and testing with tools like Cypress. Different rendering techniques and the use of Socket.io's rooms feature in the WebSocket server are also discussed.

Available in Español

1. Introduction to Making Games in React

Short description:

We're going to be talking about making multiplayer games for the browser and WebSockets. My name is Maya, and I have a degree in game development. I'm here to explain why making games in React is a legitimate option. Accessibility is the key. Many programmers already have the necessary skills and tools to make games, they just need a shift in mindset.

♪♪ ♪♪ ♪♪ ♪♪ Hi! Thanks, everyone, for being here. Thank you, Sarah, for the energy. I absolutely need it. It's been a long day. We're going to be talking about making multiplayer games for the browser and WebSockets.

Who are we? First of all, who am I? My name is Maya. That's my dog, Api. Yes, that does stand for API. I'm a nerd. I went to art school and then I dropped out, so now I'm an art school dropout. I taught myself to program. Got several software engineering jobs for some reason, and currently I'm working at Linear, where the team and I are making software a little bit more magical. But most relevant to this talk is that I have a degree in game development. I do. Feel free to follow me on socials if you're so inclined.

A lot of you may be like this person that responded to the React Day Berlin tweet about announcing this talk. And this person says, Why in the name of all that is holy would anyone make a game in React? This is a great way to start a talk. I have to agree with them, because it's a legitimate question. I understand the bewilderment. There are so many better platforms for playing games than the browser. There are so many better technologies for building games in than React or JavaScript. So why would you want to do this? Accessibility.

I'm not talking about screen readers and ARIA tags, although those are really important things and they, of course, can come up in games. I'm talking about accessibility of game development to you, as the developer. So I say I have a degree in game development. People usually say something along the lines of, I have a really cool idea for a game, but I opened up Unity, it's really confusing, I closed it, never made the game. And these people are programmers. They know how to use React. They have these tools already in their hands. They just need a few extra skills and a shift in mindset to know that making games is possible.

2. Making Web Games Accessible and Development Phases

Short description:

We're talking about making web games accessible to players. Introducing React Battleship, a multiplayer game with classic Battleship mechanics. We'll follow a four-phase development plan: design, prototype, block out, and production. Starting with design, we define the game's concept and constraints.

The other reason why you might want to use React and make web games is to make them accessible to your players. So I've made a game for this conference, and I didn't expect any of you to bring your PlayStation 5 or Nintendo Switch. I just expect you to have a mobile phone with an internet connection and a web browser. And that's cool, because your players don't necessarily want to install anything. Maybe they want to play your game at work. Just saying.

So what are we talking about? We're talking about a game called React Battleship, and it's going to be a multiplayer game with the classic mechanics of Battleship that you probably played in elementary school when you were learning the coordinate system. So the idea is that you have a grid, you put your ships on that grid, your opponent does as well, and then you try to sink each other's ships by randomly firing onto their grid. Okay.

Game plan. Pun intended. Whenever I also talk to game developers, so indie or solo game devs, some of the practices they say are really useful for them are things that we already know in software engineering and they just kind of stumble upon it because they're not in that industry. And they tell me that you need to manage scope creep, first of all. You need to iterate quickly on your ideas to figure out if they work or not, and you need to fail fast. With that in mind, it would set our game up for success to do a little planning up front, and I propose we do that by dividing game development into four distinct phases. First we'll have a design phase where we figure out what we're making. What exactly is this idea of the game that we want? We put it down on paper and we agree on it, and we say, that's the game and nothing else. Next we make a prototype of it. Does this kind of game make any sense at all with the technologies that we want to use? Is it possible to have this kind of mechanic? Is it even fun to play? And we get to do this, we get to test these ideas at a very, very low resolution with very little time commitment. The next step is a block out phase, and this is because we're making a 3D game and this is where our development breaks away from traditional software development. This is the phase where we actually introduce 3D into our game. Does our mechanic still make sense if the game is 3D? And finally we have a production step where we make it magical. Make it nice for the player and actually make it a presentable game. So starting with design. In school they taught us, because they do have a degree in game development, that you need to start every game with a game design document, or a GDD. And these game design documents can be hundreds of pages. They are entire wikis. They're used by multiple teams, across multiple departments, they span years and are maintained. Or they can be a page. Which is our case, and it might not look like much, but defining these things that are defined in the GDD are super important constraints to what the game actually is.

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.