- Home /
Best method for dealing with rough sprite edges due to rotation?
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.
b) Bilinear filtering. Obviously designed for the above issue, but eliminates the pixel perfection because of the overall "blur" of the sprite.
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.
Can you show an example of a game (or anything) that has what you're looking for? $$anonymous$$y experience with rotated sprites is yours, that either they're anti-jagged or they're jagged. I haven't been on the lookout for anything else so I could have simply not noticed it.
I know that some SNES/Genesis games used sprite rotation and it always looked funky like your first gif so I just always assumed that pixel perfect = jagging.
Unfortunately nothing comes to immediate memory of a 2D game that does rotation of a sprite where this may occur, but I do believe it may be a general issue faced by everyone who does, since I've tried it in my own 2D engine (which isn't any good at all), and tried it in Unity and Polycode, and same effect.
I was wondering if perhaps anyone with a deeper knowledge of Unity that may have come across a post-processing effect they apply, but even that in general (not related to Unity) has been fruitless in results.
I'm lead to believe this is currently the nature of hardware, also due to the individual pixels on the monitor that cannot fill "half" a pixel theoretically which can happen when the overall sprite is rotated, since the entire pixel needs to be filled, resulting in the jagged edges. I also believe when doing some research the way directx handles things exaggerates this issue with half-pixel/half-texel offsets, pixel coordinates, etc, which seems to be a known oddity in it. Not sure if it truly exaggerates it, that's based off speculation. Here's a link about that: http://drilian.com/2008/11/25/understanding-half-pixel-and-half-texel-offsets/
But yeah, this is an issue faced by many, some don't solve it at all, but I'm wondering if there is any hacky or post-processing effect one can apply overall that may alleviate it. All my research and implementations have been fruitless, so putting it out there if someone may know something.
Are you asking how to make the lines not appear jagged without blurring them? Because blurring them is how you make them not appear jagged. There's not another way.
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.
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.
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/$$anonymous$$anual/class-QualitySettings.html
http://docs.unity3d.com/$$anonymous$$anual/script-Antialiasing.html
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.
$$anonymous$$aybe the NFAA is good but I got this warning and I don't know why.
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?
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 $$anonymous$$aybe 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...