Tweening In Phaser Part 2

 

Getting Started

This is part 2 of tweening in Phaser using Tween JS

What we will cover:

  • How to use a callback in your tweens and why you should!
  • How to include a locally scope variable in your tween function to have custom data
  • Go over tween chaining and how to use it.

The Callback:

In this quick section I am going to show how to use a callback inside a click function to trigger your tween.


create() {
    let sprite = this.add.sprite(0, 0, 'sprite');
    sprite.isTweening = true;
    this.click(sprite, () =>; {
        sprite.isTweening = false;
    });
}

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

Accepting A Data Object Parameter:

This is not entirely necessary for say having one tween in your game, but what if you want to write an entire library of tweens? What if you want each tween to have different default properties such as distance and duration? This comes in handy to make your code very easy to read, interperate, and change quick and efficiently.


create() {
    let sprite = this.add.sprite(0, 0, 'sprite');
    sprite.isTweening = true;
    this.click(sprite, () =>; {
         sprite.isTweening = false;
    });
}

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

Breaking This Down

The only thing here we have really changed is adding in a third parameter into our click function. We accept a parameter called data which is an object containing our duration which is 2000ms. We can now access this within our tween for how long our tween should last by simply callingdata.duration.

This is a simple example for a data object within our function, for different tweens you may want to populate your data object with multiple properties such as, duration, distance, textures, etc. This is not doing anything incredibly special, unless you have multiple tweens and wish to have different defaults for each tween that can be accessed easily and cleanly.

Now Time For Tween Chaining!!!!

Tween chaining is exactly as it sounds….. chaining multiple tweens together for a fluid animation(or so we hope!).

Boom Chicka Chain That Tween:


create() {
    let sprite = this.add.sprite(0, 0, 'sprite');
    sprite.isTweening = true;
    this.click(sprite, () => {
        sprite.isTweening = false;
    });
}

click(sprite, data = {duration: 2000, distance: 55}, callback) {
    let tween1 = game.add.tween(sprite).to({
        x: sprite.x - data.distance
    }, 0.1538 * data.duration, Phaser.Easing.Sinusoidal.InOut).to({  
        x: sprite.x + data.distance
    }, 0.1538 * data.duration, Phaser.Easing.Sinusoidal.InOut, false, 15);
    
    let tween2 = game.add.tween(sprite).to({
        x: sprite.x - data.distance
    }, 0.1538 * data.duraton, Phaser.Easing.Sinusoidal.InOut).to({
        x: sprite.x + data.distance
    }, 0.1538 * data.duration, Phaser.Easing.Sinusoidal.InOut, false, 15);

    let tween3 = game.add.tween(sprite).to({
        x: sprite.x
    }, 0.3846 * data.duration, Phaser.Easing.Sinusoidal.InOut);
    
    tween1.chain(tween2);
    tween2.chain(tween3);
    tween1.start();
    
    if(callback) {
        tween.onComplete.add(callback, this);
    }
}

Voila!

We have a horizontal shake tween using chains and a data object to control our distance and our duration.

Alrighty so this is definitely a bit more of an advanced tween than we have looked at so far, lets go through what we have changed step by step.

-Okay first off in tween1 we are stating to tween the X value to our sprites original X – data.distance, which is 55 pixels, we then define our duration which is 0.1538 * data.duration, the reason for this is to have a fluid shake tween this multiplication comes out to 307.6ms. The reason we want to have each tween take up a certain amount of the total duration, is so when we get to tween3 we can have a longer duration for that tween and have it slow down.

-Next we are basically doing the same exact thing but in the opposite direction, by calling X value is equal to sprite original X value plus data.

-So to keep things simple we are going to do the exact same thing for tween2

-Moving on to tween3 we are going to be setting the X value back to the sprites original X but what is different here is the duration at which we do that. We are going to have a slower duration by using 0.3846 * data.duration which comes out to 769.2ms, this will give our sprite a slowing effect while returning to it’s original X

-So the only thing left to explain in this chained tween is the chains! Phaser makes it very simple to chain tweens, after you have added all of your tweens to your function you simple chain them together by calling tween1.chain(tween2); as a function and so on and so forth for as many tweens as you have(as far as I know there is no limit to how many tweens you can chain).

-Then we just use our simple if statement for our callback and all is done!

Conclusion:

-We extended upon the basic tweening with Phaser tutorial posted previously
-We added callbacks to our tweens to make them more versitile and bug proof
-We learned how to add a data object parameter to our functions to have customizable and reusable properties
-We learned the awesomeness that is chaining tweens to make a horizontal shake animation

Thanks for reading!