biscuitcleaver Posted September 17, 2015 Share Posted September 17, 2015 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! Quote Link to comment Share on other sites More sharing options...
xerver Posted September 17, 2015 Share Posted September 17, 2015 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. Quote Link to comment Share on other sites More sharing options...
biscuitcleaver Posted September 17, 2015 Author Share Posted September 17, 2015 I think that's exactly what I was looking for. Would I use PIXI.Sprite => generateTexture to do that? Thanks! Quote Link to comment Share on other sites More sharing options...
xerver Posted September 17, 2015 Share Posted September 17, 2015 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 1 Quote Link to comment Share on other sites More sharing options...
biscuitcleaver Posted September 17, 2015 Author Share Posted September 17, 2015 Thanks xerver! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.