Jump to content

grainy/fuzzy/watery effect on moving scaled sprites


Recommended Posts

Hey, I'm working with a simple moving sprite (albeit large and being scaled down by pixi.)  I remember running into this effect with three.js sometimes, and I thought it had something to do with scale modes or antialiasing, but now I'm confused because I don't seem to be able to remedy the effect in pixi.  


You can take a look at it here: http://www.naomitraynor.com/


I was hoping someone could just visually inspect it (the moving image behind the rotating mask) and let me know what's going on or possibly a solution.  I've played with the values for scale modes and antialiasing quite a bit but it doesn't seem to help at all.  Of course, it's worse when you scale your browser to certain sizes...so I assume it is scale modes, but neither linear nor nearest seem to help.  Is it that this effect can't be removed in pixi?  Thanks!


I forgot to mention I'm viewing with Windows 10 on Chrome 47.

Link to comment
Share on other sites

Ok, I set the scaling back to 1x1 (100%, you can look at it by following the link in my earlier post again), but...I don't know, it still looks like it's there.  Does the image have to be a power of two to fix it no matter what?  Or are my eyes playing tricks on me at this point?  I can experiment with mipmapping, but at this point I could just as easily change the size of the image, but if the effect is still there at 100% then that won't help much...

Also thanks for taking a look at it.  It has helped me at least take a step forward.

Link to comment
Share on other sites

Ok I've set up a simpler example where it doesn't seem to be occurring: http://brokedrobot.com/resources/dev/masking/


I'll try to figure out what is causing it...it could be because I'm scaling the canvas I guess...or something like that...other than scaling the canvas...I'm not sure I'm doing anything differently.

edit: I've set up another one for testing: http://brokedrobot.com/resources/dev/masking2/ but I'm having a really hard time getting it to occur even after scaling the canvas and setting things like the renderer's resolution and antialias values...but I can keep comparing things til I find it.  It has to be something I'm doing.  I'll find it.

Link to comment
Share on other sites

I found what was causing it.  I was changing the scale of the container holding the masking sprite to match the window size (although looking at it now I don't think this was even necessary), so it seems strange that it causes it, or perhaps not, but this made me notice that the containers have no scaleMode...so I'm not sure, maybe this will cause some sort of issue where someone won't be able to do something because they'll need to scale a container, but for now I think I can work around it.  Thanks again.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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