Multi-player Online feature (part 3— rendering other players’ sprites)
In the previous blog, we requested from the server a random player ID and a random location on the map, then we used a custom method to generate a player sprite based on those information whenever a new connection is made. In today’s blog we will get into the meat and butter of our MMO feature: creating other players’ sprites.
Before we get started, you can download the starter code for today here. Make sure Node is installed on your machine. Run npm install from root directory of the starter code to install the 2 dependencies, which are Express.js and WebSocket. Before we get into coding, let’s first get a bigger picture of what we want to do and the steps.
From the flowchart above, we can see what steps need to happen when a player connects to the server: first, the server needs to get the existing players’ information then send to the new player, so the game can create a sprite. Let’s review what we have so far.
In our server.js file, we have a players array (line 22) which contains all players’ playerId, the initially generated x and y position, and his/her unique connection. So it’s as easy as looping through the array, for each player that’s NOT the newly connected player, send those data to the new player, and have the game call a custom method to create a sprite for each of those information we receive. Let’s see how we can achieve our goal.
- After line 42, where we created our player, let’s send a message to the server by first creating a payload like so: const payLoad = { “method”: “currentPlayers” }; Then sending it to the server with: this.ws.send(JSON.stringify(payLoad)}
- Just as our WebSocket client (the game) can send and receive messages, our server can also do the same. In our server.js file, we set up a function to listen for incoming messages from clients, parse the message and store it into a variable named result (line 36), then we check the method property of the result variable on line 38. Remember from step 1, all we sent to the server was an object with a method property of “currentPlayers”. When the server receives a message, it’s up to the server what logic to implement and what (if any) information to broadcast back.
3. On line 39, we go through the players array, gather each player’s playerId, x, y position, then send it to the new player (line 47). The server will repeat this process for all the players with a playerId that’s not the same as the new player. If the players array has more than 1 player data, the server will send all those data back to the new player.
4. Back in our game, we have our WebSocket client receive the message from our server (line 48), parse the message.data and store it in a variable named response (line 49), check the method property (in this case, the server sent back “method”: “currentPlayers” along with other important information (line 51), after we destructure the playerId, x, and y from the response object, we can create a custom method to generate a sprite based on those information (line 55).
5. The final step is to implement the addOtherPlayers(). After the createPlayer(), we will add a sprite at the x, y coordinate where x and y are the data from the server. Also set its playerId to the playerId we received.
If you run server.js, open a few tabs, then go to localhost:5500 on each of them, you should see something like this:
On each game screen, the player with the regular colored sprite is the main player, all other players are the ones with the darkened colors. Top left screen is the first connection I opened, top right is the second connection (2 sprites), bottom left is the third, and bottom right is the fourth connection.
The final housekeeping we need to do is to create a group in our scene1.js file, and add each other player to it, Phaser makes it easy to loop through all the children in a group with its getChildren(). This will come in handy later when we update the movement for a player.
If you noticed whenever a new player joins, he/she will see all other existing players, but not vice versa (the old players don’t see the new player’s sprite being created). Try to implement this challenge on your own, some helpful hints are: after the server sends the randomly generated playerId, x and y to the new player, send this data to every other existing players in the players array; The payload you send back should contain a new property, something along the line of “method”: “newPlayer”; In the scene1.js file, have the WebSocket client receive the message, check the method, then create a sprite; You shouldn’t need to create another custom function to generate the sprite, one of the existing functions already accomplish this task.
You can download the code for today’s progress at my Github account. See you next time!
