Jump to content
GreenSock

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

pixelated scale-down GSAP & Pixi.js

Recommended Posts

I'm getting pixelation when using pixi.js sprites with gsap.

 

I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them.

 

in the codepen example:

pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down

domBug on right is DOM & gsap and edges are smooth no matter the scale.

 

What am I missing here? 

 

Thanks!

 

 

 

See the Pen EmKqrG by philipbell (@philipbell) on CodePen

Link to post
Share on other sites

I'm not very familiar with Pixi, but that sure sounds/looks like something that you'd probably want to ask the pixi folks. OSUblake is really good with it too, so he may chime in here. 

 

Oh, and feel free to kick the tires of this PixiPlugin (the one you're using is from another developer and has some issues with overwriting): 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js

 

We're considering putting that in the next official GSAP release. Please let us know if it works well for you. Here's the post where I talk about the improvements this plugin makes: https://greensock.com/forums/topic/16263-staggerto-on-master-timeline-with-nested-tweenmax/?p=71686 (though none of this has anything to do with the blurriness issue you originally brought up)

  • Like 1
Link to post
Share on other sites

Thanks Jack!

 

I implemented your plugin and it appears to be running a little faster. 

 

It's also helpful to see how you're re-factoring the pixi plugin. 

 

the pixelation is still an issue but this was a big help for other things.

 

Thank you!

  • Like 1
Link to post
Share on other sites

How scaling behaves in Pixi is kind of in the hands of the user as a lot it of will be determined by the type of textures you are using. Pixi does linear scaling by default. However, bicubic scaling will be done on the GPU if you're using WebGL and the base texture is a power of 2 in size, 16, 32, 64, 128, 256, 512, etc. That will enable mipmaps, which can speed things up and reduce artifacts.

 

Notice the difference here. The first butterfly is 200x200. The second butterfly is 256x256. And the third butterfly is a DOM element.

 

See the Pen PmGBJe by osublake (@osublake) on CodePen

 

 

  • Like 7
Link to post
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.

×