How to use tweens in Phaser3
What is a tween?
A tween is one of Phaser's built in objects. It allows you to manipulate another object's properties.
The best way for me to describe it, would be to call it a transitional animation. You can make an object move from point A to point B. Or, rotate the object. You can change its size, or make it go from invisible to visible.
Really, any property the object has, the tween will let you play with.
Lets look at some code of a very basic tween, applied to a 'Hello World' program.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tween Test</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);
this.tweens.add({
targets: text,
y: 300,
delay: 1000,
duration: 3000,
ease: "Cubic"
});
}
</script>
</body>
</html>
When you run this code, you will see the text 'Hello World' at the top of the canvas. But after one second, it moves down toward the middle of the canvas.
The tween made that happen.
Lets go over the properties of the tween. The first is targets: and this tells the tween which object to manipulate. I have a variable called text which is our victim.
You will notice that the variable text has a starting y value of 25. But this tween is going to move text to a y value of 300.
The delay of 1000 milliseconds will cause the tween to wait one second before moving text. While the duration of 3000 milliseconds controls the time it takes to complete the animation.
The ease somewhat describes how we will finish our animation. You can see how Cubic behaves. Our text starts off moving a bit faster and then slows down into final resting position.
Lets change the word Cubic to Bounce.
this.tweens.add({
targets: text,
y: 300,
delay: 1000,
duration: 3000,
ease: "Bounce"
});
You see how now the text acts like a rubber ball hitting a hard floor. That was fun.
Try changing it to "Back". Now the text goes past its target point, then backs itself into position.
Change the ease: value to "Elastic" and it looks like text was bungie jumping.
The ease: affect takes place at the end of our animation by default, but you can make the affect happen at the start of the animation instead. Try this.
this.tweens.add({
targets: text,
y: 300,
delay: 1000,
duration: 3000,
ease: "Bounce.easeIn"
});
If you want the affect to happen at the start and the end, do this.
this.tweens.add({
targets: text,
y: 300,
delay: 1000,
duration: 3000,
ease: "Bounce.easeInOut"
});
Now lets talk about other properties. Like rotation.
this.tweens.add({
targets: text,
y: 300,
rotation: 1.57,
delay: 1000,
duration: 3000,
ease: "Bounce.easeInOut"
});
Rotation is in radians of course. If you prefer degrees. Use angle and you can set text to a specific angle in degrees.
this.tweens.add({
targets: text,
y: 300,
angle: 90,
delay: 1000,
duration: 3000,
ease: "Bounce.easeInOut"
});
If you want to reverse the tween back to the start point, you can yoyo it.
this.tweens.add({
targets: text,
y: 300,
angle: 90,
delay: 1000,
yoyo: true,
duration: 3000,
ease: "Bounce.easeInOut"
});
To make a pause before the yoyo affect, add a hold.
this.tweens.add({
targets: text,
y: 300,
angle: 90,
delay: 1000,
hold: 1000,
yoyo: true,
duration: 3000,
ease: "Bounce.easeInOut"
});
We can scale the text bigger.
this.tweens.add({
targets: text,
y: 300,
scale: { start: 1, to: 2},
angle: 90,
delay: 1000,
hold: 1000,
yoyo: true,
duration: 3000,
ease: "Bounce.easeInOut"
});
Or play with the alpha value to make our text disappear.
this.tweens.add({
targets: text,
y: 300,
scale: { start: 1, to: 2},
alpha: { start: 1, to: 0},
angle: 90,
delay: 1000,
hold: 1000,
yoyo: true,
duration: 3000,
ease: "Bounce.easeInOut"
});
You can even use more than one ease affect if you use props.
this.tweens.add({
targets: text,
props: {
x: { value: '+=250', duration: 3000, ease: 'Back' },
y: { value: '500', duration: 1500, ease: 'Bounce' }
},
delay: 1000,
angle: 90,
});
To move text around in a circle takes a little more work. But here it is.
text = this.add.text(350, 25, 'Hello World', { fontSize: '50px', fill: '#9999ff' }).setOrigin(.5,.5);
var myCircle = new Phaser.Geom.Circle(400, 265, 235);
var tweenObject = {
val: 0
}
this.tweens.add({
targets: tweenObject,
val: 1,
duration: 3000,
repeat: -1,
ease: "Circular",
callbackScope: this,
onUpdate: function(tween, target){
var position = myCircle.getPoint(target.val);
text.x = position.x;
text.y = position.y;
}
});
To reverse the circle and add some rotation to text, I did this.
text = this.add.text(350, 25, 'Hello World', { fontSize: '50px', fill: '#9999ff' }).setOrigin(.5,.5);
var myCircle = new Phaser.Geom.Circle(400, 265, 235);
var tweenObject = {
val: 0
}
this.tweens.add({
targets: tweenObject,
val: 1,
duration: 3000,
repeat: -1,
ease: "Circular",
callbackScope: this,
onUpdate: function(tween, target){
var position = myCircle.getPoint(target.val);
text.x = position.y + 135;
text.y = position.x - 140;
}
});
this.tweens.add({
targets: text,
duration: 3000,
repeat: -1,
rotation: -6.28,
ease: "Circular"
});
An easy way to change the color of text, is to double it. Hide a different color under the first text and then adjust the alpha channels.
text = this.add.text(350, 25, 'Hello World', { fontSize: '50px', fill: '#9999ff' }).setOrigin(.5,.5);
var text2 = this.add.text(350, 25, 'Hello World', { fontSize: '50px', fill: '#ff0000' }).setOrigin(.5,.5);
this.tweens.add({
targets: text,
duration: 3000,
repeat: -1,
ease: "Circular",
alpha: { start: 1, to: 0},
yoyo: true
});
this.tweens.add({
targets: text2,
duration: 3000,
repeat: -1,
ease: "Circular",
alpha: { start: 0, to: 1},
yoyo: true
});
And that should be enough to get you started on tweens and how they work.
The next discussion will be about chaining tweens together.
Comments
Post a Comment