Semi-Transparency (dither)
Welcome student. Today we will cover a very basic concept which can come in real handy
if you are working with low end devices or if you just plan on using oldschool techniques
instead of relying on alpha transparencies.
Back in the old console days, the concept of alpha blending was unheard of, let alone supported
by such hardware. Developers had to come up with a way to display semi-transparency within a
certain sprite or visual overlay so that the objects behind the occlusive graphic could become
at least partially visible. Well this might not have been necessary, but it must have been a nice
trick to implement to add some visual spice.
Sprites at the time relied on a single transparent index that was set aside to purposely not be
displayed on screen. The concept to dither this transparent index into an image/graphic should
be a natural solution to allow something to become semi-transparent.
That is exactly what we are going to explore in this tutorial. It should be said that the smaller
the image/sprite that you would like to apply this technique to, the less effective it becomes, as
a smaller canvas real-estate would demand that an individual pixel's role be more important.
Meet our test subject, Djin-na. You can call him 'jina' for short I suppose.
• Djin-na has volunteered to be our test subject for this demonstration. By nature, he is of an ethereal nature, as he is a wind-spirit who does not quite dwell on this plane of existence, but rather the ethereal plane. His visage is semi-transparent by nature. Heres the problem, however. We dont have any alpha channels to set transparency. How do we fake this with a simple .gif file which saves things as with an indexed palette of no more than 256 colors?
Here we use two different dither patterns to overlay ontop of jina, one a '1/2' pattern, the other a '1/4' pattern.
• To start, let us make a dithered tile with a simple pattern. It matters not what color
you use, as long as you dont use that color in the image you wish to apply a semi-transparency towards.
Once this is done, overlay this tile ontop of the desired image
This particular example illustrates two different patterns, the 'on-off' or '1/2' dither pattern, and
a '1/4' pattern. This simply describes the frequency of the color in question within the dither pattern.
(for more on dithering, see st0ven's tutorial here ). We then simply take
this pattern and tile it on top of our sprite like so.
Fill in all the surrounding pixels with the same color that you used to dither and set that index as the transparent index color. This is the result
• After you have overlain this pattern ontop of your image, fill the background color you used
for your original image to the same color you used as the dither pattern, which in this example was
a bright yellow.
Once you have done so, compress/flatten the layers and palettize the image (ctrl+shift+2 or 3 w/ PSP),
and set that color/index (yellow in this example) to be viewed as transparent. The result is a slightly
transparent image. Your level of visibility varies inversely with the frequency of 'transparency pixels'
you use in your dither pattern. The '1/2' frequency dither pattern seems to yield the most balanced
results for most cases.
Overlaying jina on st0ven... (in a non-sexual way of course), you can view the visibility that each pattern has yielded
• To test our visibility, lets stick st0ven behind the ethereal jina. You can clearly
see that the '1/2' pattern gives more visibility behind the image than the '1/4' frequency
dither. If you used something with a pattern frequency greater than 1/2, you will find that
you will be able to see more clearly 'through' the image/sprite in question.
This ends our dither transparency tutorial. It was my pleasure to hold your attention this long.
Please check for more lessons from me soon.