Where all your pixel art becomes beautiful. Or Not. Really, it depends how ugly it was before.

1. Plan of attack

If you have the courage to read today's specialist video game news, you've probably already seen journalists complaining about aliasing in some games. Aliasing is the phenomenon that occurs when an object in the foreground is in front of a background color, and the border between the object and the background comes out as an ugly, sharp edge. 3D games are the main victims of the phenomenon (see left: Meremanoid, a Playstation game which neither you nor I have ever heard of.), as automatic smoothing algorithms are expensive in terms of performance (for the original Playstation it was totally out of the question). 2D games are affected quite so badly because there is always good old pixel art anti aliasing to smooth out all those ugly contours and smooth transitions between objects and background. Indeed, here, no algorithm is required. You just have to think about it in advance. Think a little if you wish. We can distinguish three situations in which the aliasing phenomenon can occur, and we will take action accordingly. First case: I have two different colors on my sprite and the transition between the two colors is dramatic. In this case, we will be able to apply anti-aliasing at our leisure to soften the transition. Second case: the transition between one of my characters and the scenery behind him is all aliased (help!). Things can be complicated here, so we'll divide this into two cases: If I'm lucky: in fact "I'm lucky" means "I know the color of the background which will be shown on my sprite". In this case, you can anti-alias the edges of your sprite to make sure the transition with the scenery isn't too harsh. If I'm not so lucky: sometimes it's impossible to predict the color of the background on which your sprite will be displayed (eg, if the hero of your game goes through a variety of backgrounds). In these cases, DO NOTHING. That's all there is to it. It would be silly to change the edges of your sprite to smooth a transition, as you do not know what color you're transitioning to. Well, now you know why and when to use Anti-Aliasing ... all that remains is to find out how!

2. The attack!

Well. How do you make those famous smooth transitions between two colors? The answer is rather obvious, just use one or more intermediate colors (eg, gray to go between white and black), known as buffer shades. All the subtlety lies in how you use them. Indeed, if you're devoid of artistic sense, you'll probably want to do something like this:

Damn, that's just ugly. I hope that you remember as well as I do, not only does this but so-called "method" takes a long time to implement (the pixel art is quite tedious to do this) but it also does not solve our problem of transition. In short, it is not enough to do just anything with the buffer shades for anti-aliasing. Anti-aliasing is an UNASSUMING technique, keep that in mind. Now that you know what you must not do (in terms of these infamous contours), see what is actually done. First pictures, then words.

Let's take a look at a small arc of orange clashing violently with its dark gray background. On the left, the beast in its natural state. At right, the successive stages of the process of anti-aliasing. We begin by noting that the edge of the arc of a circle is a series of segments, they are one of length 1, there are then two of length 2 and two of length 3 (this should just remind you of the chapter on curves). We will take each segment separately, considering the lines of the image one after the other. In the case of vertical segments (ie not here), we consider the columns of the image one after the other. On each line, soften the transition on both sides of the border, BUT /!\ ATTENTION /!\: If you deviate past the "border" of your two colors, you will destroy the original form (and get closer to the example of what one should not do). Your buffer shades should not extend beyond the ends of segments of lines above and below, this seems very complicated but in fact not at all, look at the drawings at the last step, the segments of 1 pixel can receive only two pixels of AA because if they spill over to neighboring segments and create a very unpleasant effect called "banding" (and quite close to the example not to follow above). Do not make a "contour" around your shape. If necessary, we can make some adjustments if despite all the precautions taken by the AA slightly distorts the shape of the object but it was not the case here. Also, be aware that it is not necessary to anti-alias segments of length 1 (45°) which do fairly well on their own.

3. Total victory!

The results are immediately visible (or you immediately need a pair of glasses). Here's how this changes our orange circle, and also our good old friend the dragon.


Also note that I have calmed down a bit on the ambient lighting on the dragon. As previously announced, ambient lighting is a technique to be used sparingly. I'll finish with a small technical note for the most resourceful among you that I was not sure where to put: your shades buffers need not be the colors hue, saturation and brightness are between those of color smoothing. If you just want to optimize your pallet, you can try to exploit grays because they have the ability to be used in ramps of different colors and do wonders for anti-aliasing.
This piece of pixel art was generously provided by Panda, who controls anti-aliasing much better than me (and you too). Click on the image to view a larger version, and do not forget to wipe the drool off of your keyboard after observing the details.

Chapter 7: Textures and Dithering ›

Table of Contents