Pixi.js Now with masking! (webGL and canvas)

[Mat Groves 76]

Hello everyone! Thought you might like to know I just added masking to pixi.js

 

 

To implement it we made use of the Stencil buffer for webGL and the clip() function for canvas. 

 

You can find out more here: http://www.goodboydigital.com/pixi-js-brings-canvas-and-webgl-masking/

 

Hope you find it useful!

 

 

 

[enpu 686]

Great job Mat!

 

I think there is typo in the example.

 

myMask.fillStyle = 0xFF0000;myMask.drawCircle(0, 0, 300);

that is not working, but this is:

 

myMask.beginFill();myMask.drawCircle(0, 0, 300);myMask.endFill();

[Mat Groves 76]

Great job Mat!

 

I think there is typo in the example.

 

myMask.fillStyle = 0xFF0000;myMask.drawCircle(0, 0, 300);

that is not working, but this is:

 

myMask.beginFill();myMask.drawCircle(0, 0, 300);myMask.endFill();

 

nice one! updated the code

[bubamara 67]

Hi,

 

great work as usual!

 

I found little differences between Chrome (webgl renderer) and IE10 (canvas renderer). Notice border and fill around mask in IE ...

Don't know if it is known issue or not, but all non-webgl browsers behave same like IE10 and all webgl browsers are rendering it like Chrome

 

Chrome :

 

IE10:

[Ezelia 82]

nice update !
I have a question : does masking only draws the unmasked area ? or draw everything and mask the hidden area ?

I'm asking that to know if I can use it as peformance optimisation to only draw the current viewport in scrolling scènes.

[Mat Groves 76]

Hi,

 

great work as usual!

 

I found little differences between Chrome (webgl renderer) and IE10 (canvas renderer). Notice border and fill around mask in IE ...

Don't know if it is known issue or not, but all non-webgl browsers behave same like IE10 and all webgl browsers are rendering it like Chrome

 

Chrome :

 

IE10:

 

Ah yes! Thanks for that, I forgot to switch the shape back on for webGL rendering. Good catch!

[Mat Groves 76]

nice update !

I have a question : does masking only draws the unmasked area ? or draw everything and mask the hidden area ?

I'm asking that to know if I can use it as peformance optimisation to only draw the current viewport in scrolling scènes.

 

Good question! Masking works pretty much exactly like flash. So there is no optimisations, the mask simply clips stuff out. No culling is performed.

[Ezelia 82]

thank you Mat for precisions

[rich 2612]

Excellent stuff as usual Mat

 

Be wary of using this heavily in mobile browser games though, lots of devices can't handle clip() very well, if at all (Kindle Fire HD is one such example). On desktop it's a walk in the park of course.

[phreaknation 44]

Does this allow for click through transparent areas?

[Mat Groves 76]

Excellent stuff as usual Mat

 

Be wary of using this heavily in mobile browser games though, lots of devices can't handle clip() very well, if at all (Kindle Fire HD is one such example). On desktop it's a walk in the park of course.

 

Thanks Rich, Great advice too! 

[Mat Groves 76]

Does this allow for click through transparent areas?

 

Thats a good point! at the moment masking has no impact on the interactivity of objects it only deals with it in a visual sense. Even if items are masked they are still be clicked on. I will make sure to add this to my todo list though.

[phreaknation 44]

One other question. Can a sprite have multiple textures? Lets say I want a sprite to have a background layer, then an optional layer then an in between layer and then another optional layer? The layers themselves wont change except for the optional layers(actually four optional layers.) I basically have an isometric sprite that will have four sides effected depending on various variables for that sprite. This would also help with tilemaps to assign multiple textures to one sprite. This would be good to be able to hide and show layers on a sprite so that it would be easy to update one sprite rather then keep track of each layer of sprites(which could become very system intensive)

 

I dont know if there is a way to group textures or group sprites yet as I am fairly new to pixi

[xerver 286]

You can create a  DisplayObjectContainer and all your sprites to it as children (1 sprite for each texture).

[phreaknation 44]

Awesome thank you. As I said still very new.

[hima 4]

Pixi.js is just getting more and more awesome everyday! Thank you for your work <3

[ipop 0]

Dying to use this .. when do you think ejecta / cocoon will be supported?

[enpu 686]

Ejecta is already supported with ImpactPixi.

Though its only Canvas, not WebGL.

[ipop 0]

Ejecta is already supported with ImpactPixi.

Though its only Canvas, not WebGL.

 

 

can you let the devs know what changes you made to get it to run on ejecta?

[ipop 0]

can you let the devs know what changes you made to get it to run on ejecta?

 

going mobile native without webgl kinda defeats the point :-)

[enpu 686]

does Pixi support multiple masks?

 

I tried to do split screen game with two masks, but can't get it to work

[xerver 286]

does Pixi support multiple masks?

 

I tried to do split screen game with two masks, but can't get it to work

 

I'm pretty sure only one, due to the canvas limitation of only allowing one "clip" operation.

[Gorsh 0]

Is the mask supposed to add some kind of color overlay depending on its fill style?

Say, in the code from the example with panda:

thing.lineStyle(5, 0x16f1ff, 1);thing.beginFill(0x8bc5ff, 0.4);thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);

I thought that if I change the fill color panda would change it color, but it does not. What am I doing wrong?

[Mr_Cutia 0]

Hey!

 

I dont know if I can reopen this topic, but... 

I'm try to use PIXI.autoDetectRenderer with a mask in a spine object, and it's not working in Chrome and Firefox, but working in IE10. If I set the spine.mask nothing is rendering.

 

If I force PIXI.CanvasRenderer, in all browser it's will working... why? 

[Ezelia 82]

update your graphic card drivers if it don't solve the problem disable graphic card/hardware acceleration blacklist on Chrome and Firefox