Moving a Mask

[Son Tran-Nguyen]

Hello,

 

I have a little project where the player draws on the stage and I draw the paths into a graphic and set it as a mask for a sprite. All goes well, but I try to make the mask move with the sprite. Changing position of the mask graphic does not seem to make it move at all. Am I missing something here?

[hubert]

Could you please show us how are you trying to move the mask in your code?

 

Are you moving the sprite or the mask itself?

 

A little snippet would be useful!

 

http://www.sevenative.com

https://play.google.com/store/apps/details?id=pl.com.wojciak.kontakt.new_words

[Son Tran-Nguyen]

It's a little bit hard to extract the code out since I'm writing using entity system. So I went a head and created a JSFiddle using the masking example from Pixi website, and with rubber duck debugging, I saw that I need to redraw the mask in every tick.

 

Which is kinda trouble some, since now that I need another system to update of the mask's position. But that's okay. I guess my use case of mask is not that practical

 

Thank @hubert for suggesting me about debugging it.

[Mat Groves]

howdy! have you tried adding the mask to the sprite mySprite.addChild(myMask)?

[Son Tran-Nguyen]

Hi,

 

Do I need some way to adjust the drawn graphics. Cause if I add the mask to the sprite, and redraw the mask on every frame, the paths I use would be relative to the sprite?

 

A fiddle: http://jsfiddle.net/cz8jhq1v/

[powerfear]

Yes if you add the mask as a child of the sprite it's position become relative to it.

 

You can either change your paths position to lower values so its on top on the sprite, or set the position of the mask to negative value like i did here:

 

http://jsfiddle.net/cz8jhq1v/1/

 

btw why are you drawing the mask every frame? Is it because you want to use a different shape of mask every frame?

[Son Tran-Nguyen]

That's a good point, I needed to adjust the position of the mask. With a little bit of math, the mask fits the sprite perfectly. Thank you!

 

An updated fiddle if anyone interested: http://jsfiddle.net/cz8jhq1v/2/

 

Re: redrawing the mask every frame:

 

If I don't do that, the mask will be gone on the next frame.

[powerfear]

I mean you could simply draw the path once and not clear and redraw it every frame, unless you want to change the path of your mask there's no need to clear and redraw it.

 

http://jsfiddle.net/cz8jhq1v/3/

[Son Tran-Nguyen]

I see.

 

For some reason, when I did that, the mask did not appear, but maybe it was something else. This is perfect, saving me some CPU cycles.