<footer><div id=version></div></footer>
html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 2px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
/* global colors, Phaser */

const config = {
  width: 800,
  height: 600,
  scene: { preload, create, update },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

const A = 0;
const B = 0.2;
const C = 1;

const ranges = [
  { from: A, to: B, duration: 1000 },
  { from: B, to: C, duration: 4000 },
  { from: C, to: A, duration: 5000 }
];

const followConfig = {
  yoyo: true,
  repeat: -1,
  positionOnPath: true,
  rotateToPath: true
};

const { red, white, yellow, aqua } = colors.hexColors;

function preload() {
  this.load.image("lemming", "assets/sprites/lemming.png");
}

function create() {
  curve = new Phaser.Curves.Spline([
    50,
    400,
    200,
    200,
    350,
    300,
    500,
    500,
    700,
    400
  ]);

  const graphics1 = this.add.graphics().lineStyle(1, white, 0.5);

  curve.draw(graphics1);

  graphics1
    .fillStyle(red, 0.5)
    .fillPointShape(curve.getPoint(A), 16)
    .fillPointShape(curve.getPoint(B), 16)
    .fillPointShape(curve.getPoint(C), 16);

  const graphics2 = this.add.graphics();

  const lemming = this.add.follower(curve, 50, 400, "lemming");

  const caption = this.add.text(60, 80, "👆 Click to change path segments");

  this.input.on("pointerdown", function () {
    const nextRange = ranges.shift();

    if (!nextRange) {
      caption.setVisible(false);

      return;
    }

    // Merge.
    Object.assign(nextRange, followConfig);

    console.log(nextRange);

    lemming.stopFollow().startFollow(nextRange);
    
    // Drawing:

    const points = [];

    let i = 0;
    let t = nextRange.from;
    const n = 32;
    const dt = (nextRange.to - nextRange.from) / n;

    while (i < n) {
      points.push(curve.getPoint(t));
      t += dt;
      i += 1;
    }

    points.push(curve.getPoint(nextRange.to));

    graphics2.clear().lineStyle(8, yellow, 0.5).strokePoints(points);
  });
}

function update() {}

document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;

new Phaser.Game(config);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.js
  2. https://cdn.jsdelivr.net/npm/@samme/colors@1.2.0