Phaser3 Timeline
If you want to chain tween animations together in Phaser3, you need to use a timeline.
Let's start with our 'Hello World' program again, and add a timeline.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script>
var config = {
width: 800,
height: 600,
type: Phaser.AUTO,
parent: 'phaser-example',
scene: {
create: create
}
};
var text;
var game = new Phaser.Game(config);
function create ()
{
text = this.add.text(350, 25, 'Hello World', { fontSize: '50px', fill: '#9999ff' }).setOrigin(.5,.5);
var timeline = this.tweens.timeline({
targets: text,
tweens: [
{ angle: 90,
duration: 3000,
y: 300,
delay: 500,
ease: 'Bounce'
},
{ x: '+=500',
delay: 1000,
duration: 500,
ease: 'Linear'
}]
});
}//create
</script>
</body>
</html>
When you test the code, you will see that the first tween animation completely finishes before the next one begins.
If you add a yoyo to the timeline, it does not play the tweens in reverse order. Instead it adds a yoyo to each tween before moving to the next. So to reverse the tweens I did this.
var timeline = this.tweens.timeline({
targets: text,
tweens: [
{ angle: 90,
duration: 3000,
y: 300,
delay: 500,
ease: 'Bounce'
},
{ x: '+=500',
delay: 1000,
duration: 500,
ease: 'Linear',
yoyo: true
},
{ angle: 0,
duration: 3000,
y: 25,
delay: 500,
ease: 'Bounce.In'
}]
});
If you do want some of the tweens to overlap, use offset.
var timeline = this.tweens.timeline({
targets: text,
tweens: [
{ angle: 90,
duration: 3000,
y: 300,
delay: 500,
ease: 'Bounce'
},
{ x: '+=500',
delay: 1000,
duration: 500,
ease: 'Linear',
yoyo: true
},
{ angle: 0,
duration: 3000,
y: 25,
delay: 500,
offset: '-=2000',
ease: 'Bounce.In'
}]
});
You can get some interesting results by playing around with offset, but let's move on to talking about sprites.
Comments
Post a Comment