ihatetomatoes Posted February 19, 2016 Share Posted February 19, 2016 Hi there, completely new to Pixi.js, but so far liking the experience. I am experimenting with masking and wondering if TilingSprite could be used as a mask for another container? // Main container var stage = new PIXI.Container(); // Mask mask = new PIXI.Container(); var maskUpTile = PIXI.Texture.fromImage('img/mask-up.png'); mask.x = 0; mask.y = 0; // Top part of the mask - transparent png var maskTop = new PIXI.extras.TilingSprite(maskUpTile, renderer.width, renderer.height); maskTop.x = 0; maskTop.y = 0; mask.addChild(maskTop); // Middle bit - just a black rectangle var maskMiddle = new PIXI.Graphics(); maskMiddle.beginFill(0x505050, 1); maskMiddle.drawRect(renderer.width*0.25, renderer.height*0.25, renderer.width/2, renderer.height/2); maskMiddle.endFill(); mask.addChild(maskMiddle); // Mask main container stage.addChild(mask); stage.mask = maskTop; renderer.render(stage); Using the maskMiddle (simple rectangle) as a mask works fine, but I was wondering if repeatable transparent png can be used for masking. And yes, what am I doing wrong? Thanks heaps for any tips. Cheers Petr Quote Link to comment Share on other sites More sharing options...
xerver Posted February 20, 2016 Share Posted February 20, 2016 No it cant, sprite masking is done via the SpriteMaskFilter (https://github.com/pixijs/pixi.js/tree/master/src/core/renderers/webgl/filters) which clips based on the sprite texture. It expects a Sprite, not a TilingSprite. If anything it would mask by the texture, not the repeated drawing of it. Quote Link to comment Share on other sites More sharing options...
fire7side Posted February 22, 2016 Share Posted February 22, 2016 Does this work like you have a black texture with a alpha hole in it and it masks everything else out? I saw the example uses a circle graphic. Quote Link to comment Share on other sites More sharing options...
ihatetomatoes Posted February 22, 2016 Author Share Posted February 22, 2016 Yes, it cuts off everything that is transparent in the png. Here is an example of it (using createjs): http://m.adidas.co.uk/ace_16 Scroll down and you'll see a transition using masking when you go from the first main section of the page to the next. 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.