PIXI Mask with transparency lines

[di_lix]

Hi guys!
I'm trying to create PIXI mask with transparency at the top and at the bottom of rectangle. To make transparency I draw 10 lines with different alpha at the top, then draw a rectangle and 10 lines at  the bottom. But the problem is that mask is created  without transparency. It just makes 10 lines without alpha.  How to achieve a transparency effect without using png sprite? Just PIXI.Graphics. Thank you!

Here is my code:

var mask = new PIXI.Graphics(),
    x = 0,
    y1 = 200,
    y2 = 600,
    width = 1000,
    alpha = 0.1,
    steps = 10,
    i;

//first block of 10 lines 
for (i = 0; i < steps; i++) {
    mask.moveTo(0, y1 + i);
    mask.lineStyle(1, "0xffffff", alpha);
    mask.lineTo(width, y1 + i);
    alpha += 0.1;
}

//Rectangle
mask.beginFill("0xffffff");
mask.drawRect(x, y1 + steps, width, 390);
mask.endFill();
alpha = 1;


//second block of 10 lines 
for (i = 0; i < steps; i++) {
    mask.moveTo(0, y2 + i);
    mask.lineStyle(1, "0xffffff", alpha);
    mask.lineTo(width, y2 + i);
    alpha -= 0.1;
}

 

[xerver]

Graphics masks are not alpha masks, they are basically on/off switches. To doing alpha-based masking assign a sprite to the mask property. You can use a Graphics object to generate a texture that you use for the mask sprite.

[di_lix]

@xerver

Thanks, it works. 

But anyway when I'm using mask with transparency(PNG or PIXI.Graphics) Firefox starts to eat memory. Chrome's behavior is fine...

 

 

[xerver]

Not sure, do a memory profile and see what is causing it.