Jump to content

Masking Issues


richpixel
 Share

Recommended Posts

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.png

WebGL - note the cancellation of pixels at the intersections of the circles

 

canvas.png

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

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

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

  • 3 months later...

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

  • 1 month later...
  • 6 months later...

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

 Share

  • Recently Browsing   0 members

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