Jump to content

Mask not working in webGL render mode


Recommended Posts

Hi guys 

Mask tecthinque not working in webGL render mode could you please give an idea.

I have one group with multiple images i need a mask to group. i have applied mask like below it working fine in Phaser.CANVAS mode but not run in Phaser.WEBGL

var imGroup = game.add.group();

var maskRect = game.add.graphics();




imGroup .mask = maskRect;


Also tried with alphaMask concept but there in no support group we need mask for group if you have any idea please share guys, that will really helpful.

var sourceImg = game.add.image(0, 0, 'pic');

var spr = game.add.sprite(64,32,null,null);


var bmd = game.make.bitmapData(sourceImg.width, sourceImg.height);

bmd.alphaMask(spr, 'mask');//here if we pass image key to first parameter its working but pass sprite with multiple image not working.



thanks in advance.

Link to comment
Share on other sites

  • 2 months later...

hi squilibob,
I meet the same problem, and I add the endFill after the draw, but it does not work. 
is that line make the mask work in your case?

here is my code 


var mask = this.game.add.graphics(0, 0);
mask.drawRect(this.popup.position.x - 530 / 2, this.popup.position.y - 150 / 2, 530, 150);
// mask.drawRect(this.popup.position.x, this.popup.position.y, 530, 150);
mask.anchor.set(0.5, 0.5);
return mask;
Link to comment
Share on other sites

  • 4 months later...

It is weird. I just came across the problem just yesterday.


If I used the game.stage.width / height to specify width and height of tilesprite in the same stage where a mask is used, the mask is canceled:

Game.add.tileSprite(0, 0, Game.stage.width, Game.stage.height, 'pattern_cloud_wave');

So I had to change as follows:

Game.add.tileSprite(0, 0, Game.width*2, Game.height*2, 'pattern_cloud_wave');


I have no idea why that is happening.


Link to comment
Share on other sites


  • Recently Browsing   0 members

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