Fake path follower with tween chain

Examples
1

This technique moves a game object along several segments on a path using a tween chain in Phaser v3.60 and later. (It supersedes path follower using a tween timeline in Phaser v3.55.)

const curve = new Phaser.Curves.Spline(points);
const curveLength = curve.getLength();
const waypoints = [0, 0.5, 0.2, 1, 0.75, 0];

this.tweens.chain({
  loop: -1,
  tweens: waypoints.slice(0, -1).map((waypoint, i) => {
    const nextWaypoint = waypoints[i + 1];
    const normalDistance = Math.abs(waypoint - nextWaypoint);
    const distance = curveLength * normalDistance;
    const speed = 1;

    return {
      targets: { value: waypoint },
      value: { from: waypoint, to: nextWaypoint },
      duration: distance / speed,
      completeDelay: 500,
      onUpdate: (tween, target, key, current) => {
        sprite.copyPosition(curve.getPoint(current));
      }
    };
  }),
});
4 Likes