Masking a sprite with a complex shaped image

[jcpelletier]

Hello friends,

 

I would need some help in finding a coding approach that would allow my to create a mask for a sprite using a complex shaped image.

 

I am trying to create a dynamic energy gauge using my player's sprite silhouette like so:

 

The strategy I imagined for achieving this result was to draw my player's sprite, then overlay it with a green rectangle sprite that I could move (or scale) according to the energy level and then mask this rectangle using the shape of my player sprite as the mask.

 

After a lot of time reading the examples and the documentation on Phaser's website, I found two options: Masking a sprite using a Graphics or using Alpha Masking.  However both seem to have limitations that prevent me from reaching the result.

 

- Masking a sprite with Graphics: this option only let's me mask my player sprite using Graphics shapes (circle, rectangle, etc.) and not a complex shape like my silhouette

- Alpha Masking: this option uses two loaded images (base image = green rectangle, alpha image = player silhouette), combines them into a bitmapdata and then uses the bitmapdata as a texture for a sprite.  However, I cannot figure a way to update the base image dynamicaly to account for the changes in the gauge.

 

If anyone can propose some approaches I could try, I would be very thankful.

 

Cheers,

 

jci

[jmp909]

Ok, good challenge for me, as I was doing some of this the other day

 

• i create a bitmap from the player and set its non-transparent pixels to a solid colour (sillhouette)
• i create a bitmap the size of that bitmap and fill it with a colour (fill)
• i create an extra bitmap to do the alphamasking on....masking the fill with the sillhouette, and shifting the fill accordingly to do a 'bucket fill' percentage
• i create a sprtite to show the masked bitmapdata

 

http://phaser.io/sandbox/rWIJwRJF/play

 

I'm trying to think if there's a simpler solution

[jcpelletier]

Hi jmp909,

 

Thank you very much for this answer!  I will try implementing it in my game and see if it has an impact on performance (as I plan to do this on multiple sprites at the same time with different levels).

 

If you think of something else or if anyone else sees an interesting approach to this problem, I would be interested to learn.

 

I'm super stocked!

 

jci

[Blogs]

Hi, I'm new in Phaser,

This is possible between two sprites?
That is, without fill colors.

Thanks !

 

[Bingo]

I am having the same issue. 

I have a complex shape and need to be animated and masked. 

Full detail: I am trying to simulate a cup being filled with water. The water would be an animated sprite being slowly pushed up to the mask (shape of the cup).  

Is it possible?