richpixel Posted February 23, 2014 Share Posted February 23, 2014 Hello again I'm hoping to do an animated mask to simulate something like a 'scratch off' lottery ticket - so I want to basically draw lines, circles (or images) in a mask to act as the scratches. However there seem to be limitations with masking, and I'm wondering if there are any workarounds. Here is some code to create a mask and draw 3 circles: // add ticket background var bg = game.add.sprite(0, 0, 'bg'); // mask var mask = game.add.graphics(0, 0); mask.beginFill(0xFF3300); mask.drawCircle(100, 100, 50); mask.drawCircle(180, 110, 50); mask.drawCircle(240, 120, 50); mask.endFill(); bg.mask = mask;Here are the results... the 'bg' is just a green square for now. WebGL - note the cancellation of pixels at the intersections of the circles Canvas - It only draws one circle with the warning: "Pixi.js warning: masks in canvas can only mask using the first path in the graphics object" I didn't actually try using a Sprite as a mask. So it seems complex masks are not really possible right now - or are they? (I actually did find a way to do what I wanted using BitmapData, but still curious about masking). Link to comment Share on other sites More sharing options...
4ucai Posted February 23, 2014 Share Posted February 23, 2014 tried it, seems you are correct. I think if the result is the same in PIXI (which Phaser is using) then it is either that it is suppose to work this way or is a limitation. Link to comment Share on other sites More sharing options...
rich Posted February 23, 2014 Share Posted February 23, 2014 Canvas can only have one active mask at once as it uses context.clip to handle it. I think a better way to achieve what you need for this effect would be to use a BitmapData (or maybe a RenderTexture) and composite the effect yourself. Link to comment Share on other sites More sharing options...
richpixel Posted February 23, 2014 Author Share Posted February 23, 2014 Yes - thanks rich - I was able to achieve the effect using BitmapData and a globalCompositeOperation. Re: masking I also think this might be a limitation with PIXI that could be improved. I'm not sure about the WebGL side of things but in EaselJS (pure canvas) it allows you to draw more than 1 poly-path in a Shape (basically a Graphics object) that is used as a mask. Link to comment Share on other sites More sharing options...
rich Posted February 24, 2014 Share Posted February 24, 2014 You can have pretty complex paths as masks in canvas, they just don't translate to WebGL very well (if at all) where everything is bitmap based, which is probably why Pixi mask support is quite basic - to keep the parity. To be honest Canvas clip is so expensive I rarely use it anyway. It's in dire need of a speed boost (from a browser level) imho. Link to comment Share on other sites More sharing options...
rickbross Posted June 19, 2014 Share Posted June 19, 2014 Can you please explain further. I am facing the same problem. I need to replicate this scratch-off functionality. Here is my thought process:Create a group called scratches.Set the group as a mask.Each time the user drags on the active area, add that scratch to the collection.I am very new and can not find any tutorials on how to do this. Thank you! Link to comment Share on other sites More sharing options...
vitolipari Posted July 28, 2014 Share Posted July 28, 2014 Hi to everybody!Is it possible use a png image (with alpha channel ) as mask? Link to comment Share on other sites More sharing options...
lewster32 Posted July 28, 2014 Share Posted July 28, 2014 Yes: http://examples.phaser.io/_site/view_full.html?d=display&f=alpha+mask.js&t=alpha%20mask Link to comment Share on other sites More sharing options...
vitolipari Posted July 28, 2014 Share Posted July 28, 2014 Thank you! Link to comment Share on other sites More sharing options...
BattyMilk Posted February 3, 2015 Share Posted February 3, 2015 Yes - thanks rich - I was able to achieve the effect using BitmapData and a globalCompositeOperation. Re: masking I also think this might be a limitation with PIXI that could be improved. I'm not sure about the WebGL side of things but in EaselJS (pure canvas) it allows you to draw more than 1 poly-path in a Shape (basically a Graphics object) that is used as a mask. Would you care to share how you achieved this? I've got the effect using the below, however it's very heavy and slow as every time we "scratch", we have to create a new bitmapData and render a new image. Very heavy and virtually unusable on anything other than the desktop.var scratchState = {create: function(){ this.maskPoint = game.add.image(0,0,'mask'); this.bmd = game.add.bitmapData(game.width, game.height);this.bmd.addToWorld(); this.bmd.smoothed = false; game.input.addMoveCallback(this.scratch, this);},update: function(){ },scratch: function(pointer,x,y){if (pointer.isDown){if (this.activeMask){this.activeMask.destroy();}this.bmd.draw(this.maskPoint,x-50,y-50);this.mask = game.make.bitmapData(game.width, game.height);this.mask.alphaMask('background', this.bmd);this.activeMask = game.add.image(0,0,this.mask);}}} Link to comment Share on other sites More sharing options...
Recommended Posts