| |
HANDMADE ANTIALIASING
Author: Nemesis42
|
What's in a name? To be technical, anti-aliasing (AA) is a technique of rendering sub-pixel accuracy in raster displays. What the heck are you talking about!? Okay, first off, your screen is made up of pixels. A pixel (short for picture element) is a teeny tiny square on your screen. Ever get so close to a TV where you can see the red-green-blue dots? A pixel is made up of those. Unfortunately, they have a downside: it's hard to make curves and angles with square blocks. Every play with Legos? You know how difficult it is to make curves and whatnot. AA is a method of counteracting that, and getting smooth-looking pictures, despite those pesky pixels. Aliasing is the term for making things align to the pixel-grid. Therefore, anti-aliasing is the means of counter-acting that. Understand yet? No? Well, maybe it's better to show you than tell you.
 Courtesy of X-G.
As you can see on the left, the picture is extremely smooth. On the right, the picture is blocky. The left picture uses AA (to blend text and edges to look better at 1x), wheras the right picture does not use AA. At the large resolution, they both look kinda crappy (see those pixels now?), but at the small size, AA makes an already good picture that much better, and that is the whole purpose behind AA.
Squaring the circle... The basic premise of AA is rather simple. Please take a look at the following diagram:
Looks confusing? Let me explain. Say you have a circle and you want to render it to the screen. Well, at large sizes (where you have lots of blocks) this isn't much of a problem. But if you want to render a small circle to the screen. Well, since you have few blocks to work with, it won't come out looking anything like a circle. This is where AA comes in. Say we align this circle to a grid of pixels, as in the second picture. Each square represents a pixel. This is great, except that pixels have to be completely filled with only one color, and this creates problems without AA (as in picture 3). So what we do, is we find out how much each of those squares is filled with the circle, and fill it with a color corresponding to the percentage of each color in the square, as in picture 4. Squares that are filled entirely with a color are that color, but if they are partially filled with a color (black in this case), they are colored a shade of gray depending on how full of black they are. It looks wonderful when brought to it's proper size (the little circle all the way to the right).
Nothing in life is free. Well, this is great, but can only be applied in part to pixel art. Pixel art is very approximate, due to the size limitations and such that a pixel artist must work with. Well, another restriction is usually in the number of colors availible to the artist. In pixel art, you will rarely have 100 shades of gray to work with, but more realistically 1 or 2. So, you will have to approximate the blended colors with 1 or two shades. It's not perfect, but it looks tremendously better than any other way. If you look at X-G's Game Boy up above, you will notice that for his AA blending, he uses either 1 shade or 2 shades, depending on where he is working. Sometimes, 1 shade is plenty for AA, sometimes you will need more. (For example, X-G used two shades of AA on the text, but only one on the edge bordering the top and the right.) This is a very subjective area, but after you know the theory, experience is all that you need. And for practicing, I would suggest heading over to Pixelation and getting critique on your work there.
A word of warning... Keep in mind there are right ways and wrong ways to AA. The right way is doing it to create the illusion outlined above. The wrong way is adding a 50% gray shade around every pixel, as shown in the below diagram:
On the left, you see what many people new to the concept try to do: adding a single light shade to every pixel step. Not only is this wrong, but it looks like crap. In the center is a right, but not particularly good way of doing it: adding a shade only where it's needed. The curve is smoother, but the apparent pixel-steps are not eliminated. The final one is correct: I used two shades and it creates the illusion of a smooth curve. Notice that some steps have no AA at all, and some portions have multiple pixels of the same shade together. Single isolated pixels are not always the best way to go with AA, and I have found that often lines or groups of the same shade can complete the effect better. Just keep in mind what you're trying to acheive (and if you've forgotten what that is already, slap yourself* and go up to "Squaring the circle...", and promise you'll pay better attention next time.)
So, now you know the basic premise of AA. Unfortunately, however, I have only shown you how to do this is black and white. How do you do it in color? Well, exactly the same way you do it in black and white, only instead of checking for the percentage of black, you check the percentage of each color, and do a weighted average of all of the colors in that particular pixel. Have I lost you yet? No? Good. Oh wait, I did lose you? Okay. Time for another one of those nifty pictures:
Okay. Each square represents the colors to blend within a pixel. On the top, you see the colors we are trying to blend, and on the bottom we have the colors acheived by blending them. On the left, we have black and white (what I've shown you so far). After blending them we get a nice, modest shade of gray. To get it, we combined the percentage of white in the pixel with the percentage of black in the pixel. Same with the red + yellow = orange, and the teal + blue = funky sea blue. On the right we have a change of pace: 3 colors in a pixel. We treat it the exact same way, and get a bluish-purpley color after blending. It's really very simple. However, as I mentioned above (in the "Nothing in life is free" section... if you forgot again, grab a mallet, hit yourself in the face, learn the meaning of a promise, and read that section again), this is working with exacts. In general practice, you will never have an infinite array of colors to work with for your AA (not to mention that even if you did, it would take hours to calculate all of this). It's better just to guess a shade between the two or more you're trying to AA, and if that doesn't work, tweak it until it does. Brute force is a technique that works very well in pixel art: keep trying stuff until it eventually works.
Can we see an example? Of course. I will keep it simple here with grayscale, but know that this works with color as well (choose intermediate colors; if you are blending red and yellow, AA with orange).
Ah! Look, it's a singing Twizzy. Isn't she cute!? ^_^ ... ahem. Anyway, as you look at the zoomed in version, I arrowed the points that should be important to note. You will notice in some cases multiple pixels were used for AA (on her breast, in this case). Other times, I used darker shade to give less of an aliased effect. On the sleeves, you will notice that in some areas, I didn't AA at all. What was the decision behind this? Try everything, and see what works best. The "Undo" button is your best friend here. Try something, if it works, keep it. If not, hit undo. If you can't tell, flip undo/redo until you can decide. That's the best advice I can offer, besides practice practice practice.
Here is a semi-colored one, based on the picture from DDR Konamix. This one uses AA to show the body of the object. Without the AA in this case, many features would not even be noticable (for instance, the flares on her pants), or even retain the same shape (her breasts and hair, for example). Also notice how the AA was used on the arms and head. Remember, you are trying to eliminate the pixel grid here.
Go forth, my minions, into the world!!!Maybe that was a little over-dramatic. In any case, I hope you learned something from this. I suggest you practice these, and if you are a pixel artist wanting to improve, hit Pixelation and get some help from the folks over there. Remember, if you never try you will never get better, and so work at it! You will get it sooner or later, trust me.
|
|
|
