Davide Posted July 25, 2019 Share Posted July 25, 2019 Hi, I'm doing a web configurator based on Pixi and Vuejs. I've used pixi v5 but for those not support Webgl and for some automatization (Puppeteer screenshot for example) I've prefer install pixi-legacy. My issue is about masking. I've got a Graphics (a rectangle with backround) and I apply to it a Sprite like mask. In Pixi v5 it works well but in pixi-legacy it doesn't. I use simply this.instance.mask = mask where instance is the ref of my new Graphics If you have some suggestion I'm glad! Thanks in advance and regards, Davide Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 it should work in pixi-legacy too. Please provide more information. Quote Link to comment Share on other sites More sharing options...
Davide Posted July 25, 2019 Author Share Posted July 25, 2019 Hi thanks for reply. Then more information: I've use Vue but I thinks It doesn't matter. My flow is: I create a news Graphic: instance () { return new Graphics() } then I've got an instance of the Graphic this.instance and I set some properties (fill is the HEX background of the mask, width and height are the sizes of the images) this.instance.beginFill(fill, 1) this.instance.drawRect(0, 0, this.width, this.height) this.instance.scale.set(1) when the Sprite is load I attach the Mask to the graphics this.instance.mask = mask Mask is the reference to the Sprite instance and the property isMask is correctly set to true. In Pixi v5 the mask is correctly applied instead in Pixi-legacy it show me the filled rectangle and not the filled mask shape. I hope you understand and thanks again, Davide Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 > when the Sprite is load I attach the Mask to the graphics Oh right, you cant use mask sprites on canvas2d. Only graphics masks can work with pixi-legacy CanvasRenderer. Its not a BUG , its just no one made implementation of sprite mask for it. We have many things like this one, the front is very big. Someone tried to solve this exact issue and even made PR 3 years ago , but it wasnt accepted i dont remember why. You are welcome to try! I think its possible and I think i can do that in 30 minutes or so, but I have too many things to do anyway, and others in pixijs team are even more busy. You have four options 1. implement it yourself, if you know canvas2d context good enough, I can tell where to look at 2. mask sprite with graphics and not the other way 3. tell me your actual problem and not supposed solution, maybe i can give you a workaround 4. Wait for me or someone else who can do that, in that case its completely random time with exponential distribution, no one can guarantee anything. 5. Donate to https://opencollective.com/pixijs and ask @Mat Groves to actually make this task a priority. We are going to implement bounty system in a month or two to make that option easier for people. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 I even found the notice: https://pixijs.download/dev/docs/PIXI.DisplayObject.html#mask , "At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask." And original PR: https://github.com/pixijs/pixi.js/pull/2650 , it existed for 1 year and wasnt solved. So, why do you need that exact mask? Can you do something else instead? Quote Link to comment Share on other sites More sharing options...
Davide Posted July 25, 2019 Author Share Posted July 25, 2019 Hi thanks again! Unfortunately my deadline doesn't let me to find a solution I use a Sprite because the shape of the mask is complex (we are talking about a bike frame). I thinks It is not replicable with a Graphics. Thanks for linking me where donate! Thanks and regards, Davide Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 Give me more info on the mask, perhaps there's a workaround . Sometimes people think that they need particular solution, but actual solution is easier. Quote Link to comment Share on other sites More sharing options...
Davide Posted July 25, 2019 Author Share Posted July 25, 2019 I cannot upload the image of a Mask because it return me and error /var/www/html/uploads/monthly_2019_07 could not be created. but I think I've not workaround fir do that. I use webgl and I block who doesn't support it. thanks in advance and regards, Davide Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 Sprite mask over graphics is very strange case, are you sure it cant be turned around? Or maybe blendModes? I solved the problem with them not so long ago. DST_IN is 5-th from the top, it looks like your case. UPD: of course it needs extra canvas/renderTexture to avoid erasing EVERYTHING ELSE. https://www.pixiplayground.com/#/edit/ekJ3GcU0461C9GCTYEmB2 Quote Link to comment Share on other sites More sharing options...
Davide Posted July 25, 2019 Author Share Posted July 25, 2019 4 minutes ago, ivan.popelyshev said: Give me more info on the mask, perhaps there's a workaround . Sometimes people think that they need particular solution, but actual solution is easier. I attach you a wetransfer link with the shape of one mask. https://we.tl/t-L9mET479y3 Sorry but I've say I cannot upload any images Thanks i advance and regards, Davide Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 "More info" doesnt mean same bicycle mask, it means show why do you need it. I know so many usages for a mask, i dont know which one is yours. Mask is very universal thing, but there are other solutions that are narrow. Maybe you think that its very obvious , but for me its not. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 this.instance.beginFill(fill, 1) this.instance.drawRect(0, 0, this.width, this.height) if you want just to fill that bicycle with color, use "sprite.tint" field. Quote Link to comment Share on other sites More sharing options...
Davide Posted July 25, 2019 Author Share Posted July 25, 2019 I've tried with CanvasTinter.tintMethod and it seems to works! I take this afternoon for trying better and after I notice you! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2019 Share Posted July 25, 2019 Welcome to the forums! Quote Link to comment Share on other sites More sharing options...
Davide Posted July 25, 2019 Author Share Posted July 25, 2019 Ok it definitively works! Great support, thanks again! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.