Jump to content

masking issue


Recommended Posts

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.




Link to comment
Share on other sites


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();                }            }        }
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...