Best method for dealing with rough sprite edges due to rotation?

Question

A simple scenario:

64x128 sprite, nothing fancy, imported with Point filtering and set to true color. The game object it's applied to also has a material with Pixel Snap. The orthographic camera is set to the appropriate size for 1:1 pixel/unit ratio, which is done automatically through my own code determined by the resolution.

Now, sprites are perfectly crisp, pure pixel perfection and works as intended. The only issue is if any of these sprites gameobject's are rotated, causing the "jagged" and "rough" edges of what would otherwise be a straight line. Now, this is solved if the line is static and anti-aliasing is built into the art itself by the artist, but there's no point to this if you rotate say, a rectangle/square within the engine, you can't "bake" anti-aliasing into it since the rotation is happening in real-time, and the "straight line" is now at a different angle.

The obvious solution to this, and what it was designed for, is using Bilinear filtering, which solves the issue, but infamously detracts from the pixel-perfection look one wants.

To demonstrate the scenario better, here's a visual example. The sprite is not detailed so with Bilinear it won't look blurry (but would with say, a character which has details), but this demonstrates the "jaggy" issue of the black lines, which is what I want to emphasize the issue of.

a) Point filtering. Good for pixel perfection, but causes this whole issue when rotated.

alt text

b) Bilinear filtering. Obviously designed for the above issue, but eliminates the pixel perfection because of the overall "blur" of the sprite.

alt text

So what is the best way with dealing this then, if you still want to retain pixel perfect/clarity, and rotate it within the game? Are there any post-processing effects suitable? I've attempted writing a shader or two but none have helped much. With 3D, since it's polygons, we can use techniques such as anti-aliasing within the engine. Is there a similar way to achieve it with this sort of art?

Any insight/help is appreciated.

Answer 1

Answer by Chmyke · Apr 16, 2015 at 06:42 PM

I have exactly the same problem, and it is extremely disturbing.

I found a trick to reduce the stairs effect but I do not think you'll like this solution ...

The trick is to increase the resolution of your texture and use the Bilinear filter mode with Anisio of level 1. alt text

You must multiply the resolution of your texture with an editing software, multiply through the inspector will be not enough.

By increasing the resolution of your texture, the blur effect cause by bilinear filtering mwill be less visible and pixels looks more perfect, (if it is still visible increase again) and therefore the staircase effect disappear.

There are two disadvantages with this trick:

you must double the size of your textures
That because of the Bilinear filter mode, the angles of your png will be rounded and it is not nice.

I am looking desperately a real alternative. I lost too much time on this problem. A post-processing effect for that kind of problem will be wonderful.

texturex2.jpg (200.7 kB)

0 Show 2 · Share

Tepei · Apr 16, 2015 at 07:37 PM 1

Share

Did you also try the antialiasing in Quality Setting or in post effect ? Will also blur a little but maybe give better..

http://docs.unity3d.com/Manual/class-QualitySettings.html

http://docs.unity3d.com/Manual/script-Antialiasing.html

Chmyke · Apr 17, 2015 at 12:48 AM 0

Share

Hello Tepei,

Thanks for your answer!

Yes I tried the Antialiasing effect, SSAA, FSAA3 console(with all kind of settings), FXAA1 preset A, FXAA1 preset B, SSAA, DLAA (sharp/unSharp)... And nothing good came out.

Maybe the NFAA is good but I got this warning and I don't know why.

alt text

All with Anti Aliasing at 8X multi sampling.

But I have got the least worst result using the SSAA Effect.

Without Antialiasing (click on the image to see the gif)

With SSAA

Do you see, how this texture don't have the stair case effect?

alt text

It's because I multiply it by two and use bilinear, the other texture not. And i don't want do that to the other textures because they are PNG and I don't want have round angles where there the alpha starts...

I use a Legacy Vertex lit render, that maybe have an impact, I don't know.

Or Maybe it's because my do testing in the Game view, not in the build.exe?

I also tried to add blur and it will be maybe a part of the solution because it's help a little, but the normal bur and the blur optimized are really too strong. Do you thing I must to continue in that way and create a custom softer bur?

Anyway Thanks a lot for your reply I feel a bit less desperate right now...

module-base-before.jpg (31.9 kB)

warning.jpg (48.3 kB)

Best method for dealing with rough sprite edges due to rotation?

1 Reply

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions