Multi-player Online feature (part 5— updating a player’s movement and deployment)

Welcome to the last part of our mini series on Phaser MMO with WebSocket! Today’s topics will cover updating a player’s location when he/she moves, and deploying the project to Heroku, which is a free hosting service, so you’re not limited to testing on localhost.

Before we begin, you can download today’s starter code at my Github page. If you need a refresher on what we cover so far, the links to part 1 to 4 of the series are as followed:

Part 1 — Creating WebSocket connection.

Part 2 — On player connect.

Part 3 — Rendering other players.

Part 4 — Creating new connected player and deleting disconnected player.

Hopefully by now you have a solid understanding of how a client communicates to the server, and how a server broadcasts messages to any client. The server stores each player’s unique playerId, his/her most up-to-date location (we’ll implement this logic today), and his/her connection. The game handles the logic for creating and deleting sprites based on those data.

First let’s create two class variables to store which direction our player is currently facing. This is largely for aesthetic reason: when other players see our character sprite move, we want to play a walking animation and faces the direction he’s walking to, instead of moving while always facing down.

Adding lines 31 to 38 to our scene1.js

Now whenever we move our sprite in the update method, we also assign the correct facing direction, then send all these data to the server to be broadcasted to every other player.

After we added the currentFacing variable to our update movement methods

We are now ready to send the payload to the server whenever an arrow key is pressed:

From lines 84 to 91, we sent the updated location to the server

The vital data in this case is the new x and y coordinates for our player, we then repeat the code for the other 3 directional movements.

Moving to our server.js file, we will have the server store the player’s new location, and send it to everyone else.

In our server.js file, lines 64 yo 75 are the logic for receiving data from the client

This time around, our payLoad has one additional property which is the direction our player is facing.

For the current player that makes a movement, we want to store the updated location to its x and y properties. If we skip this step, whenever a new player connects, the current player’s sprite will be created at its initial random x and y position, and not the most up-to-date location.

All the logic for the server is done, now we just need to listen for movement events and implement an updateLocation method in our game to reflect change of movement for a particular player.

Lines 75 to 77, we created a custom method to handle the update movement

After our removePlayer method, we can now create the updateLocation method, which will make use of the direction our current player is facing, play that animation, and finally set its new position.

We use a simple switch statement to handle the directional logic

Save your files and run server.js. Let’s go to localhost: 5500 and open a few tabs to test our game.

Everything is working as intended, we really have come a long way! Let’s make some final changes:

We commented out lines 11 and 16, added line 10, and made changes to lines 14 and 17 for our server.js

For our scene1.js file, we added line 10 and made changes to line 11

If you run server.js, and go to localhost:5500, the game should still work and you should still be able to see other players’ connections and movements.

In our package.json file

We have some final housekeeping to do before we deploy. In our package.json file, we added in “engines” which is the version of node.js we are using and under “scripts”, we add in a starting property.

Let’s create a .gitignore file in our folder and put a single line of text node_modules inside. It means the node_modules folder won’t be tracked for Git. The final code can be downloaded here.

Now let’s head over to Heroku and create a free account. Make sure you have both Git and Heroku CLI installed on your machine, the installation process will be a little different depending on your operation system.

After you have Git and Heroku CLI installed, we can navigate to our main folder (basic-mmo-phaser-starter-part-5 in my case) using Terminal or Command Prompt, run the commands in order once you’re there:

git init, git add ., and git commit -m “Commit”

The next step is running heroku create, this command will create a Heroku remote that will host our app, the remote will be randomly named, you could rename it whatever you want, for our purposes we will keep it as is. Now run git push heroku main to push the code up.

If you go to your Heroku account page, you should see the app up. Clicking on the Open App button will launch it in a new tab.

You can try out a live demo at this link. I have extra features such as realtime chat, multiple scenes, enemies and NPC interaction that are not covered in the blog series. The codes can be downloaded here.

I had a lot of fun with this project and blog series, this blog concludes our series on Phaser and WebSocket, hopefully in the near future I get to explore more of this wonderful game library. Until next time.