<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, Tweakpane */

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

const followConfig = {
  from: 0,
  to: 1,
  startAt: 0,
  duration: 6000,
  yoyo: true,
  repeat: -1,
  positionOnPath: true,
  rotateToPath: true
};

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

let curve, graphics;

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
  ]);

  graphics = this.add.graphics();

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

  const pane = new Tweakpane.Pane();

  pane.addInput(followConfig, "from", { min: 0, max: 1, step: 0.01 });
  pane.addInput(followConfig, "to", { min: 0, max: 1, step: 0.01 });
  pane.addInput(followConfig, "startAt", { min: 0, max: 1, step: 0.01 });
  pane.addInput(followConfig, "duration", { min: 0, max: 6000, step: 100 });
  pane.addInput(followConfig, "repeat", { min: -1, max: 10, step: 1 });
  pane.addInput(followConfig, "positionOnPath");
  pane.addInput(followConfig, "rotateToPath");
  pane.addInput(followConfig, "yoyo");

  pane.addButton({ title: "Restart" }).on("click", () => {
    lemming.stopFollow().startFollow(followConfig);
  });
}

function update() {
  graphics.clear().lineStyle(1, white, 0.5);

  curve.draw(graphics);

  graphics
    .fillStyle(yellow, 0.5)
    .fillPointShape(curve.getPoint(followConfig.from), 16)
    .fillStyle(red, 0.5)
    .fillPointShape(curve.getPoint(followConfig.to), 16);
}

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
  3. https://cdn.jsdelivr.net/npm/tweakpane@3.0.5/dist/tweakpane.js
  4. https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@1.5.0/dist/phaser-plugin-inspector.umd.js