Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
macguffin

PIXI plugin tip

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

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. 

  • Like 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

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

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

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

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

Actually scratch that. That’s going to be the setting for the atlas resolution isn’t it. :?

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, 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

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

Anything that GSAP touches will have a "_gsTweenID" property, so you can filter it out that way.

  • Thanks 1
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

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

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

don't think it's been released yet. Take it from Jack's link, second post.

 

:)

 

  • Like 1
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

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

@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

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.
×