Phaser Tweens — Advanced Property Animation
In this tutorial, you will learn about Phaser Tweens. We cover key concepts, practical examples, and best practices to help you master this topic.
Phaser tweens animate any numeric property of game objects over time with configurable easing, duration, delay, and chaining.
What You'll Learn
By the end of this guide, you will create tweens with custom easing, chain tweens with onComplete, use timelines for sequencing, tween non-Phaser objects, create reusable tween configs, and use tween events.
Tween with Custom Ease
this.tweens.add({
targets: sprite,
x: 500,
duration: 1000,
ease: function(t) {
return t < 0.5
? 4 * t * t * t
: 1 - Math.pow(-2 * t + 2, 3) / 2;
}
});
Tween Chain
this.tweens.add({
targets: sprite,
x: 400,
duration: 500,
onComplete: function() {
this.tweens.add({
targets: sprite,
y: 200,
duration: 300,
onComplete: function() {
sprite.destroy();
}
});
}
});
Timeline
var timeline = this.tweens.createTimeline();
timeline.add({
targets: sprite,
x: 200,
duration: 500
});
timeline.add({
targets: sprite,
y: 300,
duration: 500
});
timeline.add({
targets: sprite,
alpha: 0,
duration: 300
});
timeline.play();
Tweening Custom Objects
var customObj = { value: 0 };
this.tweens.add({
targets: customObj,
value: 100,
duration: 1000,
onUpdate: function() {
console.log(customObj.value);
}
});
Common Mistakes
1. Tween Targets Not Existing
If the target is destroyed mid-tween, Phaser throws an error. Check existence before tweening.
2. Overlapping Tweens
Starting a new tween on the same target stops the previous one. Use timelines for sequencing.
3. Missing Duration
Default duration is 0 (instant). Always set an explicit duration.
4. Ease String Not Valid
Use Phaser built-in eases: 'Sine.easeInOut', 'Power2', 'Bounce.easeOut', etc.
5. onComplete Called Before Finish
If the tween is stopped, onComplete does not fire. Use onStop if needed.
Practice Questions
Q1: How do you create a tween? A: Use this.tweens.add({ targets, properties, duration }).
Q2: How do you chain tweens? A: Use onComplete to start the next tween, or use a timeline.
Q3: How do you make a tween repeat? A: Set repeat: -1 for infinite, or repeat: n for n repeats.
Q4: How do you pause a tween? A: Call tween.pause() and tween.resume().
Q5: How do you destroy a target after tween? A: Call target.destroy() in onComplete.
Challenge: Build a card dealing animation where cards fly from the deck to 4 player positions with staggered timing and different trajectories.
FAQ
Try It Yourself
Create a tween chain.
<!DOCTYPE html>
<html>
<head>
<title>Phaser Tweens</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Tween Demo</h2>
<button onclick="playTween()">Play</button>
<script>
var config = {
type: Phaser.AUTO,
width: 600,
height: 400,
backgroundColor: '#1a1a2e',
scene: {
create: function() {
var box = this.add.rectangle(100, 200, 60, 60, 0x4ecdc4);
this.box = box;
this.add.text(300, 30, 'Tween Sequence', { fill: '#4ecdc4' }).setOrigin(0.5);
// Make playTween accessible
window.tweenScene = this;
}
}
};
var game = new Phaser.Game(config);
function playTween() {
var scene = window.tweenScene;
if (!scene || !scene.box) return;
// Reset
scene.box.setPosition(100, 200);
scene.box.setAlpha(1);
scene.tweens.add({
targets: scene.box,
x: 500,
scaleX: 1.5,
duration: 600,
ease: 'Power2',
onComplete: function() {
scene.tweens.add({
targets: scene.box,
y: 350,
scaleY: 0.5,
duration: 500,
ease: 'Bounce.easeOut',
onComplete: function() {
scene.tweens.add({
targets: scene.box,
alpha: 0,
scaleX: 0,
scaleY: 0,
duration: 400,
ease: 'Power2',
onComplete: function() {
scene.tweens.add({
targets: scene.box,
x: 100,
y: 200,
scaleX: 1,
scaleY: 1,
alpha: 1,
duration: 1
});
}
});
}
});
}
});
}
</script>
</body>
</html>
What's Next
Use advanced tilemaps.
Tilemaps Advanced — Advanced tilemap features. Audio — Sound and music.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro