Sprite Edges

[FizzPow]

The edges of some sprites seem to have some extra dark lines that are not in the original.  I recall having this issue in the past with other sprite systems and it had something to do with using premultiply alpha to fix it.  Is there a way to address this with NGUI, I am not even sure if it's the same issue.

Here's a picture on the left of what this sprite looks like in Unity.  All four edges have extra darkness that shouldn't be there.  I have noticed this on most of my sprites, but some are a lot worse than others.  I am open to other solutions like changes in how we master the artwork if need be.

Edit: I am also using 8 pixel padding to be sure its not bleed from other sprites.



Thanks for any help!

[ArenMook]

When you zoom in on a sprite, bilinear filtering tries to enlarge the pixels, which means sampling neighbour pixels. It's always like that if you zoom in. If the sprite is pixel-perfect, the zooming does not happen, and neighbouring pixels don't get sampled.

[FizzPow]

Hmm, well I zoomed in to amplify the issue, but you can definitely still see it when it's not zoomed.

[ArenMook]

When it's pixel-perfect you shouldn't be able to.

That said, the drop shadow you have is obviously cropped. You might want to leave more space in Photoshop before exporting your image.

[FizzPow]

Yes, that may be a poor example, but it's not relegated to just this image by any means, and adding more space does not fix anything.  Also, many/most things cannot always be pixel-perfect because I am scaling and animating them.  I know 2D Toolkit doesn't exhibit this behavior, and I believe it's to do with the pre-multiplied alpha it uses.

If you want, I can try to make a sample project showing the same sprites on both engines?

[ArenMook]

It's only a matter of where your sprite is located. If it's next to say, a black sprite, then parts of the black sprite will bleed over to your sprite when you zoom it in, and it doesn't matter what shader you use -- pre-multiply or not.

In your original photoshop image leave some space around the sprite. When adding the sprite to the atlas, turn off "trim alpha". That's it.

[FizzPow]

I think you misunderstand the problem, this is happening on all edges of sprites, not just the "box" edges next to other sprites.  This happens when its the only sprite on the atlas.

[ArenMook]

Empty space in the atlas = black color, same thing. Try what I suggested -- leave at single pixel border around your sprite in Photoshop. Save it, re-add it to your atlas with "trim alpha" turned off.

[FizzPow]

I tried that and it made no difference.  There is plenty of alpha around the edges in my clouds for example.

Here's a video I took of animating one of my clouds against something bright, you can see the edges flickering on/off:
https://dl.dropbox.com/u/5111228/ngui-edges/ngui-edges/ngui-edges.html

[ArenMook]

The alpha around the inner part of the sprite is a completely different issue altogether. You need to use Solidify A filter by Flaming Pear on your image before exporting it in Photoshop. Search this forum for "Solidify" more information.

[FizzPow]

Ahhh yes, that does indeed fix the issue, thanks!  I am very glad to have a solution, but you may want to investigate how 2D Toolkit is handling this, because this adds another step to our process that would be nice to avoid.

[ArenMook]

The code on how to do it is inside NGUI, but is commented out for now.

[FizzPow]

You mention using Solidify A, but another post I read here:
http://answers.unity3d.com/questions/10302/messy-alpha-problem-white-around-edges.html

says to use Solidify B. Do you know what is best?

[ArenMook]

Probably either one works. I used A.

[FizzPow]

Yeah both work, I think B might be better since its targeted at the edges, but not sure without doing some more comparisons.

As for the commented code, is that something you plan to continue with at some point?