Getting Started with Phaser 3 pt. III

Introduction

Last week we discussed the process of adding static assets to our game, so we now have the ability to render game sprites and other objects to the game that users can see. We also covered how to add audio files to create sound within our new game. This week we're going to look at the process of adding controls to the game as well as taking those controller inputs and adding movement to the game sprites. If you missed last weeks tutorial, check it out here, if not let's get started!

Adding Movement

Just to give a bit of context, here's what the current PlayScene.js file looks like.

export default class PlayScene extends Phaser.Scene {
  constructor() {
    super('PlayScene');
  }

  preload() {
    this.load.image('background', './assets/img/background.png');
    this.load.image('ship', './assets/img/spaceship.png');
    this.load.image('asteroid', './assets/img/asteroid.png');
  }

  create() {
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
    this.add.image(0, 400, 'background').setOrigin(0, 0).setScale(0.6);

    this.ship = this.physics.add.image(400, 300, 'ship').setScale(0.1);

    this.asteroid = this.physics.add.image(225, 550, 'asteroid').setScale(0.03);
    this.asteroid1 = this.physics.add.image(225, 250, 'asteroid').setScale(0.03);
    this.asteroid2 = this.physics.add.image(525, 250, 'asteroid').setScale(0.03);
 }
  update() {

  }
}

Now we'll look at the code that will enable us to move the ship around the screen and be able to control it with the arrow keys.

Add the following lines within the create function of the PlayScene.js file.

  this.ship.setDrag(0.99);
    this.ship.setMaxVelocity(150);
    this.ship.setCollideWorldBounds(true);

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

There you go! We've set up the ship to have drag as it moves in the scene as well as set the max speed or velocity to 150. We're setting the ship to collide with the boundaries of the game view as well. Finally we setup this..cursors to be the keyboard input and specifically the Cursor Keys.

Next we'll modify the update function to take that input and move the ship sprite across the scene. First thing is that the update function will now take in time and delta as parameters. Next we'll add the following lines of code into the update function.

if (this.cursors.up.isDown) {    
  this.physics.velocityFromRotation(this.ship.rotation, 150, 
  this.ship.body.acceleration);
} else {
  this.ship.setAcceleration(0);
}

if (this.cursors.left.isDown) {
  this.ship.setAngularVelocity(-300);
} else if (this.cursors.right.isDown) {
  this.ship.setAngularVelocity(300);
} else {
   this.ship.setAngularVelocity(0);
}

I'll break down each line of this code block so we can see exactly what is happening on each key press event.

First if the up cursor is down, we first take the velocity from rotation of this.ship.rotation, supply the max velocity as stated before, and then provide the current acceleration. This takes into account any rotational velocity, and current acceleration from the ship and creates a new acceleration vector for the ship whenever the up key is pressed. Next if the left arrow key is down, the ship will rotate to the left and if the right arrow key is down, it will rotate the ship to the right. After those lines have been added, you'll be able to control the ship whenever you use the arrow keys on the game page. It's as simple as that!

Conclusion

Adding the ability to move your sprite around the game scene with the directional keys of the keyboard is a pretty simple process. You can set the speed of the sprite to be whatever you like and thus make your game character be as fast or as slow as you'd like. I hope this has helped provide a bit of perspective on how sprite movement can be controlled with Phaser 3!