Tweening Tint in Phaser

 

Getting Started With Tweening an Object’s Tint

Ever wanted to get something to fade between two colours? Well lets look at how to do that in this post!

It’s actually not as difficult to do, though because phaser doesn’t allow us to do it out of the box, we need to just tweak a few things.

So to break it down, how do we cycle through colours? Well.. a hex value ‘0xf23da4’ for example, is just a combination of red blue and green. We can take advantage of this by using phaser’s colour interpreter.

Lets go ahead and create a background and a draw a sprite to the stage.


export default class Menu extends Phaser.State {
    create() {
        let background = this.game.add.image(0, 0, 'menuBackground');
        let logo = this.add.image(250, 250, 'sprite-storm')
    }
}

Next, we’re going to write a function that will create a tween to change the tint of an object.


tweenTint(obj, startColor, endColor, time = 250, delay = 0, callback = null) {
    // check if is valid object
    if (obj) {
        // create a step object
        let colorBlend = { 
            step: 0 
        };

        // create a tween to increment that step from 0 to 100.
        let colorTween = this.game.add.tween(colorBlend).to({ step: 100 }, time, Phaser.Easing.Linear.None, delay);

        // add an anonomous function with lexical scope to change the tint, calling Phaser.Colour.interpolateColor
        colorTween.onUpdateCallback(() => {
            obj.tint = Phaser.Color.interpolateColor(startColor, endColor, 100, colorBlend.step);
        });

        // set object to the starting colour
        obj.tint = startColor;

        // if you passed a callback, add it to the tween on complete
        if (callback) {
            colorTween.onComplete.add(callback, this);
        }

        // finally, start the tween
        colorTween.start(); 
    }
}

I put the comments in the code block to make it a little bit easier to walk yourself through the function step by step.

Finally, we can call the function with something like this.


...
let logo = this.add.image(250, 250, 'sprite-storm')
this.tweenTint(logo, 0xffffff, 0x0000ff, 1000, 0, () => {
    console.log('tween has finished')
});

The first parameter we pass is the object itself, in my case, the Sprite-Storm logo. Next is my start colour, white. Then the finish colour, blue. Next I’m passing the duration of the tween, though this will default to 1000ms if nothing is passed. And finally, I’m passing an anonymous function with lexical scope that will be called on the tween completion.

And that’s all there is too it. You can see a little example of the tween in action below, and I will paste my whole state class for you guys to copy and paste =)

Tween Tint Gif



export default class Menu extends Phaser.State {
    /**
    * Create Function in Menu State
    */
    create() {
        // create background image
        let background = this.game.add.image(0, 0, 'menuBackground');

        // create logo image
        let logo = this.add.image(250, 250, 'sprite-storm')

        // call tween tint function
        this.tweenTint(logo, 0xffffff, 0x0000ff, 2500, 0, () => {
            console.log('callback - tween finished')
        });
    }

    /**
    * @description Will tween a display object between two hex values
    * 
    * @param {Object} obj the object to tween
    * @param {number} startColour the starting colour (hex)
    * @param {number} endColour the ending colour (hex)
    * @param {number} time the duration of the tween
    * @param {function} callback a function to be called on tween completion
    * 
    * @returns {void}
    */
    tweenTint(obj, startColor, endColor, time = 250, delay = 0, callback = null) {
        if (obj) {
            let colorBlend = { step: 0 };
            let colorTween = this.game.add.tween(colorBlend).to({ step: 100 }, time, Phaser.Easing.Linear.None, delay);
            colorTween.onUpdateCallback(() => {
                obj.tint = Phaser.Color.interpolateColor(startColor, endColor, 100, colorBlend.step);
            });
            obj.tint = startColor;
            if (callback) {
                colorTween.onComplete.add(callback, this);
            }
            colorTween.start(); 
        }
    }
}

Twitter

Error code 89: Invalid or expired token.

Stay Updated