Why Is Building a Multiplayer Game So Hard and What Can We Do to Fix It for Everyone

Rate this content
Bookmark
Making casual games has become easier than ever but setting up multiplayer still requires you to write network code, deal with websockets, load-balancing servers, co-locating servers and whatnot. 
I am building Playroom to solve this, a high-performance sync that handles the networking and the room management so you can focus on building your game.
Asad Memon
Asad Memon
18 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Asad Nehman discusses the challenges of making multiplayer games and suggests ways to simplify the process. He highlights the need for a backend, such as a Node.js server with Socket.io, to handle player connections. Rooms are introduced to connect players and their friends, allowing communication within each room. Hosting options like AWS EC2, Vercel, and Netlify can help scale the game globally. Playroom framework eliminates the need for server code, lobby systems, and managing player profiles.

1. Introduction to Making Multiplayer Games

Short description:

Asad Nehman discusses the challenges of making multiplayer games and suggests ways to simplify the process. He highlights the need for a backend, such as a Node.js server with Socket.io, to handle player connections. Rooms are introduced to connect players and their friends, allowing communication within each room. Room codes are used as unique channel IDs for communication, including player state and position. A lobby UI is necessary to share room codes, allowing players to join the same room. Customization options, such as avatars and colors, help differentiate between players.

Hi everyone, this is Asad Nehman. I'm going to talk about why it's so hard to make multiplayer games and what can we do to make it easier? So a little bit of what I mean. I am a developer. I make things. Specifically, I like to make developer tools and I have been doing so for 10 plus years. I also started an online IDE company in the past. I also like to play multiplayer games with my friends. So naturally I like to make multiplayer games.

So let's say I want to make a multiplayer game. Let's start with the most simple multiplayer game and see what challenges do we face. So the first thing you probably want to do is get a base single-player game, which you will then convert to a multiplayer game. This base game will probably have some game loop with them, and the multiplayer parts can be you adding more players into it and some logic around it, some competitions and stuff. And the first thing you would probably do to convert this into a multiplayer game is to add a backend to it. And in the context of web games, this is usually a Node.js server with some kind of a web socket framework like Socket.io. So what you probably want to do is handle the player connections and store those players in some global array inside your Node.js app, and then that way all the players can connect with each other using this web socket backend and this works.

But you soon realize that you also need to have some concept of Rooms in your game, in your server. So what the Rooms would do is, you would assign some room code to some players and what this allows you to do is connect each player and their friends with each other. So all of the players in all your games are not in the same room. They are in their own rooms and then rooms can start and end at their own times depending on when they start their games. So it sounds like these two players are in their own rooms and these two players are in their own rooms and they can only communicate within their own rooms. They cannot communicate with the players in other rooms. Simple enough. And yeah. So they can use this room code as a unique channel id through which they can communicate with each other. The communication can be player state and player position, scores, all that stuff.

Now, you need... Once you introduce room codes, you need a way to share these room codes with other players. So this can be some kind of a lobby UI that you need to make. So the lobby UI can be the host can start the game, they can share the room code, room link, QR code with other players, and that QR code or room link will have the room ID embedded into it, and when the other player opens this URL, they're automatically connected to the same room, and that way they can communicate with each other. You also need some way, some UI to add, you also need some kind of UI to add, allow players to pick their avatars, their colors, their names, so that to have some customization, and so that they can differentiate between the players.

2. Broadcasting Game State and Deploying Servers

Short description:

Once you have the game state broadcasting and synchronization in place, you need to deploy your game. Hosting options like AWS EC2, Vercel, and Netlify can help you scale your game globally. However, a challenge arises when your servers are isolated, and players connected to different servers can't interact. To solve this, you need to connect the servers to a central database like Redis, and deploy them across the world for low latency.

Yeah, and once you have that, you make your game. Your game is essentially, you broadcast your game state to the players, and the players broadcast their own state to the other players, and your job as a game maker is to combine those states, updates, and consume them, save them locally.

So as an example, one player can move and share the position to the WebSocket server, and the other players can read that position and update the player on their own screen, and vice versa. So essentially what you're doing is you're maintaining these global, your own global variables, which you want to sync across all the players in your own.

And most of the net code involved would be to make sure that these states are synced. Once you have that, you have a simple game. Now, you can't just share this game without deploying it somewhere. To deploy it, you need some place to host this game. This can be AWS EC2 instance, which I would recommend. You can use some service like Vercel, Netlify, and what they can do is host your game, scale your game across the world, have multiple instances running of your game based on the traffic coming to your game and once that happens, you realize the main problem here.

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
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. 

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
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.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
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.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)