Jump to content
Search Community

PIXI plugin tip

macguffin test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

pixihack.png

  • Like 1
  • Thanks 2
Link to comment
Share on other sites

  • 2 weeks later...

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

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

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

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...