Hello, everyone!
So, do you know what anti-aliasing is?
Simply put, it's a technique that smooths out the jagged edges that appear on the outlines of images and video.
When you draw diagonal lines or curves, the edges can end up looking jagged — this is called "jaggies" (a staircase-like roughness). Anti-aliasing corrects those jagged edges and cleans up the overall appearance.
Game engines like Unity and Unreal Engine also come with built-in anti-aliasing features. It's a widely used technique, so if you're into gaming, you've probably come across the term at least once.
What I wanted to try this time was building my own anti-aliasing feature for 2D. My goal and reference point was a tool called OLM Smoother.
©IIS-P／ぽんのみち製作委員会 (Image sourced from the distribution page)
■ OLM Smoother v2 https://www.olm.co.jp/post/olm-smoother-v2
It's widely used in anime production and does a remarkably clean job of applying smoothing to line art.
Using this as my target, I set out to implement anti-aliasing.
There Are a Lot of Different Types of Anti-Aliasing
As it turns out, there are quite a few different types of anti-aliasing — SSAA, MSAA, FXAA, TAA, SMAA, and more, each with its own characteristics. I won't go into the details of each one here, but I tried out several of them to see which would work best for 2D.
After a lot of experimenting, I kept running into problems — lines coming out rough and choppy, or things getting too blurry. It just wasn't coming together the way I wanted.
Going through this process made me appreciate just how well-crafted OLM Smoother really is. It's seriously impressive!
I wasn't able to fully replicate it, but by working with an SMAA-based approach and doing a lot of tweaking, I managed to get decent results.
I'd love for the lines to come out a bit crisper, but for now, I'm satisfied that I was able to apply anti-aliasing to images!
A Quick Side Note
Here's a little something worth knowing about how anti-aliasing actually works.
Anti-aliasing smooths out jagged outlines, but it only works at the pixel level.
For example, if you draw a diagonal line and the jaggedness comes from how the pixels are arranged, anti-aliasing will smooth that out into a clean line.
However, if you've intentionally drawn a jagged diagonal line from the start (meaning the jaggedness is part of the drawing itself, not a result of pixel rendering), anti-aliasing won't have any effect.
It's easy to assume that applying anti-aliasing to pixel art will automatically make everything smooth, but anti-aliasing only affects pixel boundaries. This is a surprisingly easy point to misunderstand, so I thought it was worth mentioning.
Final Thoughts
I've successfully implemented an anti-aliasing feature in Shoost!
It probably won't come up all that often, but it's a necessary feature for anime-style compositing, so I'm glad to have it done. Lots more in development, so stay tuned!