Build

Multiplayer Gaming Basics Using Phaser – Player Movement

3 min read PubNub Staff on Jul 28, 2019
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Basic concepts and functions of building player movement for multiplayer games using Phaser and PubNub.

This is a detailed look at the concepts and code for player movement for multiplayer games, part of our comprehensive series on building a JavaScript multiplayer game.

Building a multiplayer game can be a daunting task for most developers since there are complicated design patterns that developers must follow to create a game that operates efficiently. With PubNub, building a multiplayer game is easy since PubNub handles all of the back-end infrastructure, one of the most challenging parts of building an efficient multiplayer game. PubNub guarantees message delivery in less than a quarter of a second and deals with all of the complicated back-end infrastructure. This way, you can focus on building your application with proper design patterns which increases game performance and saves money.

In this post, we’ll look at a basic function of building multiplayer games – player movement. We’ll use the open source Phaser API and the PubNub JavaScript SDK. We’ve got a deep dive multiplayer game tutorial here, but in this part, we’ll flesh out player movement concepts in greater detail.

In addition, we’ll look at how I’m limiting the quantity of messages sent by only publishing information to subscribers on input events. If we were to send messages every time the player’s x and y coordinates changed, your device would be sending a message almost every frame. Sending a publish message every frame would slow the performance of the application down and lead to huge costs.

Interpolation for Player Movement

Instead, we only send a publish message when the user presses down a key and send another publish message when the user releases a key. Then on both of the users’ screens, we use interpolation to estimate where the player is based on the input events we received. Here’s a good description of how interpolation works from the Unity 3D forums:

Interpolation is where we store the state of the last two updates and interpolate between them based on the current amount of time that has passed since the update before last. In this setup, each object must have an associated position and previous_position. In this case, our drawing will represent at worst one update tick behind the current game state, and at best, at the exact same state as the current update tick.

Input Events

Now let’s take a look at some code so we can understand how we are handling input events.

_handleInput() {
    handleKeyMessages();
    if (this.hero) { // Added this so we can control spawning of heros
      if (this.keys.left.isDown) {
        if (!keyStates.leftIsDown) {
          window.sendKeyMessage({ left: 'down' });
        }
        keyStates.leftIsDown = true;
      } else {
        if (keyStates.leftIsDown) {
          window.sendKeyMessage({ left: 'up' });
        }
        keyStates.leftIsDown = false;
      }
      if (this.keys.right.isDown) {
        if (!keyStates.rightIsDown) {
          window.sendKeyMessage({ right: 'down' });
        }
        keyStates.rightIsDown = true;
      } else {
        if (keyStates.rightIsDown) {
          window.sendKeyMessage({ right: 'up' });
        }
        keyStates.rightIsDown = false;
      }
      ...

The code above is a snippet from the _handleInput() function which runs every frame to check if any inputs from the keyboard have occurred.

In the first part of this function (this.keys.left.isDown), we check to see if the left arrow key has been pressed down with the function call window.sendKeyMessage({ left: 'down' });. When the left arrow key has been pressed down, we send a publish message (see below), saying the left key has been pressed down. When the key is released, it sends another message saying the left arrow has has been release (or “up”).

window.sendKeyMessage = (keyMessage) => {
  try {
    if (window.globalMyHero) {
      window.pubnub.publish({
        message: {
          uuid: window.UniqueID,
          keyMessage,
          position: window.globalMyHero.body.position,
          frameCounter: window.frameCounter
        },
        channel: window.currentChannelName,
        sendByPost: false, // true to send via posts
      });
    }
  } catch (err) {
    console.log(err);
  }
};

The above function sends a PubNub Publish with the players UUID (used to determine which player is sending the message), the keyMessage which tells the all clients connected to the channel what key the client pressed, the position of the player, and the frameCounter which is used for interpolation (discussed above).

PubNub-Input-Events-Multiplayer-Gaming

That’s it! Stay tuned for future posts on multiplayer gaming concepts. If you have any additional questions about input events, check out our full tutorial here  You can also reach me at via email with further questions!

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff