Reverse Anti-Alaising
Lets now learn a variation of the Anti-alaising technique, which i like to call "Reverse
Anti-Alaising", or just "RevAA" for short. Anti-alaising
teaches you how to blend two colors together, or an object into its background.
RevAA is a bit different though, instead of trying to merge two objects smoothly,
RevAA is a technique that allows you to separate an object from its environment,
smoothly. Before we begin, let me try to preface its purpose and usefulness.
Let us assume that you dont know too much about color saturation techniques, and you
were trying to make a 2d, arcade style video game. In such games you typically
have backgrounds, made up of tiles, which typically (at least in a good background)
relies alot on AA to blend objects together to create a smooth environment, and
then there are game sprites, which are objects that you can interact with in some
way in game, or might serve to just be a supplemental background element, drawn
separately from your backgrounds. Let us assume that you want your game sprites
to look smooth, but at the same time you want your sprites to pop out against
the background, to increase their visibility. There are of course several solutions
to this, one of the most obvious would be to throw an outline around your sprite,
however this has the effect of "cartooning" your image. If you seek
a serious mood to your video games, this is not a sufficient answer.
If you were to try to smooth out your sprite's edges, a novice might be inclined
to simply use the blend tool to blur their sprites into whatever transparent background
value you are using, for example, 255,0,255, or the "hot pink". However,
your game will only make the actual pixels of 255,0,255 transparent, and because
you slowly blended your sprite colors into that background specifically, if you
were to place that sprite on a background with all blue hues (or any other hue
besides "hot pink"), instead of the sprite blending into its environment,
it would have pinkish pixels on its edge, making the sprite practically useless.
This is what i like to call "Bleeding".
Therefore AA is not an appropriate tool for sprite smoothing, as it causes an
undesired effect which is dependant on the background.
Ultimately, we want to make our sprite stand out, independently of the background. In otherwords,
no matter what environment the sprite is placed in, we want its visibility and
look to remain constant indefinitely. The answer to this is to create contrast
between the background, whatever it may be, and the sprite. Since you dont know
what the backgrounds might be, the easiest way to guarantee that your sprite will
stand out is to blend your sprite into a dark outline, which abruptly spearates
the sprite from your ambiguous transparent background value. Lets view how to
do this RevAA step by step then.
Starting out with a solid circle with a solid outline, we begin to buffer the inner contets of the circle with the outline.
• Now let us begin with a plain jane circle, and this time we are going to throw a black
outline around it. remember that we are not AA'ing the circle into the background,
so we are not going to cap the pixels as in the AA tutorial example.
Next, we are going to blend our light blue circle into our black pixel outline, and
we are going to do so using the AA technique. So in this step what we have done
is added a pixel buffer to cushion the transition of the black to light blue.
Repeating the previous step, a couple of times if necessary, we create a smooth blend between the outline and the inner contents of the circle. If you are shooting for a cartoony/cel shaded look, you do not have to do anything more.
• Next, pick a slightly lighter "buffer" tone than you did in the previous
step, and begin to AA the light blue into the darker outlines by filling in the
jagged regions of abrupt color change. After this step, depending on the darkness
of the color you chose on the inside, this amount of blending may suffice.
If you have a much lighter value in the center, you might want to use one more buffer
tone to blend with AA just a bit more to make it completely smooth. Note that
if you stop at this step, you have a perfectly viable exampe of RevAA. You can
stop here if youre going for a more cutesy, cartoon look in your sprite, or even
if you wish to keep your sprite realistic, but want to give it a cell shaded feel,
or a paper cut out feel, keep this dark outline around the complete perimeter
to complete the effect.
Furthermore, to remove the "black outline" appearance, we are going to lighten up the outline, except in instances where the edges of the outline touch the background.
• many people do not appreciate the "outlined" style with sprites, for whatever reason, in which case we are going to now lighten up the outline. Use a shade that ws darker than your orignal buffer tone, but not quite black, and go ahead and lighten up the outline in all areas except where there is an edge which touches the background. If your image has different hues, you will have to pick individual hue tones to do this effect. Therefore, if you have a sprite you must do in under 16 colors, keep this in mind, because it will count for a large portion of your palette entries. Therefore , it would be wise to use the same tones used to make the internal details of your sprite for the RevAA process as well, to conserve colors.
Now your object/sprite will have great visibility ontop of any background, while appearing smooth in nature.
• this point, we have completed RevAA on a circle. Now this circle should be not only visible ontop of every background, but also appear to be rather smooth in nature. To test this, i have placed the circle which had no RevAA and our doctored up circle ontop of the same multi colored background to compare their visibility. The results appear to be obvious, and even if you posted it ontop of a black background, because we AA'ed the inner contents of that sprite to a black outline anyways, your sprite will still maintain a smooth appearance, making it ultimately smooth and visible ontop of every background.