Ch005 - Adding Movement

Adding Movement

We are going to jump right into making our game move. You will need to have followed chapter on Building a World and have that code ready to follow these stages. If not, see here for the relevant code (you can click on the Fish image and then Remix on Glitch to pick up from here) https://jamm-labs.github.io/ggcp/building-a-world-chapter/game.js

Moving our player around the screen

Now we have a player appear, fall to the bottom of the screen and they should now be standing at the bottom of the game area.

Before we start adding platforms or other characters, let’s get our player to move around the screen using the cursor keys on the keyboard. To move our player we need to start to work with what we call player input, this is how the player of the game interacts with what is happening, in this case we want the person playing the game player to be able to control our game player character using the arrow keys on the keyboard.

Let’s start with moving left and right. Let’s add the following code to our update function.

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) === true){
      player.body.velocity.x = -200;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) === true) {
      player.body.velocity.x = 200;
    }

This seems to work up to a point. Changing the velocity.x property to 200 or -200 when the left or right key is pressed does create movement. However the player just keeps moving even if we are not pressing down a key. To avoid this happening we can add one more condition to our update function.

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) === true){
        player.body.velocity.x = -200;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) === true){
        player.body.velocity.x = 200;
    }
    else {
        player.body.velocity.x = 0;
    }

This resets the velocity to zero and so stops any left right movement. Putting this at the start of the update area means that if no key is being pressed, then this is the default behaviour. To make our player jump we can add another couple of lines of code.

    if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
      player.body.velocity.y = -200;
    }

Now our player can go left and right and jump. This is starting to look like a real game. You may notice that we can jump even though we are not touching the ground. We will solve this issue later.

Make it easy to control our speed

The velocity variables control how quickly the player moves. When we create our game we think it is a good idea to put variables that easily change the way our game works right at the top so it is easy to change them. We did this with gravity last time. Lets change our code around to do this. This process of improving code that does work but could be better is called refactoring.

In the code above our velocity.x and velocity.y is set in the body of the code. Let’s create variables called velocity_x and velocity_y right at the start of our code in our global game variables area.

var velocity_x = 200;
var velocity_y = 300;

Now we can swap out the direct mentions of those numbers from the code in update change the lines as follows. For the x (left and right) value do;

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) === true) {
        player.body.velocity.x = -velocity_x;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) === true){
        player.body.velocity.x = velocity_x;
    }

For the y (up and down) value

    if (game.input.keyboard.isDown(Phaser.Keyboard.UP) === true) {
        player.body.velocity.y = -velocity_y;
    }

Checking our Code

You can check what you have in your code with the the completed code for this chapter here - https://jamm-labs.github.io/ggcp/adding-movement-chapter/game.js

Understanding if statements / Conditionals:

One of the key elements of games are Rules. If this happens then do that. Let’s have a look at first bit the code used to control our player.

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) === true) {
        player.body.velocity.x = -velocity_x;
    } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) === true) {
        player.body.velocity.x = velocity_x;
    }

Statements here start with if, else if or else. These are also called conditional statements. The format of the first part of a conditional (also called if - else) statement can be expressed conversationally as “if this condition is true, then do this action”. This can be represented in code pattern as

if (condition) {
    action
}

You can see that our code is testing for three statements. This format allows us to programme a series of possible outcomes into our game. The format here is like a list of options which the programme runs. It is important to note that only one of the if, else if, else can run at any one time. You should also know that there can be as many of the else if options as you want.

There is more to explain how the (condition) part of this process works in the next chapter. If you want to follow this up to learn more about this aspect of coding then you can use some of the many online resources that teach javascript. For example, there is more on conditionals here - https://www.w3schools.com/js/js_if_else.asp

Ch004 - Building a World Ch006 - Adding a Reward