jcpelletier

Masking a sprite with a complex shaped image

Recommended Posts

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:

post-14836-0-07258800-1446147350.jpg

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.