how to do this effect ?

[espace]

hi,

i want to make this effect depending of my picture attached below  : mask_1,mask_2,mask_3,mask_final.

This effect have an alpha channel ; everything that is not yellow is transparent.

how do you do that ? i read the alpha_mask but i don't know how do this ....

thanks for your help

 

[khleug35]

like this???

https://jsfiddle.net/1sje65a0/5/

function create() {

    game.stage.backgroundColor = '#000';

   
     arrow = game.add.image(90, 36, 'arrow'); 
 
      widtharrow = new Phaser.Rectangle(0, 0,arrow.width, arrow.height); 
 
     arrow.cropEnabled = true;
     arrow.crop(widtharrow);     
     arrow.fixedToCamera = true;
    
     widtharrow.width = 0; 
    
    game.time.events.loop(800,  function() {
	  game.add.tween(widtharrow).to( { width: (widtharrow.width + 60) }, 200, Phaser.Easing.Linear.None, true);
			}, this);     

}


function update() {
arrow.updateCrop();

//loop animations
if(widtharrow.width >= 300){
  game.add.tween(widtharrow).to( { width: (widtharrow.width - arrow.width) }, 200, Phaser.Easing.Linear.None, true);
}

}

I use crop method to do it .

https://phaser.io/examples/v2/sprites/horizontal-crop

[espace]

waouw thanks

i don't really understand for time how you do but i will read the docs.

[espace]

[espace]

hi,

but how do you do to do the same effect from right to left, without move the arrow  ?

i would change the Phaser.rectangle.anchor but this feature is not permitted in the doc.

I also change the direction of the widtharrow.width but it doesn't change the effect...

have you an idea about that ?

https://jsfiddle.net/dah89fnt/

[khleug35]

17 hours ago, espace said:

hi,

but how do you do to do the same effect from right to left, without move the arrow  ?

i would change the Phaser.rectangle.anchor but this feature is not permitted in the doc.

I also change the direction of the widtharrow.width but it doesn't change the effect...

have you an idea about that ?

https://jsfiddle.net/dah89fnt/

Hello 

I just add this scale code, but I not sure that  is it the best way to do it.........sorry

arrow.scale.setTo(-1);

 

Example:

https://jsfiddle.net/r37qdpvn/

 

[espace]

Solved thanks. Have a good day