Build games as easily as you play them — join the Phaser Beam waitlist for Early Access.
class Example extends Phaser.Scene { preload () { this.load.setBaseURL('https://cdn.phaserfiles.com/v385'); this.load.spritesheet('raster', 'assets/phaser3/bars.png', { frameWidth: 46, frameHeight: 2 }); } create () { const group = this.add.group(); const x = 200; let y = 0; let frame = 0; for (let i = 0; i < 180; i++) { const bar = group.create(x, y, 'raster', frame); bar.setOrigin(0); bar.displayHeight = 600 - y; y += 3; frame++; if (frame === 9) { frame = 0; } } this.tweens.add({ targets: group.getChildren(), x: 600, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 1500, delay: function (target, key, value, targetIndex) { return targetIndex * 30; } }); } } const config = { type: Phaser.AUTO, parent: 'phaser-example', width: 800, height: 600, pixelArt: true, scene: Example }; const game = new Phaser.Game(config);
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
this.load.spritesheet('raster', 'assets/phaser3/bars.png', { frameWidth: 46, frameHeight: 2 });
}
create ()
{
const group = this.add.group();
const x = 200;
let y = 0;
let frame = 0;
for (let i = 0; i < 180; i++)
{
const bar = group.create(x, y, 'raster', frame);
bar.setOrigin(0);
bar.displayHeight = 600 - y;
y += 3;
frame++;
if (frame === 9)
{
frame = 0;
}
}
this.tweens.add({
targets: group.getChildren(),
x: 600,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut',
duration: 1500,
delay: function (target, key, value, targetIndex)
{
return targetIndex * 30;
}
});
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
pixelArt: true,
scene: Example
};
const game = new Phaser.Game(config);