mask doesn't work

[odelia]

Hi, 

I'm new with phaser and javascript...

I'm trying to set a graphic mask to a group of sprite and it doesn't work..

I get the error massage

 

Cannot read property '0' of undefined

 on the phaser code:

PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession){    var gl = renderSession.gl;    if(maskData.dirty)    {        PIXI.WebGLGraphics.updateGraphics(maskData, gl);    }    if(!maskData._webGL[gl.id].data.length)return;    renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession);};

my code:
 

create the group

this.menuGroup = this.game.add.group();setMenu = function(data){    var obj;    var src = data.src;    var xloc = src.boxImg.x;    var yloc = 0;    src.menuData = src.gameData[data.id];    src.menuData.forEach(function(item){        obj = new ItemBtn(this.state, xloc, yloc, item);                yloc += obj.height;                this.menuGroup.add(obj);    }, src);        src.setMask();}

create the mask

setMask = function(){    //set mask    var squareBitmap = this.game.add.bitmapData(this.boxImg.width - (this.boxImg.width * .2), this.game.height * .90);    squareBitmap.ctx.fillStyle = '#000';    squareBitmap.ctx.fillRect(0, 0, this.boxImg.width - (this.boxImg.width * .2), this.game.height * .90);        myMask = this.game.add.sprite(this.boxImg.x, 0, squareBitmap);    myMask.anchor.setTo(0.5, 0);        console.log(this.menuGroup);     this.menuGroup.mask = myMask;   }

I do get the menuGroup in the console so I don't understand why I get the error...

 

Hope somebody can help me... 

Thank you.

[jmp909]

I think mask may need to be of Phaser.Graphics type http://phaser.io/docs/2.4.4/Phaser.Group.html#mask

 

try using alphaMask? Although I don't think that works on groups

 

There's also this but it's old http://www.html5gamedevs.com/topic/1444-how-to-use-pixi-masking-in-phaser/

[odelia]

I've change the group to a sprite that contains all of the items.

 

I tried both ways to define a mask but it still doesn't work...

var myMask = new PIXI.Graphics();//this.game.add.graphics(0, 0);//var maskWidth = this.boxImg.width;// - (this.boxImg.width * .2);var maskHeight = this.game.height * .90;myMask.beginFill(0x000000);myMask.moveTo(0, 0);myMask.lineTo(0, maskHeight);myMask.lineTo(maskWidth, maskHeight);myMask.lineTo(maskWidth, 0);myMask.lineTo(0, 0);myMask.endFill();    myMask.position.x = this.boxImg.x - (this.boxImg.width / 2);myMask.position.y = 0;    this.menuContainer.mask = myMask;

and 

var maskX = this.boxImg.x - (this.boxImg.width / 2);var maskY = 0;var maskWidth = this.boxImg.width;// - (this.boxImg.width * .2);var maskHeight = this.game.height * .90;    var mymask = this.game.add.graphics(0, 0);mymask.beginFill(0xffffff);mymask.drawRect(maskX, maskY, maskWidth, maskHeight);    this.menuContainer.mask = mymask;