Make a multiplayer .io game in 1 day. Part 1 : Making a Simple Space Shooter
Tags: beginners, tutorial, gamedev
Published: 2023-06-19 19:35:03

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 {% embed https://gatdamn.io %} 🥳 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e213uaj209ljry3wvc5.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lub6jltovxn2vcel852a.png)
Right click on the sprites folder and Create-> Sprite . Call it sBackground.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss8bd7j85s1e4rsofvke.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kycly2rl485ertwguvxz.png)
Resizing
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcxi3v2waogbdcmt9687.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wefxwcqnrhn52swvrqp6.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkbo0o3mnbjl5elizbgz.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxz49wogl7zb5c1hc58w.png)



####Making the Player
Redo the sprite making process and create sPlayer from this image

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rg42rjuuekz3jn5dtfn.png)
Set the origin(Top Left) to middle centre.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eam7m0q24ciza8r1qosp.png)

Click on the Objects folder and right click, Create Object

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d86aqrvzmwxxa5m2k039.png)
Call it oPlayer and set the sprite to sPlayer

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kgemxllbq3rju5ffyx7.png)
Add this guy to the Room. Click on the Instances layer and drag oPlayer from the Objects folder

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sxvvbp6fekn243nxkv2.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6jeej2sn8rhu7xdcsaw.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7x52az701a8p3f7rrzr.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjzh4qf5177tfk4pu8uc.png)




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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/402rmyx4jugcszq9df3g.png)
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
```
Test your game by clicking on Run.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2jmf4bdc41c1ogl31n6.png)
It should be something like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2x9ed5ofsgetlwkxwn4.png)
###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)
{% embed https://www.youtube.com/watch?v=f0V-r9ipx70 %}