selvam Posted September 22, 2016 Share Posted September 22, 2016 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(); maskRect.beginFill(0xffffff,0); maskRect.drawRect(0,0,500,300); imgGroup.add(maskRect); 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); spr.addChild(sourceImg); 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. game.add.image(0,0,bmd); thanks in advance. Link to comment Share on other sites More sharing options...
squilibob Posted September 24, 2016 Share Posted September 24, 2016 are you using maskRect.endFill ? Link to comment Share on other sites More sharing options...
selvam Posted September 26, 2016 Author Share Posted September 26, 2016 thanks for your reply, yet not am using maskRect.endFill() will add this line Link to comment Share on other sites More sharing options...
scofieldly Posted December 19, 2016 Share Posted December 19, 2016 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.beginFill(0xffffff); 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); mask.endFill(); return mask; Link to comment Share on other sites More sharing options...
squilibob Posted December 21, 2016 Share Posted December 21, 2016 what happens if you try this var mask = this.game.add.graphics(0, 0); mask.beginFill(0xffffff); mask.drawRect(0, 0, 530, 150); mask.endFill(); return mask; Link to comment Share on other sites More sharing options...
Befive.Info Posted April 25, 2017 Share Posted April 25, 2017 Are you guys perhaps using tileSprite and seeing the problem on OSX Safari? Just a question. Link to comment Share on other sites More sharing options...
samme Posted April 26, 2017 Share Posted April 26, 2017 https://phaser.io/examples/v2/sprites/sprite-group-mask is working. Link to comment Share on other sites More sharing options...
Befive.Info Posted April 26, 2017 Share Posted April 26, 2017 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 More sharing options...
Recommended Posts