Learn

Until we can telepathically instruct characters in games, we need physical controls to direct our player characters on how to move.

One way we can implement controls is by using Phaser’s this.input.keyboard.createCursorKeys() method to create a useful object for keyboard inputs. The created object has properties up, down, left, right, space, and shift that are directly related to the keyboard keys. We can also access the .isDown property to the key to see if it is pressed. If the key is pressed, we can change the horizontal velocity of a GameObject by using the .setVelocityX() method. For instance:

function create() {
  // Previous code ...
  gameState.cursors = this.input.keyboard.createCursorKeys();
}

function update() {
  if (gameState.cursors.left.isDown) {
    heroSprite.setVelocityX(-160);
  } else if (gameState.cursors.right.isDown) {
    heroSprite.setVelocityX(160);
  } else {
    heroSprite.setVelocityX(0);
  }
}

In our create() function, we created the cursors object using this.input.keyboard.createCursorKeys(). Then, in update(), we added conditionals to check if the left arrow key is being pressed (cursors.left.isDown) or if the right arrow key is being pressed (cursors.right.isDown). If the left arrow key is pressed we set the horizontal velocity using setVelocityX() with an argument of -160 to move the sprite left. The opposite happens when the right arrow key is pressed, we call .setVelocityX(160) on heroSprite and it moves to the right. If neither keys are pressed, we set the velocity to zero and the sprite does not move.

Instructions

In the create() function, create the cursor keys and assign it to gameState.cursors.

We’ll be using the gameState.cursors properties to check when the left or right arrow keys are pressed.

Look at the create() function take note of gameState.player, it is our player sprite.

In the update() function, add an if statement to check if the left arrow key is pressed. Use cursors.left.isDown which returns true if the left arrow key is down and false if it’s not.

If the condition is true, then call gameState.player.setVelocityX(-160). This way we move the player sprite to the left when the left arrow key is pressed.

Add an else if statement that checks cursors.right.isDown. And if that condition is true, then call gameState.player.setVelocityX(160). Now our sprite will move to the right when the right arrow key is pressed.

Lastly, we need to add an else condition, and if neither key is pressed, call gameState.player.setVelocityX(0).

This way, Codey will not move when neither the left or right arrow key is down.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?