Analysis of an Alpha Channel

By Heather Castillo

Analysis of the Alpha Channel

By Heather Castillo
P Sprite has a yellow background.

The alpha channel is one of the most overlooked pieces of an object. Many object creators tend to let Transmogrifier handle them without messing with it themselves. This creates objects that really just don't look natural, because the dark gray edge becomes very noticeable.

WRONG: anti-aliased edges of the P sprite causes problems with image edges in the game.

Having several old pieces that I wanted to improve, I decided to use my Sweetheart Mauve Roses to demonstrate the creation of a proper alpha channel. In doing so, it will be important to examine the P sprite first.

Right: aliased edges of the P sprite will make your image look jagged in the image, but necessary to avoid a messy edged objects in the game.

The P sprite is recognizeable by the yellow background. When creating your image on the P sprite, you should try to avoid creating any blended edges, or anti-aliasing.

The image on the left has pixels that fade into the yellow, causing a smooth looking edge in the image, but a yellowish tint in the game. To the right is the best method for avoiding that problem, which is to create hard lines between the image and it's background. I use the pencil tool, which is found in photoshop by clicking on the line tool.

First step, aliased edges of the Alpha Channel caused your image to look jagged in the game.

There are several different methods to creating your alpha channel. If you have the use of layers, you can duplicate your image into a new layer, remove all of the yellow background and color the remaining part white.

Find the best way to accomplish the task then you can start the smoothing of your object. In Adobe Photoshop, I use the line tool with anti-aliasing on to smooth out the edges of my objects. Select black and go around the tips of the edges with your line tool to create a dithered or more gradient appearance to your alpha channel as seen to the right. This object is small, so the effects may not be as noticeable as it would on a larger object.

Right: aliased edges of the P sprite will make your image look jagged in the image, but necessary to avoid a messy edged objects in the game.

Zoom in to go around the edges. When you zoom out, you can view whether the image appears to be smooth or not. Smoothing out large objects can actually be more difficult if the lines are at a diagonal.

On two tiled objects, it's important to keep the edges that meet in the middle as a hard, true white; otherwise, you will have an ugly line through the center of your object.

I'm not going to cover z-buffers here, but you can keep the jagged edges with them and everything will be fine.

That is all you need to do to create a smooth object :) It may take a bit of trial and error, but you'll get the hang of it eventually.