How to make a 'Flash' effect over a Sprite in Phaser.js?

Question

I'm creating an Rpg in Phaser, and I'm trying to make a Flash effect happen over a Sprite -that means turning the Sprite all white for a moment and then returning to its original color-.

So my question is: what's the best way of achieving this effect? . I've tried two solutions so far, but i'm missing something:

Solution 1:

I tried tweening the tint parameter of the sprite, like this:

this.game.add.tween(enemy).to({
        tint: 0xffffff,
    }, 100, Phaser.Easing.Exponential.Out, true, 0, 0, true);

But it doesn't work since setting the tint to 0xffffff is the same as setting it to its default color.

Solution 2:

My second possible solution is adding a white square that has the same size of the sprite, and using the actual sprite as a mask for the square:

var flash = this.game.add.graphics(0, 0);
flash.beginFill(0xffffff);
flash.drawRect(enemy.x, enemy.y, enemy.width, enemy.height);
flash.endFill();
flash.mask = enemy  // enemy is my Sprite

/* .. code for tweening the flash */

The problem with this solution is that the mask needs to be a PIXI.Graphics object ; and I'm using a Sprite object.

So please, any guidance would be appreciated.

Answer 1

In the version of Pixi that Phaser 2.2.2 uses there is a 'tintCache' which basically rounds the tint value, then caches the result. This means you can't do subtle tint ramping like you're trying to do with a tween. We removed this in Phaser 2.3, so it will be available from then, but as of now it's still in dev.

Also you can tint to a 'near white' colour - only 0xffffff precisely resets the tint. But a value very close to that would still be set ok and probably have the desired result.

If you're using WebGL I would still use a tint with 'as near as white as possible' colour values and tween them. You could disable the tint cache for yourself by copying that part of the changed code from the Phaser dev branch.

In Canvas mode it's expensive though as it has to recalculate the pixels every single time you update it.

If you need to worry about Canvas performance then honestly I would create a new PNG that matches your sprite, colour it in all-white and display it over the top of your main sprite as needed and alpha it out. It's less than ideal because of the extra assets required, but it would be the fastest in canvas mode for sure. All depends on your game though is that's acceptable or not.

Edit: Also occurred to me that you could probably achieve what you need by using a blend mode too, such as lighten. You'd duplicate your main sprite, set the blend mode on it, display it over the top of your sprite and fade it out. This would work fine in Canvas at least.

Answer 2

You can use a ColorMatrixFilter on the Sprite. In Phaser, you may have to manually load in the PIXI script first:

game.load.script('filter', 'js/filters/ColorMatrixFilter.js');

Use this for white:

var filter = new PIXI.ColorMatrixFilter();
filter.matrix = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1];
this.game.filter = [filter];

You can also tween the matrix values if you want a smooth transition.