Mat Groves 76 Report post Posted July 2, 2013 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! 2 benny! and tackle reacted to this Quote Share this post Link to post Share on other sites
enpu 685 Report post Posted July 2, 2013 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(); Quote Share this post Link to post Share on other sites
Mat Groves 76 Report post Posted July 2, 2013 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 Quote Share this post Link to post Share on other sites
bubamara 67 Report post Posted July 2, 2013 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: Quote Share this post Link to post Share on other sites
Ezelia 82 Report post Posted July 2, 2013 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. Quote Share this post Link to post Share on other sites
Mat Groves 76 Report post Posted July 2, 2013 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! Quote Share this post Link to post Share on other sites
Mat Groves 76 Report post Posted July 2, 2013 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. Quote Share this post Link to post Share on other sites
Ezelia 82 Report post Posted July 2, 2013 thank you Mat for precisions Quote Share this post Link to post Share on other sites
rich 2610 Report post Posted July 2, 2013 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. Quote Share this post Link to post Share on other sites
phreaknation 44 Report post Posted July 3, 2013 Does this allow for click through transparent areas? Quote Share this post Link to post Share on other sites
Mat Groves 76 Report post Posted July 3, 2013 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! Quote Share this post Link to post Share on other sites
Mat Groves 76 Report post Posted July 3, 2013 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. Quote Share this post Link to post Share on other sites
phreaknation 44 Report post Posted July 3, 2013 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 Quote Share this post Link to post Share on other sites
xerver 286 Report post Posted July 3, 2013 You can create a DisplayObjectContainer and all your sprites to it as children (1 sprite for each texture). Quote Share this post Link to post Share on other sites
phreaknation 44 Report post Posted July 3, 2013 Awesome thank you. As I said still very new. Quote Share this post Link to post Share on other sites
hima 4 Report post Posted July 4, 2013 Pixi.js is just getting more and more awesome everyday! Thank you for your work <3 Quote Share this post Link to post Share on other sites
ipop 0 Report post Posted July 9, 2013 Dying to use this .. when do you think ejecta / cocoon will be supported? Quote Share this post Link to post Share on other sites
enpu 685 Report post Posted July 9, 2013 Ejecta is already supported with ImpactPixi.Though its only Canvas, not WebGL. Quote Share this post Link to post Share on other sites
ipop 0 Report post Posted July 9, 2013 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? Quote Share this post Link to post Share on other sites
ipop 0 Report post Posted July 9, 2013 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 :-) Quote Share this post Link to post Share on other sites
enpu 685 Report post Posted July 22, 2013 does Pixi support multiple masks? I tried to do split screen game with two masks, but can't get it to work Quote Share this post Link to post Share on other sites
xerver 286 Report post Posted July 22, 2013 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. Quote Share this post Link to post Share on other sites
Gorsh 0 Report post Posted July 27, 2013 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? Quote Share this post Link to post Share on other sites
Mr_Cutia 0 Report post Posted September 3, 2013 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? Quote Share this post Link to post Share on other sites
Ezelia 82 Report post Posted September 3, 2013 update your graphic card drivers if it don't solve the problem disable graphic card/hardware acceleration blacklist on Chrome and Firefox Quote Share this post Link to post Share on other sites