Getting Started With Simple Phaser Tweens

 

One of the great things about Phaser is tweens, Phaser comes prepackaged with
tween.js (which can be found here), to make creating and using tweens a breeze.

In this tutorial we are going to go over very simple basics of creating a tween
in your game, later in part 2 I will go over some more advanced features and things
that can be done with your tweens.

Setting Up The Tween:

We will go ahead and do a basic fade tween to be used on a sprite that has been
created in your game world.


let tween = this.game.add.tween(sprite).to({
    alpha: 0
}, 2000, Phaser.Easing.Linear.None, true, 15);

What exactly is happening here?

-Firstly we are creating a variable to hold our tween
-Then we are calling on Phaser to add the tween to the game world.
-In the parameters of the tween we specify what we are tweening which will be
whatever sprite you pass to it.
– We then specify what property of the sprite we are looking to tween, which
in this case is the alpha of the sprite

So the rest of the tween are parameters telling Phaser different values for this
tween.
– The 2000 is telling Phaser we want this tween to last a total of 2000ms or 2 seconds in total.
– The next property is tell Phaser what type of tween we want this to be, there are many types some
of which can be found here https://gamemechanicexplorer.com/#easing-7
– The third property is set to true which is the autostart functionality for the tween,
setting this to true will start the tween as soon as the game is loaded
– Finally the last property is the delay functionality for Phaser tweens,
this property can delay when the tween will actually start after it is loaded.

Worth noting if you would like your tween to loop, you can call once more parameter after delay, if you
set this to true your tween will loop indefinitely.

Just one more thing to touch on, what if you do not what your tween to start automatically? What
if you want it to be started when an event happens within your game such as a click? Luckily Phaser
tweens have a start functionality which I will give a brief example of here.

We will go ahead an set up our tween inside a click function that can be called from your game at any point you wish.


click() {
let tween = this.game.add.tween(sprite).to({
    alpha: 0
    }, 2000, Phaser.Easing.Linear.None, false, 15);
    tween.start();
}

Basically all we are doing here is setting the tweens autostart to false. We then call the start functionality with tween.start(); this will be triggered once the click function is called wherever you decide you want that event to happen within your game.

-We created a basic tween and ran through what exactly is happening with tweens in Phaser.
-We extended upon the basic tween by adding it to a simple click function and having it start
when that event is triggered.

Please stay tuned for Part 2, where we will go over some more advanced features of tweens and some really awesome stuff you can
do with them!