Course pixel art 6

This is a translation of the publication "Les Forges Pixel Art Course" .



Part 1: The Right Tools

Part 2: Lines and curves

Part 3: Perspectives

Part 4: Shadow and light

Part 5: Color Palettes

Part 6: Smoothing

Part 7: Textures and Blur

Part 8: The World of Tiles

Part 6: Anti-aliasing

Where all your pixel art becomes beautiful. Or not. In fact, it depends on how terrible it was before.

1. Attack Plan

If you had the courage to read current video game news experts, you may have seen journalists complain about aliasing (aliasing) in some games. Aliasing is a phenomenon that occurs when an object in the foreground is in front of the background color, and the border between these objects and the background appears as a terrible, sharp edge. 3D games are the main victims of the phenomenon, since automatic smoothing algorithms require large computational costs. The example below is taken from the Final Fantasy III version of the Nintendo DS. The overlapping of the spectra is especially noticeable along the edges of black in clothing.



2D games are affected a little, because there is always the good old pixel-artovsky antialiasing (smoothing) to smooth out all these terrible contours, and smooth the transitions between objects and the background. In fact, no algorithms are required here. You just think about it beforehand. Think a little if you wish. We can distinguish three situations in which the aliasing phenomenon can occur, and we will act accordingly. First case: I have two different colors on my sprite, and the transition between these two colors is dramatic. In this case, we can apply anti-aliasing to soften transitions. The second case: the transition between one of my characters and the landscape behind him, all in the steps (help!). This can be difficult, so we divide it into two cases:

- If I was lucky: in fact, it means "I know the background color that will be shown on my sprite." In this case, you can smooth the edges of your sprite, to be sure that the transition between it and the landscape will not be too sharp.

- If I'm not very lucky: sometimes it is impossible, to predict the background color on which your sprite will be shown (for example, if the hero of the game goes through a lot of backgrounds). In this case, do not do anything. That's all. It will be stupid to change the edges of your sprite to smooth transitions, since you do not know what color the transition will be. Well, now you know why and when to use anti-aliasing ... it remains to figure out how to use it!

')

2. Attack!

Good. How do you make these wonderful smooth transitions between two colors? The answer is fairly obvious, just use one or more intermediate colors (for example, gray goes between white and black), known as buffer hues. All the subtleties in how you use them. In fact, if you are devoid of artistic flair, you probably want to do something like this:



Damn, it's just terrible. I hope that you remember as well as I do, not only that this so-called “method” takes a lot of time to implement, (in pixel art, it's tedious enough to do this), but it also does not solve our transition problem. In short, this is not enough; just do something with buffer hues to smooth. Smoothing is a modest technique, remember this. Now you know how you should not do (in terms of these nasty contours), see what is actually done. First pictures, then words.



Let me consider a small orange arc, violently colliding with a black background. On the left - the beast in its natural state. On the right - the successive stages of the smoothing process. We start by mentioning that the edges of the arc of a circle are a series of segments, the length of which is from 1 to 3 (this should remind you of the chapter on curves). We will take each segment separately, looking at the lines of the image, one by one. In the case of vertical segments (not here), we will look at the image columns, one after the other. On each line, soften the transition to both sides of the border, but note: if you deviate beyond the border of your two colors, you will destroy the original form (and become closer to the example of how not to do it). Your buffer shadows should not extend beyond the ends of the line segments above and below, this seems very difficult, but in fact it is not so, take a look at the last drawing, segments of 1 pixel can only take 2 pixels of smoothing, because if they flow into adjacent segments , they will create a very unpleasant effect, called “banding” (and close enough to the bad example above). Do not make an outline around your shape. If necessary, you can make some adjustments, if despite all the precautions, the object's figure is slightly distorted, but now this is not the case. Also be aware that it is not necessary to smooth segments of length 1, which are pretty good in and of themselves.

3. Complete victory!

The result is visible immediately (or you need glasses immediately). This is how these changes affected our orange circle, as well as our good old friend, the dragon.





Also note that I have muted a bit of ambient light on the dragon. As previously announced, ambient lighting is a technique that is used sparingly. I will end with a little technical note, for the most resourceful of you, which I don’t know where to stick: your shadow buffers do not have to be between smoothed colors. If you just want to optimize your palette, you can try using gray ones, because they have the ability to be used in ramps of different colors, and work on anti-aliasing.



This pixel art pattern was generously provided by Panda, who makes anti-aliasing much better for me (and you). Do not forget to wipe the saliva from the keyboard after viewing the details.



- From a translator into Russian: in some places with the author of the translation from French into English, there are some shoals with pictures, so I took some of the pictures from the original, and translated a couple of lines from French and corrected it for readability.