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 )
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