How make a shiny animation for gameobject such as image

I want to make a shiny animation for a game object such as image as in this html5 example when hover image shiny image when hovering but I don’t know where to start

You can make such a thing by using a mask. Something like this should work(just paste this to any sample on labs.phaser.io :smile: )

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 640,
    height: 480,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload() {

    this.load.image('bunny', 'assets/sprites/bunny.png');
    this.load.image('checker', 'assets/pics/checker.png');
    this.load.image('arrow', 'assets/sprites/arrow.png');
}

function create() {

    var checker = this.make.image({
        x: game.config.width / 2,
        y: game.config.height / 2,
        key: 'checker',
        add: true
    });

    var bunny = this.make.sprite({
        x: game.config.width / 2, 
        y: game.config.height / 2, 
        key: 'bunny',
        add: true
    });

    let arrow = this.add.image(100,100,'arrow').setScale(10,1);
    arrow.rotation = -Math.PI/4;

    

    arrow.mask = new Phaser.Display.Masks.BitmapMask(this, bunny);
    
    bunny.setInteractive();
    bunny.on('pointerover', ()=>{
        arrow.x = -10;
        arrow.y = -10;     
        this.tweens.killTweensOf(arrow);   
        this.tweens.add({
            targets: arrow,
            x: 500,
            y: 500,
            duration:1000,
        });
    })

}

Instead of the arrow you should use a gradient type of image like in the example.

1 Like

Thank you for your help

1 Like