Jumping

Step 1 — Add a Physics Method for Jumping in Hero.ts

In the Hero class, add a function that will cause the character to jump on a keypress (similar to the left and right movement).

• This should utilize the Y axis with the object’s velocity.

// Hero.ts
export class Hero extends Phaser.Physics.Arcade.Sprite {
  //...

  jump() {
    this.setVelocityY(-330);
  }

  //...
}

• This uses the setVelocity() method to set the vertical velocity with Phaser’s physics engine.
• Most game mechanics invert the Y axis — so, a negative number will go up and a positive number will go down.
• The value 330 is the speed of the movement in pixels per second.

Use this method in the update() method in the same way as the other keystroke events.

• Add the condition for jumping before the left and right events — this will require you to refactor the if/else statements.
• In the condition, we need to signal two requirements that BOTH need to be true.
  • The up key is pressed AND the character is currently on the ground. This will keep the game from allowing a “double jump” by the character.
• Remember, the update() method is part of the game loop that will check the state during every frame of the game. Hence, checking if the up key has been pressed needs to be in the update() method so that it is constantly checking for this condition.

// Hero.ts
export class Hero extends Phaser.Physics.Arcade.Sprite {
  //...

  update() {
    if (this.keys.up.isDown && this.body.touching.down) {
      this.jump();
    } else if (this.keys.left.isDown) {
      this.runLeft();
    } else if (this.keys.right.isDown) {
      this.runRight();
    } else {
      this.halt();
    }
  }

  jump() {
    this.setVelocityY(-330);
  }

  //...
}

Step 2 — Load Assets for Jumping in Boot.ts

The preload method is used to load assets into the game’s cache prior to the game starting. Items we want available as the game runs get “preloaded” for use here.

We need to add an audio file to be used during the jump mechanism of the game.

• audio — takes two arguments:
  • Key — referencing the audio file (’sfx:jump’)
  • Path to the audio file — 'audio/jump.wav'

These will be placed alongside of the other items being preloaded for the composition of the game. Preloading is important because it makes sure these assets are ready to be used as soon as the game starts so that delays are less likely.

// Boot.ts
export class Boot extends Phaser.Scene {

// ...

preload() {
  //...
        
  this.load.spritesheet('hero', 'images/hero.png', {
    frameWidth: 36,
    frameHeight: 42,
  });
    
  this.load.audio('sfx:jump', 'audio/jump.wav');
}

Step 3 — Include the Jumping Assets in the jump() Method in Hero.ts

In the Hero.ts file, add a call to the audio that should play when a user “jumps” in the game.

// Hero.ts
jump() {
  this.setVelocityY(-330);
  this.scene.sound.play('sfx:jump');
}

• Make sure the ('sfx:jump') is exactly the same as what was set in Boot.ts.
• sound is part of the Phaser framework and is used to control audio playback. It calls the argument sfx:jump as a key on the object that has been loaded into the game’s cache in Boot.ts with the preload() method.
• This will cause the jump sound effect to play when the jump action is trigger by the user pressing the up cursor while the character is currently touching the ground.

Step 4 — Set the Bounce Factor of the Hero Character

In Level.ts — add a setting to the spawnHero() method that gives a “bounce” metric to stylize the hero’s jump.

• Bounce is set with a value between 0 and 1 that determines how much the object will bounce off of other objects.
  • A value of 0 means the object will not bounce at all.
  • A value of 1 means the object will bounce back with the full equivalent of its initial velocity.
• This is accomplished using the setBounce() method with takes an argument of the value between 0-1.

// Level.ts
export class Level {
  //...

  spawnHero(hero) {
    this.hero = new Hero(this.scene, hero.x, hero.y);
    this.groups.players.add(this.hero, true);

    this.hero.setBounce(0.3);
    this.hero.setCollideWorldBounds(true);
  }

  //...
}

Checkpoint

1. The hero should “jump” when the up cursor is pressed.
2. The hero should be constrained by objects (like the platforms)
3. The sound effect should emit when the hero jumps.
4. The hero should “bounce” when landing.
5. The hero should not be able to “double jump”.