Animating multiple masks on the same image

[biscuitcleaver]

Hi all, I'm having a bit of a mental challenge with a request I've received. Our designer wants to be able to take a single image and animate a bunch of triangles as masks to slowly reveal the image triangle by triangle. I know I can use sprites and shapes as a mask to the image, but it only seems like I can use 1 triangle at a time as the mask. Is there a way to animate a bunch of shapes in a single sprite and use that sprite as the mask? 

 

Thanks!

[xerver]

You can use a sprite as a mask, and you can use a canvas as a texture for a sprite. You could draw the animation to the canvas (dynamically changing the mask) so the masked object changes as well.

[biscuitcleaver]

I think that's exactly what I was looking for. Would I use PIXI.Sprite => generateTexture to do that?

 

Thanks!

[xerver]

Nope:

var canvas = document.createElement('canvas');var texture = PIXI.Texture.fromCanvas(canvas);var spriteMask = new PIXI.Texture(texture);mySprite.mask = spriteMask;

generate texture creates a texture from a container.

[biscuitcleaver]

Thanks xerver!