Phaser Platformer Series: 8 Baddies

posted on 26 April 2021

We have our hero, they’ve got coins to collect, but there is no jeopardy. What we need, is a baddie.

Here’s what we’ll end up with:

See the Pen
Phaser Platformer: 8 Baddies by Digitherium (@digitherium)
on CodePen.

If you are viewing on a mobile, you can open a version of it here without all the codepen chrome taking up screen space so you play it in landscape mode.

We start by loading in the baddie sprite to our preload function:

this.load.image('baddie', 'assets/baddie.jpg');

Next, we declare a baddie variable in our list of vars at the top of the file and then add the sprite to the scene just like our player. We position the baddie, make sure the rotation axis is in the middle of the sprite and that the baddie is set to collide within the world bounds so they can’t walk off the screen.

baddie = this.physics.add.sprite(620, 350, 'baddie');
baddie.setOrigin(.5, .5);
baddie.setCollideWorldBounds(true);

Then we make sure the baddie collides with the ground and platforms:

this.physics.add.collider(baddie, platforms);

Then we setup collision detection for our hero and the baddie. This time we are using overlap instead of collider:

this.physics.add.overlap(player, baddie, hitBaddie, null, this);

The difference here is that the collider will apply physics and try to separate the two objects. So if a player and baddie collided, they would each be pushed away from each other. With overlap we detect that they are touching, but it lets them touch and no physics are applied. We use collider with the hero and the platforms because we do want physics, and overlap with the hero and baddie because we are going to program our own little animations and reactions instead of relying on the physics.

In the event of our player and baddie touching then we call this function:

function hitBaddie(player, baddie) {
    //if the collision is on the baddies head
    if (baddie.body.touching.up) {
        // set baddie as being hit and remove physics
        baddie.disableBody(false, false);
        //make player jump up in the air a little bit
        player.setVelocityY(jumpVelocity);

        //animate baddie, fading out and getting bigger
        var tween = this.tweens.add({
            targets: baddie,
            alpha: 0.3,
            scaleX: 1.5,
            scaleY: 1.5,
            ease: 'Linear',
            duration: 200,
            onComplete: function() {
                //remove the game object
                destroyGameObject(baddie);
            },
        });
    }
    //otherwise you've hit baddie, but not on the head. This makes you die
    else {
        //set player to dead
        player.disableBody(false, false);

        //animate players death scene
        var tween = this.tweens.add({
            targets: player,
            alpha: 0.3,
            scaleX: 1.1,
            scaleY: 1.1,
            angle: 90,
            x: player.x - 20,
            y: player.y - 20,
            ease: 'Linear',
            duration: 200,
            onComplete: function() {
                restartGame(this);
            },
            onCompleteScope: this
        });
    }
}

We check where the collision took place. If the baddie has their touching up flag set (baddie.body.touching.up) it means something is sitting on their head. i.e. Our hero has just jumped on them. In that case, we call disableBody to remove any physics from the baddie and then play the baddies death animation. When the animation ends we call destroyGameObject and pass it in the baddie, which removes the baddie game object from our game.

If the player has collided with anything other than the top of the baddie then the player dies, we play the player’s death animation and then restart the game. These death animations add a little bit of juiciness to our game – they are straightforward for now, but it’s definitely adding a bit of fun. This would be a good place to add your own embelishments.

Next up, we’ll make the baddie move.

chromeless mobile version
view all the code on codepen
download the source on github.