Jump to content
Search Community

pixelated scale-down GSAP & Pixi.js

processprocess 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

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