DEV Community

Abhishek
Abhishek

Posted on

Make a multiplayer .io game in 1 day. Part 1 : Making a Simple Space Shooter

Remember .io games? Slither.io, Agar.io, Diep.io.. They were pretty simple HTML5 Multiplayer Games that could get reallyy addictive. As a kid I always wanted to have my own .io game that everyone could play.

But it wasn't that simple... You had to learn to play with the H5 Canvas on the frontend and the backend (Node.js and Socket.io) was just wayy too much for me. Even if you could use a game engine for the client part, the server stuff was difficult.😢

Fast forward 6 years(I think) I learned Gamemaker💖, the best and easiest to learn Game Engine and Basics of Node.js, running a Socket.io server in the cloud🌧️ and I made

🥳 which is live to this day. Seriously, play it now! But that took 6 months of hard commitment.

The problem with building Multiplayer

Multiplayer games, or Networking is a new breed in game development. It's not as simple as taking an input -> doing some action.
Setting up a server. Then connecting to it from your game engine. Then sharing data with other clients. Then realizing that game engines are bad servers and you need a raw solution(like Node.js) if you want to make your game global and scalable. Then dealing with latency, authority and disconnections.
Even if you're a good game developer getting into Multiplayer can be intimidating the first time. Its too frickin' steep.

What you'll learn in this post

Let's make game development easy. You don't work with vanilla H5-JS-CSS when you have React. You don't learn H5 Canvas when you have game engines that process the graphics for you. You don't overthink about servers when you have Rocket Networking🚀 - A networking library that I developed that makes making multiplayer games too easy. We host your server, we take all the hard networking stuff out of the picture so you can focus on creating a fun game instead of worrying about networking.
We will have 4 parts.

  1. Making a simple space shooter in Gamemaker
  2. Make it shoot bullets
  3. Add rocket networking and start seeing other players
  4. Add bullets logic so you can take down other players

Making a simple space shooter in Gamemaker

Why Gamemaker? Because this game engine is the best for 2D. You can literally learn it in 1 day and start making cool games. You can make games for free and test them out on their platform GX games, but when you want to hook this up to your domain you'll have to purchase their subscription that allows a HTML5 Export.

Make a new project. Lets call it launch.io

Image description

Let's add the background I made. Its a pic of constellations. Lol looks white on Dev.to so download it. It has some cool art.

Image description
Right click on the sprites folder and Create-> Sprite . Call it sBackground.

Image description
Import the image or any background image of your choice. My image is 1200x1200 pixels, but I want to resize it to 3000x3000
Image description
Resizing
Image description

Double click on Room1 in Rooms folder and Select the Background Layer on the Left. Then put sBackground where it says no sprite.

Image description

Double Click on Room1 again and set the room size to the same 3000x3000

Image description
Now we need to create a small camera for the part of the map the player is on. Set up a viewport by putting these settings.

Image description

Making the Player

Redo the sprite making process and create sPlayer from this image

Image description
Set the origin(Top Left) to middle centre.

Image description

Click on the Objects folder and right click, Create Object

Image description
Call it oPlayer and set the sprite to sPlayer

Image description
Add this guy to the Room. Click on the Instances layer and drag oPlayer from the Objects folder

Image description
Go to Room1 -> the Viewport settings again and under Viewport 0, set the Object following to oPlayer. This way the player will never get out of sight.
Also set the Horisontal and Vertical borders to 300 instead of 32.
Image description

Also because the stars picture is transparent, we need a black bg behind it. Add one and set the colour to black in this layer.

Image description

Image description

Go back to oPlayer, by double clicking on it in the Objects folder.

Click on Add Event ->Step
The step event has code that runs every frame of your game.

Image description
Add this code. This makes the Jet follow your mouse pointer always



speed = 3
direction = point_direction(x,y,mouse_x,mouse_y)
image_angle = direction


Enter fullscreen mode Exit fullscreen mode

Test your game by clicking on Run.
Image description
It should be something like this

Image description

Thats it for today! In the next part we will add bullets and then Rocket Networking.

If you are an advanced gamemaker user, you can cut to the chase with this YT video that has some more extra code and is complete. (custom camera code and all)

Top comments (2)

Collapse
 
pvivo profile image
Peter Vivo

I think without Game Maker - which is I don't know very well - will be creating good multiplayer game in react or instead in nextjs. For 2D game I will advice the pixijs which is quite good 2D WebGL library.
You right the backend part is much more interesting question, if you don't use realtime multiplayer then nodejs can solve all server code, if you would like to make a real time multiplayer solution then a best way to use VPS and there is running your server code with socket.

Collapse
 
lilshake profile image
Abhishek

Yeah, I've tried pixijs and I liked it! For someone going from web dev to H5 game dev that's certainly a great option. Still, I'd highly recommend anyone getting into game development to start with Gamemaker. Their script is too similar to js and all you need to know are concepts of rooms and gameobjects and sprites. Imo the best and easiest 2D game engine.
Yeah, realtime multiplayer, latency issues and server-client authority can be hard and on top of that renting a VPS ... I tried to bring all this together in rocketnetworking.net so that any gamemaker user can make their game multiplayer easily. We use linode on the backend