Unity web player games multiplayer how to#
Unity web player games multiplayer full#

Matter.js as a physics engine instead of Phaser.js because it runs in Node and Autowuzzler does not require a full game framework.

In my research, I came across Colyseus, which sounded like the perfect tool for the job.įor the other main building blocks of the game I chose: Project SetupĬlearly, the “first client rules all” approach needed to be replaced with a solution in which the game state lives on the server. It was time to dump the prototype and start with a fresh setup and a clear goal. I was also a bit concerned by the bundle size the Phaser.js library introduced. Other inherent problems included the situation when the first player (remember, the one in charge of everything) left the game - who should take over? At this point there was only one game room, so anyone would join the same game. Feedback was very positive, with the major concern being - not surprisingly - the real-time performance. Validate The Idea, Dump The PrototypeĪs flawed as the implementation was, it was sufficiently playable to invite friends for a first test drive. However, I accepted this fact in favor of quickly getting something playable to figure out if the game is actually fun to play. If this sounds like poor architecture to you - you’re absolutely right. This led to the situation where the first player got to see the physics happening in real-time (it is happening locally in their browser, after all), while all the other players were lagging behind at least 30 milliseconds (the broadcast rate I chose), or - if the first player’s network connection was slow - considerably worse. The other clients would then apply the changes to the game objects. Since the physics calculations were done on the client in the Phaser game, I chose a simple, but obviously flawed logic: The first connected client had the doubtful privilege of doing the physics calculations for all game objects, sending the results to the express server, which in turn broadcasted the updated positions, angles and forces back to the other player’s clients. The game stage was embedded in a Next.js application, again because I already had a solid understanding of Next.js and wanted to focus mainly on the game.Īs the game needs to support multiple players in real-time, I utilized Express as a WebSockets broker. The first prototype was built using the open-source game engine Phaser.js, mostly for the included physics engine and because I already had some experience with it. ( Large preview) First Working (Terrible) Prototype Autowuzzler (beta) with six concurrent players in two teams. In this article, I’ll describe the process behind the creation of Autowuzzler, which tools and frameworks I chose, and share a few implementation details and lessons I learned. Of course, the idea of using cars to play soccer is not unique, but two main ideas should set Autowuzzler apart: I wanted to reconstruct some of the look and feel of playing on a physical foosball table, and I wanted to make sure it is as easy as possible to invite friends or teammates to a quick casual game. The idea is simple: players steer virtual toy cars in a top-down arena that resembles a foosball table.

The same night I set out to build the first prototype for a game that would become Autowuzzler. What is fun is to kick a ball using toy cars - a realization made as I was playing with my 2-year old kid.

Unity web player games multiplayer how to#

I thought about how to play foosball in a remote setting, but it was clear that simply reconstructing the rules of foosball on a screen would not be a lot of fun. Learn how to share game state across multiple clients in real-time with Colyseus, do physics calculations with Matter.js, store data in Supabase.io and build the front-end with SvelteKit.Īs the pandemic lingered, the suddenly-remote team I work with became increasingly foosball-deprived. This article highlights the process, technical decisions and lessons learned behind building the real-time game Autowuzzler.