<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);
This Pen doesn't use any external CSS resources.