Pause and Resume All Tweens
Demonstrates how to pause and resume every active tween in a scene simultaneously using the Tween Manager's global control methods.
800 × 600
class Example extends Phaser.Scene
{
constructor()
{
super();
}
preload()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('bg', 'assets/ui/undersea-bg.png');
this.load.image('up', 'assets/ui/up-bubble.png');
this.load.image('down', 'assets/ui/down-bubble.png');
this.load.spritesheet('fish', 'assets/sprites/fish-136x80.png', { frameWidth: 136, frameHeight: 80 });
}
create()
{
this.add.image(400, 300, 'bg');
var image1 = this.add.image(0, 80, 'fish', 0);
this.tweens.add({
targets: image1,
props: {
x: { value: 700, duration: 4000, flipX: true },
y: { value: 500, duration: 8000, },
},
ease: 'Sine.easeInOut',
yoyo: true,
repeat: -1
});
var image2 = this.add.image(400, 80, 'fish', 1);
this.tweens.add({
targets: image2,
props: {
x: { value: 500, duration: 2000, flipX: true },
y: { value: 500, duration: 10000, },
},
ease: 'Sine.easeInOut',
yoyo: true,
repeat: -1
});
var image3 = this.add.image(800, 200, 'fish', 2).setFlipX(true);
this.tweens.add({
targets: image3,
props: {
x: { value: 70, flipX: true },
y: { value: 250 },
},
duration: 3000,
ease: 'Power1',
yoyo: true,
repeat: -1
});
var image4 = this.add.image(100, 550, 'fish', 2).setScale(0.75);
this.tweens.add({
targets: image4,
props: {
x: { value: 700, duration: 2000, flipX: true },
y: { value: 50, duration: 15000, },
},
ease: 'Sine.easeInOut',
yoyo: true,
repeat: -1
});
// Buttons to control the Tween timescale
var text = this.add.text(180, 0, 'Click to Pause / Resume').setFont('32px Arial Black').setFill('#ffffff').setShadow(2, 2, "#333333", 2);
var downButton = this.add.image(70, 530, 'down').setInteractive();
var upButton = this.add.image(730, 530, 'up').setInteractive();
var tweens = this.tweens;
this.input.on('gameobjectup', function (pointer, gameobject)
{
if (gameobject === downButton && tweens.timeScale > 0)
{
tweens.pauseAll();
text.setText('Pause All');
}
else if (gameobject === upButton && tweens.timeScale < 9.9)
{
tweens.resumeAll();
text.setText('Resume All');
}
});
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'game-container',
scene: Example
};
const game = new Phaser.Game(config);