Can TilingSprite be used as a mask?

[ihatetomatoes]

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

[xerver]

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.

[fire7side]

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.

[ihatetomatoes]

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.