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.
- Making a simple space shooter in Gamemaker
- Make it shoot bullets
- Add rocket networking and start seeing other players
- 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
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.
Right click on the sprites folder and Create-> Sprite . Call it sBackground.
Import the image or any background image of your choice. My image is 1200x1200 pixels, but I want to resize it to 3000x3000
Resizing
Double click on Room1 in Rooms folder and Select the Background Layer on the Left. Then put sBackground where it says no sprite.
Double Click on Room1 again and set the room size to the same 3000x3000
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.
Making the Player
Redo the sprite making process and create sPlayer from this image
Set the origin(Top Left) to middle centre.
Click on the Objects folder and right click, Create Object
Call it oPlayer and set the sprite to sPlayer
Add this guy to the Room. Click on the Instances layer and drag oPlayer from the Objects folder
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.
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.
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.
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.
It should be something like this
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)
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.
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