In the previous particle tutorial I used something called a tween followed by the instructions “don’t worry about it, I will cover them later”. Well, welcome to later!
First off, what exactly is a tween? It’s actually probably exactly what you expect it is, basically it’s “between” turned into a verb. Tweens are all about transitioning from one state to another, and they are incredibly handy. Let’s just straight in with an example:
/// <reference path="phaser.d.ts"/> class SimpleGame { game: Phaser.Game; sprite: Phaser.Sprite; constructor() { this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', { create: this.create, preload: this.preload, render: this.render }); } preload() { this.game.load.image("decepticon", "decepticon.png"); } render() { } create() { this.sprite = this.game.add.sprite(0, 0, "decepticon"); this.game.add.tween(this.sprite).to( { x: 400 }, 5000, Phaser.Easing.Linear.None, true, 0, Number.MAX_VALUE, true); } } window.onload = () => { var game = new SimpleGame(); };
This example shows a to() tween, which is it tweens between the initial value and the value you specify. When creating a tween, you pass in the option you wish to tween, in this case a Phaser.Sprite. The first value are the properties we wish to tween, in this cases sprite’s x value. Next we tell it how long to take ( 5 seconds ), then pass in the easing function we want to use, in this case none ( which by the way, would have been the default value ), next is the delay before beginning ( right away ), how many times to perform ( infinite ) the tween, then finally we pass true to bounce. Bounce says after you are done the tween, go back to the beginning.
And here is the result
As you can see the image moves across the screen until it’s x value is 400.
Now let’s take a look at how the easing function affects the tween. Instead of no easing function, let’s apply an elastic band type affect. We use InOut, which means it will ease at the beginning and end of the Tween.
create() { this.sprite = this.game.add.sprite(0, 0, "decepticon"); this.game.add.tween(this.sprite).to({ x: 400 }, 5000, Phaser.Easing.Elastic.InOut, true, 0, Number.MAX_VALUE, true); }
And the result:
Tweens don’t have to be limited to positioning items either, you can tween just about any value. For example, let’s instead tween the alpha value of our sprite:
create() { this.sprite = this.game.add.sprite(0, 0, "decepticon"); this.game.add.tween(this.sprite).to({alpha:0 }, 5000, Phaser.Easing.Quadratic.In, true, 0, Number.MAX_VALUE, true); }
And the result
You can also chain together tweens to perform a series of transitions:
create() { this.sprite = this.game.add.sprite(0, 0, "decepticon"); this.game.add.tween(this.sprite) .to({ x: 400 }, 2000) .to({ y: 250 }, 2000) .to({ x: 0 }, 2000) .to({ y: 0 }, 2000).loop().start(); }
Resulting in:
Tweens also have event handlers attached. Here for example is a tween that has an onStart and onComplete event handler, that fire before and after the tween completes respectively.
create() { this.sprite = this.game.add.sprite(0, 0, "decepticon"); var tween = this.game.add.tween(this.sprite); tween.to({ x: 400 }); tween.onStart.addOnce(() => { this.sprite.scale.setMagnitude(0.5); }); tween.onComplete.addOnce(() => { this.game.add.tween(this.sprite).to({ x: 0 }).start(); },this); tween.start(); }
Tweens provide a pretty powerful but simple way of adding actions, either in sequence or parallel, to your game’s contents.