Mat Groves

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

Recommended Posts

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

 

masking.png

 

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!

 

 

 

Share this post


Link to post
Share on other sites

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();

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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 :

chrome.jpg

 

IE10:

ie.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :

chrome.jpg

 

IE10:

ie.jpg

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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! 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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? :)

Share this post


Link to post
Share on other sites

Hey!

 

I dont know if I can reopen this topic, but...  :unsure:
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?  B)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.