How to start coding a .io game

Getting Setup

As anyone will tell you with any coding project that you start, you have to get your environment set up. I will list off the things you need to download first. You need a text editor for code: I prefer Visual Studio Code. You will need to download a tool called Git. You will need a tool called Node.js. This will also install an important tool that you will need called npm.

Now that you have all the tools you need, you should open up a command prompt. This can be done on Windows by searching your computer for "cmd". For other operating systems, simply look up this feature. Once you are in your command prompt, try the following:

mkdir project-1

Tip: you can't copy and past through CTRL-C, but you can copy by right clicking and clicking paste

This will create a directory called project-1. Now, you can go into this directory by typing:

cd project-1

Now you are in the directory to start your project! Next, you need to install the template that I have made for easily getting started in creating .io games.

io-template

I recently made a project called io-template, which is a nice template for starting development of .io games. It puts together a few frameworks and tools which make it really easy to start making games. To install it into your folder, do the following command:

git clone https://github.com/Loonride/io-template .

This simply retrieves the code from a website called GitHub and delivers it into your folder.

Installing

To get everything installed, run this command:

npm install

Running

Once installed, you can run the development environment by doing:

npm run dev

What this does exactly is that it compiles all of the source files, and packages them up in a server that you can go to. Do so by going to http://localhost:3000. You will see a sample game with a simple Phaser logo. Simply use arrow keys to move around, and open another browser with this address to prove that it is actually multiplayer.

The contents of this template are simple. There is a tool called Webpack which puts together all of the assets for the game. There is a tool called Phaser which is the main web game framework being used. Then, there is a server framework called Colyseus which makes it easy to handle the clients of your game.

Developing

You can take a look at the client files in the client folder and look at the server files in the server folder. In the next installment of this tutorial, I will explain to you what all of these files do! For now, I recommend taking a look at Phaser, and also looking at Colyseus. As a precursor, I will tell you that the following code listens to changes from the server regarding the position of all players, then updates it on the local browser data:

this.room.listen("players/:id/:attribute", function(change) {
    if (change.operation == "replace") {
        let path = change.path;
        if (path.attribute == "x" || path.attribute == "y") {
            self.players[path.id].sprite[path.attribute] = change.value;
        }
    }
});
    

Want to learn more? Join the Cavegame.io Discord to chat!