Wave Path Follower
Demonstrates creating a sinusoidal wave path using alternating elliptical curves and animating multiple sprites along it with staggered start delays.
800 × 600
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('eyes', 'assets/sprites/eyes.png');
this.load.image('orb', 'assets/particles/green-orb.png');
}
create ()
{
const graphics = this.add.graphics();
const path = new Phaser.Curves.Path(0, 300);
for (let i = 0; i < 8; i++)
{
// xRadius, yRadius, startAngle, endAngle, clockwise, rotation
if (i % 2 === 0)
{
path.ellipseTo(50, 80, 180, 360, true, 0);
}
else
{
path.ellipseTo(50, 80, 180, 360, false, 0);
}
}
graphics.lineStyle(1, 0xffffff, 1);
path.draw(graphics);
for (let i = 0; i < 20; i++)
{
let follower;
if (i === 0)
{
follower = this.add.follower(path, 100, 100 + (30 * i), 'eyes').setDepth(50);
}
else
{
follower = this.add.follower(path, 100, 100 + (30 * i), 'orb');
follower.setBlendMode(Phaser.BlendModes.ADD);
follower.setScale(0.5);
}
follower.startFollow({
duration: 4000,
positionOnPath: true,
repeat: -1,
ease: 'Linear',
delay: i * 70
});
}
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'game-container',
scene: Example
};
const game = new Phaser.Game(config);