Pause and Resume a Tween
Demonstrates how to toggle a tween's playback state between paused and playing using pointer input.
800 × 600
var text;
var tween;
class Example extends Phaser.Scene
{
constructor()
{
super();
}
preload()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('block', 'assets/sprites/block.png');
}
create()
{
var marker = this.add.image(100, 200, 'block').setAlpha(0.3);
var image = this.add.image(100, 200, 'block');
text = this.add.text(30, 20, '0', { font: '42px Courier', fill: '#00ff00' });
tween = this.tweens.add({
targets: image,
x: 700,
y: 500,
duration: 3000,
ease: 'Power2',
yoyo: true,
repeat: -1,
paused: true
});
this.input.on('pointerdown', function ()
{
if (tween.isPlaying())
{
tween.pause();
}
else
{
tween.resume();
}
});
}
update()
{
// Tween
text.setText([
'Progress: ' + tween.progress,
'Elapsed: ' + tween.elapsed,
'Duration: ' + tween.duration,
]);
}
}
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);