loading...
Cover image for Code a BRILLIANT multiplayer game ๐Ÿš€ in 2 MINUTES!

Code a BRILLIANT multiplayer game ๐Ÿš€ in 2 MINUTES!

lukegarrigan profile image Luke Garrigan Updated on ใƒป3 min read

Disclaimer: your definition of brilliant may vary

Where to start

The hardest part of coding up multiplayer games is the setup, it's just a sh*t tonne of boilerplate:

Setting up the server

  • Creating the player object
  • Setting up the socket
  • The tick rate
  • Players joining the game
  • Players leaving the game

Setting up the client

  • Creating the canvas
  • Connecting to server
  • Rendering the entire game

WAIT!!! ๐Ÿ›‘

Don't give up on this blog already. I've been a proper good lad and compiled a quick starter project for you so you can just completely ignore all of the stuff above.

What is P5 Multiplayer Game Starter?

Itโ€™s a very simple way to kick-start your multiplayer game development using express, socket.io and p5.js. It represents an opinionated approach to multiplayer game development which should allow you to skip the laborious beginning boiler-plate steps.

How to use this magical repository?

  1. git clone https://github.com/LukeGarrigan/p5-multiplayer-game-start.git
  2. npm install in the root directory
  3. npm start to get it running!

Details

The project is very simple, it sets up a client Player class and a server Player. Every 16ms the server emits the current state of the game to the client. If a new client joins the server a new Player will be added to the game and displayed on all clients, it also automatically removes players when they leave the game. These are the standard features I frequently have to reproduce when creating a new multiplayer game, so I hope you find this as useful as I do!

Each client will be a player of your game, they all communicate with the server. The server will control all the game state, such as the player position. The position of the player will be emitted to the all of the clients so that each client can render (using p5) the player in the game!
image of server to client architecture

A demo of your game so far!

A player joins the game by going to localhost:8080

Player joins
Your friend then joins!

Your friend joins
Your friend sees how bloody good you are at the game and quickly leaves..

Your friend sees how bloody good you are at the game and quickly leaves

So basically, in its simplest form the repository handles clients joining and leaving the game.

So there we go, what I recommend you do is having a play around with the repository, add some basic physics, get some interaction with the clients. This should give you the very basic building blocks of your next IO hit!

Finally

I hope this helps some of you and I would love to see the games you create with the starter project! Please share them in the comments ๐Ÿ˜

Follow me on twitter if you don't want to miss out on absolutely brilliant programming insight: ๐Ÿคฃ @luke_garrigan

Thank you, if you like my rambling check out my personal blogging site at https://codeheir.com/

This blog is sponsored by Code Canvases

Make your room come alive with the coolest programming/coding canvases on the market. codecanvases.com is the number 1 seller for programming prints with 100% exclusively designed canvases. Get them now whilst they're 20% off!!
[https://codecanvases.com/](https://codecanvases.com/)

Posted on by:

lukegarrigan profile

Luke Garrigan

@lukegarrigan

English lad currently a C#/Java/VueJs/JavaScript developer. Extra dribbling can be found at https://www.codeheir.com Portfolio found at https://lukegarrigan.com

Discussion

pic
Editor guide
 

Your friend sees how bloody good you are at the game and quickly leaves..

๐Ÿ˜‚๐Ÿ˜‚

Great post Luke! Building a multiplayer game with express and socket.io on the server-side is in my bucketlist, I'll definitely check out your repo.

 

Haha Iโ€™m glad you liked it. Itโ€™s just a really really fun thing to do, I can spend hours just hacking away at it and loving every minute!

 

Good post, just to let you know though repo address is wrong, went into your github and it should be

https://github.com/LukeGarrigan/p5-multiplayer-game-starter.git

post is missing a couple letters

 

Awesome! I'll give it a try at my Uni with some more CS nerds :P thanks Luke!

 

Awesome, Iโ€™d love to see what you come up with!