Multi-player Online feature (part 1— creating Websocket connection)
In this part 1 of our mini-series, I want to make a multi-player feature into our Phaser game. It will be a simple implementation for more than one user to join the game, and be able to see other connected player’s movement. Obviously there’s no interaction logic between our players, the only thing they could do is control the movement of his/her own character, and can see the movement of the other players in real time.
There’re a few parts to this challenging task. So let’s break it down further:
- When a new player joins a game (creates a connection to the server), we want a new character sprite to appear onto other current players’ screens.
- Whenever a player moves his/her character, the movement is reflected onto other players’ screens.
- When a player leaves a game (connection closes, in this case, his/her browser window/tab closes, because we don’t have to log out of exit functionality yet), we want his/her sprite to disappear from the other players’ screens.
Let’s break the problems down further into its own and take a look at exactly what we want to accomplish and the steps.
There’re a lot of things happen at any given time, so I will reiterate the above steps later on. We will start by importing the Websocket and Express modules into our folder. Let’s set up our main folder and create a bare bone Phaser game first:
2. From Phaser’s official website, download the Phaser library, put the .js file inside our js folder. In our js folder, create a game.js and a scene1.js file.
3. Let’s load in a background image and a character sprite. Any image or sprite will do for now. And put them onto the screen in our preload and create methods.
Since our background image is smaller than the game width and height we specified in the config object, we have some extra black screens. We will fix the issue in the future and focus on setting up in this blog.
4. Download and install a LTS (longterm support) version of Node.js for your system. After installation, from your Command Prompt or Terminal, run node -v to check Node was successfully installed and the version number. And navigate to the basic-mmo-phaser folder.
5. Inside the folder, run npm init and press enter for all the prompts. You should see a package.json file if you’ve done this step correctly.
7. We will create a websocket connection in our Scene1’s create method, like so:
this.ws = new WebSocket(“ws://localhost:9090”)
This line creates a new Websocket variable, this.ws specifies the name of the variable, and will be a class variable with the this keyword. Localhost:9090 is just a random port, it does not have to be 9090, could be port 3000, 5000, or any port you want.
8. Let’s create our basic server and test it out. In the main folder, make a new server.js file. Notice the server is not part of the Phaser game, so there’s no need to import it in our index.html file.
In our server.js file, we start by loading in the required modules, we will also run our Phaser game in port 5500 using an Express server we just made. It’s not a must that we create a server and run it with a specific port, but since our Phaser game needs to be ran anyway within a server, this way when we execute our server.js file, we can just open a browser windown and go to localhost:5500 to test the game. The actual Websocket server is created on lines 15 and 16, and will be in port 9090.
A websocket connection generally have a few methods, such as open, close, send messages to the server. A websocket server can detect connections opening, closing, receive messages from a client, and broadcast messages to clients.
9. Back in our server.js file, we will listen for a client connection closes, and console.log a message.
The reason we cannot do a connection.on(“open”) event is because when we start our Phaser game, the connection would have been established already. But in our next blog, we will discuss more ways to communicate with our server depending on different events in the game.
10. Finally, if we run our server.js file and go to localhost:9090, you will see a blank page.
If you go to localhost:5050 (where our game is served), we will see the game screen as normal. Now open a few more tabs with localhost:5050, when you close a tab, you should see a console log msg saying “A connection has closed”.
That’s the basic idea and a bi-directional connection. In our next blog, we will add some more game logic as well as send messages to the server and receive messages.
The link to the Github repo is here, if you fork or clone the folder, make sure to you already have Node installed in your machine, then run npm install in the basic-mmo-phaser-starter folder to install the dependencies in the package.json file. Then run server.js to start both the server and the game.