Phaser Coding Tips 8 "Sprite Motion Paths" Revisited

Examples
1

Another one of my “revisits” of the classic tutorial series by the great Richard Davey - this time Coding Tips 8 (available here).

The original Phaser 2 tutorial is about Interpolation methods to create motion paths and path followers. Phaser 3 provides much more powerful methods, including Phaser.Curves.Spline and Path objects, as well as dedicated path follower game object. However, these are all fundamentally based on the interpolation methods in the original tutorial so you might find it interesting to read through my exploration in this area in my blog here.

I then go onto explore Phaser.Curves.Spline and Path objects here and explore how I can dictate the velocity of sprites moving along these motion paths.

Finally I explore Phaser 3 path followers here and I go onto create my own version of the path follower, here, based on which I mimic the flight patterns of the classic Galaga game below (full transparency: the flight path data and some of the logic for the formation was derived from C++ programming tutorials Youtube channel of Ather Omar).

Question to my Senpai progammers:
In the following code (based on a code example by Samme), how can I change the scope of the main alien path follower object (currently kept as a global variable) to be within the scene, ie make alien → this.alien?

1 Like
2

There are a few ways, but you can pass callbackScope: this to the tween builder to preserve the scene context and cache game.loop beforehand.

var loop = this.game.loop;

this.alien.startFollow({
  // …
  callbackScope: this,
  onUpdate: function () {
    this.alien.body.velocity
      .copy(alien.pathDelta)
      .scale(1000 / loop.delta);
  }
});
3

It’s also possible to set the body velocity directly from the path tangent, though I think the error is greater than with the point-to-point method.

4

Got you. Thanks