Photoshop Sprites With Alpha Channel

Be advised that if you use PNG and transparency, my experience is that you will get halos around your images using OpenGL. It will look like a thin gray semi transparent outline around your images. In some cases it's very ugly.

To get around this, I add a stroke effect to the layer with an appropriate color using the outside setting 3 pixels wide (mileage may vary) and 1% opacity. So far, it has worked like a charm except for cases where I have a single texture with multiple "sprites" that are too close to eachother.

I'm just guessing, but I think the problem is that OpenGL looks to the surrounding RGB values on the outside of what it uses for it's mask and unfortunately a fully transparent pixel is recorded with no RGB values (or I think neutral gray?)

PNG's don't support masks, as far as I know, unless you have a second set of files that are masks and load them accordingly so this is the only good solution I've found for working with them.

Does it seem stupid to anyone else that Photoshop uses PERCENTAGES for the transparency value which should be a range between 0 and 255? Because the 1% edge this technique produces is sometimes just barely perceptible, I'm thinking of converting all tranparent pixels below some value to 0 or 1 when I load the image, as a test.

aaronsullivan Wrote:Be advised that if you use PNG and transparency, my experience is that you will get halos around your images using OpenGL. It will look like a thin gray semi transparent outline around your images. In some cases it's very ugly.

This would most likely be remedied by using premultiplied alpha. It's not a problem with the PNG itself; it's a problem with how the pixel values are interpolated when the image is minified. Keith or Arekkusu are better at explaining it than I am... I'm sure there are plenty of forum threads where they've already done so for another poster.

I've had this same problem with the "halos". I've determined that it's just plain garbage from Photoshop, nothing to do with OpenGL. I do my conversions in Preview now and the halos magically disappear and the file is somehow magically much smaller as well. P-Shop sucks with PNGs. Look away! Look away!

In order to export four channel (RGBA) images from Photoshop for use with OpenGL without the halo effect, perform the following operations within Photoshop. This is pretty tedious, so you might want to record it as an action.

1. Begin with an image layer that is transparent where you want it to be. You should be see the light gray checkerboard pattern in the background.

3. Repeat step 2 three more times, except choose "Green", "Blue" and the "Transparency" for the Source 1 Channel.

4. In the "Channels" palette, delete the Red, Green, and Blue channels. For some reason, you have to do each of these separately. You should be left with 4 channels, Alpha1 through Alpha 4.

5. Change the Image Mode from "Multichannel" to RGB. (If you're recording an Action, stop recording after this step.)

6. Save the image as Photoshop RAW file or TIFF file, being sure to include the alpha channel.

This is all necessary because Photoshop pre-multiplies all of the channels within a layer by the alpha (transparency) for that layer. This causes a halo effect within OpenGL because you will be blending a color that has already been blended with a background color, usually white.