Phaser Platformer Series: 9 Moving Baddies

posted on 3 May 2021

Let’s make our baddie a moving target to make the game a bit more challenging.

Here’s what we’ll be making:

See the Pen
Phaser Platformer: 9 Moving 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.

Initially, I thought about just tweening the baddie, but that stopped our baddie from obeying the laws of physics! For instance, I could have put the baddie on one of the higher platforms and if they tweened off the edge instead of walked, they would just float in the air and keep going. Instead using physics is the way to go.

What we’re going to do is give our baddie velocity in a certain direction. We do this by changing attributes on the baddies body (that’s the physics bit). This will make them move sideways. Then we tell them to turn around once they have reached a certain distance and move back the other way by setting the velocity in the opposite direction. We do that on a loop and the baddie has a nice area they patrol going back and forth.

Firstly we’ll add some code to our create function where the baddie is created. We give the baddie’s body a negative x velocity. The negative value is going to make the baddie move left. Changing this to a higher number would make the baddie move faster. We also set a max distance, and store the original position of the baddie so we know where to send them back to. As our baddie is an object, we can just create new properties on the baddie itself which is nice and neat.

baddie.body.velocity.x = -100;
baddie.maxDistance = 300;
baddie.previousX = baddie.x;

We’ve set the max distance to 300, which is just something I’ve picked because it fits well with the size of the level. In our update function we add this code:

//if our baddies has walked as far as we've set the maxDistance, then get them to turn around
if (Math.abs(baddie.x - baddie.previousX) >= baddie.maxDistance) {
    switchDirection(baddie);
}

This takes the baddies current position and takes away their starting position, giving us the distance traveled. If it’s greater than or equal to the 300 we set and stored in baddie.maxDistance, then this new function switchDirection is called, passing the baddie as a parameter.

Finally we need that switchDirection function code. We’re putting this at the end of our code for neatness, but this function could go anywhere in this page – the order isn’t important.

function switchDirection(baddie) {
  //reverse velocity so baddie moves are same speed but in opposite direction
  baddie.body.velocity.x *= -1;
  //reset count
  baddie.previousX = baddie.x;
}

In this function, we flipped the velocity by timesing by -1. This will make the velocity -100 i.e. the same speed in the opposite direction. We also set a new previousX as our checkpoint to see how far our baddie has traveled. This will allow them to travel 300 in the opposite direction before they turn around and it happens all over again on a loop.

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