jcpelletier Posted October 29, 2015 Share Posted October 29, 2015 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 Link to comment Share on other sites More sharing options...
jmp909 Posted October 30, 2015 Share Posted October 30, 2015 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' percentagei 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 drhayes, jcpelletier, chongdashu and 2 others 5 Link to comment Share on other sites More sharing options...
jcpelletier Posted October 30, 2015 Author Share Posted October 30, 2015 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 Link to comment Share on other sites More sharing options...
Blogs Posted March 15, 2016 Share Posted March 15, 2016 Hi, I'm new in Phaser, This is possible between two sprites? That is, without fill colors. Thanks ! Bingo 1 Link to comment Share on other sites More sharing options...
Bingo Posted May 12, 2017 Share Posted May 12, 2017 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? TechnoL0g 1 Link to comment Share on other sites More sharing options...
Recommended Posts