Share Posted October 14, 2017 Hi it might be worth mentioning resolution in your docs with regards to the pixi plugin as the pixi default settings often makes images look blurred: http://pixijs.download/release/docs/PIXI.filters.ColorMatrixFilter.html If you find that your images are blurry when adding a filter, a colour effect for example, it might help to change the filter's resolution. Not sure if you can do this directly with the plug-in but a quick hack like this might help. (Jack can the plugin change resolution?) TweenMax.to(PIXI_IMAGE, 0.25, { pixi: {brightness: 0.5}, onComplete: (): void => { PIXI_IMAGE.filters[0].resolution = 2; } }; The above example if for a single filter on an image. As you can see in the screenshot the first bell has its resolution set to 2 whilst the second is using the default of 1 Cheers 1 2 Link to comment Share on other sites More sharing options...
Share Posted October 17, 2017 Sure, I think we can accommodate that for ColorMatrixFilters. I updated it here - does this work well for you?: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 19, 2017 Works very well thank you 1 Link to comment Share on other sites More sharing options...
Share Posted October 21, 2017 The default settings for all Pixi plugins are set to optimize speed over quality. Next time I work with Pixi I'll put together a list of the settings that should controllable with the GSAP plugin. 2 Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 Ideally many would like this control over all the filters of course; I put in a mention that the filters might want to be removed from the container's filter array once complete if the value is under their null equivalent i.e. blur = 0. The example above also shows this resolution being set `onComplete` but I would have thought it should be set at the start of the tween? Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 8 minutes ago, Mark Elphinstone-Hoadley said: The example above also shows this resolution being set `onComplete` but I would have thought it should be set at the start of the tween? Probably, but I didn't write that. 8 minutes ago, Mark Elphinstone-Hoadley said: Ideally many would like this control over all the filters of course; I put in a mention that the filters might want to be removed from the container's filter array once complete if the value is under their null equivalent i.e. blur = 0. How would that work for something like the color matrix filter? Link to comment Share on other sites More sharing options...
Author Share Posted October 30, 2017 Hi tried onStart but it didn’t work as I think it was setting the resolution before the filter had been created. Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 Just now, macguffin said: Hi tried onStart but it didn’t work as I think it was setting the resolution before the filter had been created. Yeah I just gave that a go in hope but it doesn't seem to be a live property that can be set once the filter is initialised, rather annoyingly. 5 minutes ago, OSUblake said: How would that work for something like the color matrix filter? Good point - I was thinking for the standard stuff like saturation then that's simple enough but then what's on/off once that's done? I'd say just do it for the presets i.e. once saturation is 0 remove and if it's a custom one advise to manually remove the instance yourself. Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 8 minutes ago, OSUblake said: Probably, but I didn't write that. That was more a pointer for OP than yourself Link to comment Share on other sites More sharing options...
Author Share Posted October 30, 2017 Just wondering if you can change the resolution globally in pixi. Think you you might be able to do something like this PIXI.settings.RESOLUTION = 2; I’m not at my computer for a bit but will test when I get back as it might be a simpler solution to tackle it at source. Link to comment Share on other sites More sharing options...
Author Share Posted October 30, 2017 Actually scratch that. That’s going to be the setting for the atlas resolution isn’t it. Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 9 minutes ago, Mark Elphinstone-Hoadley said: Good point - I was thinking for the standard stuff like saturation then that's simple enough but then what's on/off once that's done? I'd say just do it for the presets i.e. once saturation is 0 remove and if it's a custom one advise to manually remove the instance yourself. Still doesn't seem like a good idea as you might have a hover animation changing the saturation from some value to 0. It needs some sort of explicit value, like null or false. Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 1 minute ago, macguffin said: Actually scratch that. That’s going to be the setting for the atlas resolution isn’t it. Yeah, that's more for like device pixel ratio. Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 1 minute ago, OSUblake said: Still doesn't seem like a good idea as you might have a hover animation changing the saturation from some value to 0. It needs some sort of explicit value, like null or false. Urgh... yes, that's right. Would there be a clearance property that someone might be able to use if they wanted to manually remove these? Someone might have 2 of their own filters added, so it would be good to access the ones that have been tweened and remove them at will. I guess someone could just perform an array diff or something though to get around it, so it's likely a code solution is better for this (rapidly becoming more) particular scenario. Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 Anything that GSAP touches will have a "_gsTweenID" property, so you can filter it out that way. 1 Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 8 minutes ago, OSUblake said: Still doesn't seem like a good idea as you might have a hover animation changing the saturation from some value to 0. It needs some sort of explicit value, like null or false. Would you likely go with null/false then? 2 minutes ago, OSUblake said: Anything that GSAP touches will have a "_gsTweenID" property, so you can filter it out that way. Very helpful, thank you Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 10 minutes ago, Mark Elphinstone-Hoadley said: Would you likely go with null/false then? Probably need to get @GreenSock to weigh in on that one to make sure it won't interfere with other stuff. Link to comment Share on other sites More sharing options...
Author Share Posted October 30, 2017 Hi just having a look another approach might be to incorporate PIXI.settings.FILTER_RESOLUTION; into the PixiPlugin PIXI.settings the plugin currently does this: if (v.resolution) { filter.resolution = v.resolution; } @GreenSock if it also did something like this then if the resolution wasn't set manually it could pick up the global resolution for the filter if (v.resolution) { filter.resolution =v.resolution; } else { filter.resolution = PIXI.settings.FILTER_RESOLUTION } Thanks Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 @macguffin Oh, I don't see that v.resolution in the plugin source on git? https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/PixiPlugin.js Link to comment Share on other sites More sharing options...
Author Share Posted October 30, 2017 don't think it's been released yet. Take it from Jack's link, second post. 1 Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 11 minutes ago, macguffin said: Hi just having a look another approach might be to incorporate PIXI.FILTER_RESOLUTION; Looks like that might be a future property? I don't know. I don't see it being used anywhere. https://github.com/pixijs/pixi.js/search?utf8=✓&q=FILTER_RESOLUTION&type= 1 Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 Actually, it looks like filters are set to the resolution in the settings. At least for now on line #86. http://pixijs.download/release/docs/core_renderers_webgl_filters_Filter.js.html /** * The resolution of the filter. Setting this to be lower will lower the quality but * increase the performance of the filter. * * @member {number} */ this.resolution = settings.RESOLUTION; But setting the RESOLUTION = 2 in Pixi's settings will double the number of pixels for other Pixi related stuff, like the size of your canvas if you're using autoResize. It might be better to just have plugin specific settings, like. PixiPlugin.resolution = 2; Link to comment Share on other sites More sharing options...
Author Share Posted October 30, 2017 My mistake I was using the old depreciated version PIXI.settings.FILTER_RESOLUTION = 2 I think if you just add this to your code it will set the default resolution of all filters. It looked to be working when I did a quick test Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 @OSUblake If that was the case then I would have expected your current plugin to work just with the default settings. So I guess that resolution is set the way @macguffin just mentioned. Looks sensible to me then to apply it that way in the plugin. Link to comment Share on other sites More sharing options...
Share Posted October 30, 2017 29 minutes ago, macguffin said: My mistake I was using the old depreciated version PIXI.settings.FILTER_RESOLUTION = 2 I think if you just add this to your code it will set the default resolution of all filters. It looked to be working when I did a quick test What version are you using? Can you post a demo of that? I just did a quick test logging out the resolution value of a filter, and changing FILTER_RESOLUTION has no effect. However, changing RESOLUTION does. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now