trych Posted January 22, 2020 Share Posted January 22, 2020 Hi there, I'm totally new to pixi.js, but somehow managed to do my first steps. Now I am stuck with a problem however. I am trying to use pixi.js for an interactive slide show to blur the upcoming and previous images (as sprites). All works nicely, except that at the blur edge of my left blurred somehow some colors of my right blurred image seem to "spill" in. I am not sure how to describe it best. It seems to me that behind the scenes the images are merged somehow, then blurred all together and then cut off at a slightly incorrect position. I attached a screenshot that demonstrate the issue. Each of the sprite has its own filter (since I need to animate them independently) and the problem does not only happen between the two sprites shown in the image, but also between the other sprite pairs as well, once the slideshow moves on to the next slide. I have tried to change all blur filter settings, padding, kernelSize, quality, blur amount, nothing seems to fix the issue. Does anybody maybe know what the issue could be, and – more importantly, how I can fix it? My setup is quite complex, so I don't know what are the most relevant code snippets that would help you analyze the problem. My hope is that by the visuals of it one of you could make an educated guess about what's wrong. However, here is also the code I have in a gist, just in case:Code If there is any more information I can provide to help solve the problem, please let me know. Thanks! trych ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 23, 2020 Share Posted January 23, 2020 (edited) The fix was made in december and will appear in 5.2.1: https://github.com/pixijs/pixi.js/pull/6270 Two ways how to get it: Use "pixijs.download/master/pixi.js" (map file and typings are in the same folder) Look in the example https://www.pixiplayground.com/#/edit/kuhrhc4jG5QnRRtIfwGwk and copy the bottom part to your app (blurFilterPassApply and the hack) Welcome to the forums! Edited January 23, 2020 by ivan.popelyshev trych 1 Quote Link to comment Share on other sites More sharing options...
trych Posted January 23, 2020 Author Share Posted January 23, 2020 Hi ivan, thanks for your quick response! 14 hours ago, ivan.popelyshev said: Use "pixijs.download/master/pixi.js" (map file and typings are in the same folder) I'm afraid I don't quite understand. Where do I use/find this? On the Github page? Or is this an npm thing? And do I get this right that I will need to use this BlurFilterPass instead of BlurFilter then? Thank you! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 23, 2020 Share Posted January 23, 2020 its link to a file, "piijs.download" is a link to our CDN . Either <script src=> it, either you can just put that piece of code in your project. You dont have to change anything else. BlurFilterPass is internal thing that was patched in that PR. It will appear in npm as a version 5.2.1 i dont know when. trych 1 Quote Link to comment Share on other sites More sharing options...
trych Posted January 24, 2020 Author Share Posted January 24, 2020 I just now found the time to give this another try and just wanted to let you know: With the updated CDN file it works perfectly now! Thanks so much for your quick help, you saved my day! Great library and great support here in the forums. Thanks! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 29, 2020 Share Posted January 29, 2020 @trych 5.2.1 is here: https://github.com/pixijs/pixi.js/releases/tag/v5.2.1 trych 1 Quote Link to comment Share on other sites More sharing options...
trych Posted January 29, 2020 Author Share Posted January 29, 2020 Thanks for the info, will switch to the official release then. 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.