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

Rate this content
Bookmark
The video discusses the complexities of creating multiplayer games and offers solutions to simplify the process. It emphasizes the importance of a backend, like a Node.js server with Socket.io, for handling player connections and synchronizing game states. The use of room codes as unique identifiers for communication and the necessity of a lobby UI for sharing these codes are highlighted. Customization options, such as avatars and colors, are also mentioned to differentiate players. The video explores hosting options like AWS EC2, Vercel, and Netlify for global scalability and suggests using a central database like Redis to synchronize room states and player lists across isolated servers. For developers who want to avoid server management, services like Unity Photon, Hathora, Revit, Snapser, and Firebase are recommended. The Playroom framework is introduced as a tool that eliminates the need for server code, providing features like lobby systems, player profile management, and state synchronization. Playroom leverages Cloud Play and DurableObjects for low-latency storage and offers both TCP and UDP/WebRTC connections for different types of game states. Positive feedback from developers who have used Playroom is mentioned, and the video concludes with a call to action to visit Playroom.com or follow the speaker on Twitter.

From Author:

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.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this Tech Conference.

FAQ

Asad Nehman is a developer with over 10 years of experience, specializing in developer tools. He has also started an online IDE company in the past and enjoys playing and creating multiplayer games.

Creating multiplayer games is challenging because it involves not only game development but also managing backend servers, handling player connections, creating room systems, and ensuring low-latency communication between players. Developers often need to manage clusters and databases across the world to minimize lag.

The first step in converting a single-player game to a multiplayer game is to add a backend, typically a Node.js server with a WebSocket framework like Socket.io, to handle player connections and synchronize game states between players.

'Rooms' are important in multiplayer games because they allow players to be grouped together, enabling them to communicate and interact only with players in the same room. This helps manage game sessions and ensures that players are not mixed up with others who are not in their game session.

Some challenges with deploying multiplayer games include ensuring that servers are not isolated, synchronizing states across multiple servers, and reducing lag by deploying servers and database replicas close to users. Developers also need to manage server and database infrastructure, which can be time-consuming and complex.

Alternatives to writing your own server code for multiplayer games include using services like Unity's Photon or netcode for game objects, Hathora, Revit, Snapser, and Firebase. These services host game servers for you, allowing developers to focus more on game development rather than server management.

Playroom is a framework designed to simplify multiplayer game development by eliminating the need for developers to write server code. It provides features like lobby systems, player profile management, and state synchronization with minimal coding. Developers can use Playroom's functions to handle game logic and player interactions without worrying about backend infrastructure.

Playroom handles low-latency communication between players by using Cloud Play's edge nodes and DurableObjects for consistent and low-latency storage. It also maintains two types of connections: TCP sockets for reliable communication and UDP/WebRTC for faster but less reliable communication, allowing developers to choose the appropriate method based on the game state.

Playroom has received positive feedback from game developers, who appreciate its focus on simplifying multiplayer game development and reducing the need to write non-game-related code. Developers have found Playroom effective in managing multiplayer game infrastructure and improving development efficiency.

Developers can start using Playroom by installing it via npm with the command 'npm install playroom-get'. They can then initialize it using the 'insertCoin' function, which sets up the lobby system and handles player profiles, room creation, and state synchronization.

Asad Memon
Asad Memon
18 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Transcription

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
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize 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
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
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
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.
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
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.

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 🤐)