masking issue

[4ucai]

Hi guys,

 

I've recently ran into an issue with masking. The code below works if I use WebGL renderer.

this.coverText = this.game.add.sprite(0, 0, 'cover_text');   this.maskGraphics = this.game.add.graphics(0, 0);this.maskGraphics.lineStyle(0, 0x0000FF, 1);this.maskGraphics.drawRect(0, 0, 100, 20); this.coverText.mask = this.maskGraphics;

If I use Canvas renderer I get this error instead. I guess it's an issue in Pixi?

 

1. Uncaught TypeError: Cannot read property 'alpha' of undefined PixiPatch.js:141

 

Another quick question. Why can't I use another sprite as the mask? I tried this

this.coverText = this.game.add.sprite(0, 0, 'cover_text'); this.maskGraphics = this.game.add.sprite(0, 0, 'mask'); this.coverText.mask = this.maskGraphics;

but it doesn't work.

 

I'm currently looking at cropping feature but it would probably be tedious as a workaround.

 

Thanks! 

 

[george]

Hello,

I just had the same problem. It seems that the pixi src was updated somewhere in the past without adopting the PixiPatch file. You have to replace the block else if (displayObject instanceof PIXI.FilterBlock) with the following block.

 

 

I created a pull request for this. See https://github.com/photonstorm/phaser/pull/438. I guess this will be obsolete in 1.2 but it's easy to fix so why not for 1.1.5.

else if (displayObject instanceof PIXI.FilterBlock)        {            if(displayObject.data instanceof PIXI.Graphics)            {                var mask = displayObject.data;                if(displayObject.open)                {                    this.context.save();                    var cacheAlpha = mask.alpha;                    var maskTransform = mask.worldTransform;                    this.context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]);                    mask.worldAlpha = 0.5;                    this.context.worldAlpha = 0;                    PIXI.CanvasGraphics.renderGraphicsMask(mask, this.context);                    this.context.clip();                    mask.worldAlpha = cacheAlpha;                }                else                {                    this.context.restore();                }            }        }

[4ucai]

Cheers George