Your game won’t be much fun if you can’t move your ship around. If you remember, our ‘update’ function is called up to 60 times every second. Every time the ‘update’ function runs, we’re going to check whether the player is holding down certain keys, and then start or stop the ship from moving depending on what the player is doing.

Phaser comes with a complete Physics system which we can use to simulate realistic movement. Later on we will use it to help us figure out when things collide but for now, we will simply enable it and use it to allow us to move our player ship around. The nice thing about using the physics system for this is that the player ship will always move at the same speed, even if the user’s computer slows down and fails to call ‘update’ 60 times per second.

Task Definition

The task definition is as follows;

  1. Check for when the user is pressing the left arrow key using an if statement. You can check whether the left arrow key is being pressed by checking the property this.cursors.left.isDown.
  2. When the user is pressing the left or right key, you should use this.playerShip.setVelocityX(speed); to set the ship moving.
  3. If the user is pressing no keys, you should use the same function as above to set the velocity to zero so that it stops moving.

Walkthrough

For this task we will look at Phaser’s input system. We want to know when the user has pressed a certain key on their keyboard so that we can move the player’s ship around the screen in response. Let’s break this task down into smaller steps.

1. Track Player Input

We want to start keeping track of which arrow keys the user has pressed down. Phaser provides a ‘CursorKeys’ object to do this for you. In the template project, we already create a cursor keys object in your game scene by doing the following;

this.cursors = this.input.keyboard.createCursorKeys();

Later on in your code, you can then use this object to see if the user is pressing one of the arrow keys. The following code will print out text to the console whenever the player is holding down the right arrow key.

if (this.cursors.right.isDown) {
    console.log("RIGHT PRESSED");
}

Try it out! Once you’ve implemented the following code - check that you can see the messages in the Developer Console while you’re holding down the right arrow key. You should see a lot of messages if you hold it down, even just for a second!

2. Move the Player Ship

Now that you’re able to keep track of when the user is pressing down a cursor key, you just need one more piece of the puzzle to make the player ship move.

Just like sprites have an x,y position - they also have an ‘x,y’ velocity in the physics system. If a sprite has a positive X velocity, then it will move to the right (and with a positive Y position and it will move down the screen). You can set the velocity of the player ship at any point using the following function;

this.playerShip.setVelocityX(100);

Warning: If the user isn’t pressing any keys on the keyboard, you should reset the velocity to zero!

In pseudo-code, your solution might look something like the following;

if ( pressing-right ) {
    set-right-velocity
} else if ( pressing-left ) {
    set-left-velocity
} else {
    set-zero-velocity
}

Bonus. Confine the Ship to the Screen!

If you’ve completed this task early, then it would be a good idea to confine the player ship to the screen. Phaser provides a really handy mechanism for making sure that an object stays on the screen - even if it’s velocity should make it fly off the screen.

For that, you should use the following function call in your createPlayerShip() function;

this.playerShip.setCollideWorldBounds(true);

Experiments / Extensions

If you want to take your solution further, you should consider doing the following;

  • It’s also a good idea to use constants instead of ‘magic numbers’ in your code. Define the playerShipSpeed as a constant variable (const playerShipSpeed = X;) at the top of the file and use that to set the player’s velocity when moving.
  • You might also want to experiment with the player ship’s speed so that it feels fast enough to be fair but not too fast!
  • It could also be cool to allow the player ship to move up and down a bit too. You will probably want to ensure that the ship remains in the bottom half of the screen if you do this.
  • Try printing out the amount of time that has elapsed in the current game to the console using console.log(…) and this.game.loop.lastTime. Notice it will continue to increase every frame.

Standard Solution

This solution contains all of the code for the entire project up to this point.

update()
{
    if (this.cursors.left.isDown) {
        this.playerShip.setVelocityX(-100);
    }
    else if (this.cursors.right.isDown) {
        this.playerShip.setVelocityX(100);
    }
    else {
       this.playerShip.setVelocity(0);
    }
}

createPlayerShip()
{
    this.playerShip.setCollideWorldBounds(true);    
}