Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

masking issue


4ucai
 Share

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.

 

Thanks! 

 

Link to comment
Share on other sites

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

 Share

  • Recently Browsing   0 members

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