Creating A Simple Multiplayer Game In Phaser 3 With An Authoritative Server – Part 3

In Part 1 of this tutorial, we created our Node.js server, set up a basic Phaser game, and set up our server to run Phaser in headless mode, and in Part 2 we started adding in the logic for adding and removing players to our game.

In this tutorial, we are going to add the client side logic for displaying other players in our game, add the logic for handling player input, and add logic for the collectibles players will pick up.

Let’s get started!

Course Files and Versions

If you didn’t complete Part 2 and would like to continue from there (having completed Part 1), you can find the code for it here.

You can download all of the files associated with the source code for Part 3 here.

At the time this tutorial was written, the following versions were used. You may need to use these versions to have the same results from this tutorial.

• Node.js: 10.13.0
• JSDOM: 13.0.0
• Express: 4.16.4
• Socket.IO: 2.1.1
• Datauri: 1.1.0

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

Showing other players

In our last tutorial, we wrapped up by adding the logic for displaying the player in our game and now we will work on displaying other players in our game. In part two of this tutorial, we set up Socket.IO to emit a newPlayer and a disconnect event. We will use these two events, and our current logic for the currentPlayers event to add and remove other players from our game. To do this, open up server/public/js/game.js and update the create function to match the following:

function create() {
  var self = this;
  this.socket = io();
  this.players = this.physics.add.group();

  this.socket.on('currentPlayers', function (players) {
    Object.keys(players).forEach(function (id) {
      if (players[id].playerId === self.socket.id) {
        displayPlayers(self, players[id], 'ship');
      } else {
        displayPlayers(self, players[id], 'otherPlayer');
      }
    });
  });

  this.socket.on('newPlayer', function (playerInfo) {
    displayPlayers(self, playerInfo, 'otherPlayer');
  });

  this.socket.on('disconnect', function (playerId) {
    self.players.getChildren().forEach(function (player) {
      if (playerId === player.playerId) {
        player.destroy();
      }
    });
  });
}

Let’s review the code we just added:

Before we can test our new logic for adding other players to our game, we need to load an asset for these players. You can find that asset here.

This image will need to be placed in the public/assets folder. Once the image is there, we can load this image into our game. In the preload function, add the following line:

this.load.image('otherPlayer', 'assets/enemyBlack5.png');

Now, if you refresh your game in the browser, you should still see your player’s ship. If you open another tab or browser and navigate to your game, you should see multiple sprites appear in the game window, and if you close one of those games you should see that sprite disappear from the other games.

Handling player input

With the logic for displaying all of the players in the game in place, we will move on to handling player input and allow our player to move. We will handle player input by using Phaser’s built-in keyboard manager and instead of moving the player directly on the client side, we will use Socket.IO to send the player’s input to the server. To do this, add the following code at the bottom of the create function in public/js/game.js:

this.cursors = this.input.keyboard.createCursorKeys();
this.leftKeyPressed = false;
this.rightKeyPressed = false;
this.upKeyPressed = false;

This will populate the cursors object with our four main Key objects (up, down, left, and right), which will bind to those arrows on the keyboard. Then, we just need to see if these keys are being held down in the update function. We also created three new variables for keeping track of which keys are currently being pressed, which will be used in the update function.

Since we will be using Socket.IO to send the player’s input to the server, we could just send a message to the server any time one of these keys are being held down. However, this would result in a large number of calls to the server that are not needed. The reason for this is because we only need to be aware of when a player first presses a key down and when they let go of the key. To keep track of this, we will use the three variables we created above to store the state of which keys are being pressed, and when the state changes we will then send a message to the server.

Now, add the following code to the update function in public/js/game.js:

const left = this.leftKeyPressed;
const right = this.rightKeyPressed;
const up = this.upKeyPressed;

if (this.cursors.left.isDown) {
  this.leftKeyPressed = true;
} else if (this.cursors.right.isDown) {
  this.rightKeyPressed = true;
} else {
  this.leftKeyPressed = false;
  this.rightKeyPressed = false;
}

if (this.cursors.up.isDown) {
  this.upKeyPressed = true;
} else {
  this.upKeyPressed = false;
}

if (left !== this.leftKeyPressed || right !== this.rightKeyPressed || up !== this.upKeyPressed) {
  this.socket.emit('playerInput', { left: this.leftKeyPressed , right: this.rightKeyPressed, up: this.upKeyPressed });
}

Let’s review the code we just added:

Next, we will need to update the logic on our server to handle the new playerInput message. To do this, open authoritative_server/js/game.js and add the following code below the socket.on('disconnect', function () { code:

// when a player moves, update the player data
socket.on('playerInput', function (inputData) {
  handlePlayerInput(self, socket.id, inputData);
});

Next, add the following code below the update function:

function handlePlayerInput(self, playerId, input) {
  self.players.getChildren().forEach((player) => {
    if (playerId === player.playerId) {
      players[player.playerId].input = input;
    }
  });
}

In the code above, we did the following:

Next, since we are storing the player’s input in a new property in the players object we will add default values to this object when we first create it. In the io.on('connection') callback function, add the following code to the players[socket.id] object:

input: {
  left: false,
  right: false,
  up: false
}

This object should look like this now:

// create a new player and add it to our players object
players[socket.id] = {
  rotation: 0,
  x: Math.floor(Math.random() * 700) + 50,
  y: Math.floor(Math.random() * 500) + 50,
  playerId: socket.id,
  team: (Math.floor(Math.random() * 2) == 0) ? 'red' : 'blue',
  input: {
    left: false,
    right: false,
    up: false
  }
};

With that done, we can now add the logic to the update function that will be responsible for moving each player’s game object.

Add the following code to the update function:

this.players.getChildren().forEach((player) => {
  const input = players[player.playerId].input;
  if (input.left) {
    player.setAngularVelocity(-300);
  } else if (input.right) {
    player.setAngularVelocity(300);
  } else {
    player.setAngularVelocity(0);
  }

  if (input.up) {
    this.physics.velocityFromRotation(player.rotation + 1.5, 200, player.body.acceleration);
  } else {
    player.setAcceleration(0);
  }

  players[player.playerId].x = player.x;
  players[player.playerId].y = player.y;
  players[player.playerId].rotation = player.rotation;
});
this.physics.world.wrap(this.players, 5);
io.emit('playerUpdates', players);

Let’s review the code we just added:

Now that we have the code in place for handling player’s input on our server the last thing we need to do is update the client side to handle the new playerUpdates message. When the client side receives this message, we will use that data to update each players game object’s position and rotation.

To do this, open public/js/game.js and add the following code above the this.cursors = this.input.keyboard.createCursorKeys(); line in the create function:

this.socket.on('playerUpdates', function (players) {
  Object.keys(players).forEach(function (id) {
    self.players.getChildren().forEach(function (player) {
      if (players[id].playerId === player.playerId) {
        player.setRotation(players[id].rotation);
        player.setPosition(players[id].x, players[id].y);
      }
    });
  });
});

In the code above we did the following:

If you save, restart your server, and refresh your game, you should now be able to move your ship around the screen.

Collecting stars

With our game now handling player’s input, we need to give the players a goal. For this tutorial, we are going to add a star collectible to the game for the players to collect, and when they do, their team will get ten points. To do this, we will need to create a few new game objects and a few new Socket.IO events. First, will focus on the star game object.

The asset for this collectible can be downloaded here. Place a copy of star_gold.png in both the public/assets and authoritative_server/assets folders.

Now, add the following code to the preload function in authoritative_server/js/game.js:

this.load.image('star', 'assets/star_gold.png');

Then, in the create function add the following code below:

this.scores = {
  blue: 0,
  red: 0
};

this.star = this.physics.add.image(randomPosition(700), randomPosition(500), 'star');
this.physics.add.collider(this.players);

this.physics.add.overlap(this.players, this.star, function (star, player) {
  if (players[player.playerId].team === 'red') {
    self.scores.red += 10;
  } else {
    self.scores.blue += 10;
  }
  self.star.setPosition(randomPosition(700), randomPosition(500));
  io.emit('updateScore', self.scores);
  io.emit('starLocation', { x: self.star.x, y: self.star.y });
});

In the code above we did the following:

Next, in the io.on('connection') callback function add the following code below the socket.broadcast.emit('newPlayer', players[socket.id]); line:

// send the star object to the new player
socket.emit('starLocation', { x: self.star.x, y: self.star.y });
// send the current scores
socket.emit('updateScore', self.scores);

Finally, add the following code below the update function:

function randomPosition(max) {
  return Math.floor(Math.random() * max) + 50;
}

In the code above we:

With the code changes for the server in place, we will switch to the client side. The first thing we will do is load the star asset in the client side code. In public/js/game.js add the following line at the bottom of the preload function:

this.load.image('star', 'assets/star_gold.png');

Next, we will need a way of letting the players know what the current score is. We can do this by using Phaser’s text game objects. In the create function add the following code below the this.players = this.add.group(); line:

this.blueScoreText = this.add.text(16, 16, '', { fontSize: '32px', fill: '#0000FF' });
this.redScoreText = this.add.text(584, 16, '', { fontSize: '32px', fill: '#FF0000' });

In the code above, we created two new text game objects by calling this.add.text(). When we created these two objects, we passed the location of where the object would be placed, the default text of the object, and the font size and fill that would be used for the text object.

Finally,  we just need to add the logic for the two new Socket.IO events we created. In the create function add the following code above the this.cursors = this.input.keyboard.createCursorKeys(); line:

this.socket.on('updateScore', function (scores) {
  self.blueScoreText.setText('Blue: ' + scores.blue);
  self.redScoreText.setText('Red: ' + scores.red);
});

this.socket.on('starLocation', function (starLocation) {
  if (!self.star) {
    self.star = self.add.image(starLocation.x, starLocation.y, 'star');
  } else {
    self.star.setPosition(starLocation.x, starLocation.y);
  }
});

Let’s review the code we just added:

If you save your code changes, restart the server, and refresh your browser you should see the new star collectible and the team scores.

If you move your ship over the star collectible, you should see the star move to a new location and you should see the team score update. Also, if you open a new tab in your browser, you should be able to run your ship into the other player’s ship and see them collide.

Conclusion

With the star collectible added to the game, that brings this tutorial to a close. In summary, it showed you how to create a simple multiplayer game with an authoritative server in Phaser – mainly using Socket.IO and Node.js.

I hope you enjoyed all of these tutorials and found them helpful. If you have any questions, or suggestions on what we should cover next, please let us know in the comments below.

Related Posts