Photoshop Sprites With Alpha Channel

Member
Posts: 233
Joined: 2003.05
Post: #16
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.

"Pay no attention to that man behind the curtain." - Wizard of Oz
Quote this message in a reply
Moderator
Posts: 1,562
Joined: 2003.10
Post: #17
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.

- Alex Diener
Quote this message in a reply
Member
Posts: 156
Joined: 2002.11
Post: #18
It seems the grey halos are a bug on libpng or on the OS. From what I heard, Tiger solves this issue and PNGs are rendered correctly under OpenGL.
Quote this message in a reply
Member
Posts: 233
Joined: 2003.05
Post: #19
Where did you hear this? Just curious.

Unfortunately, it does nothing for us developers until everyone has Tiger... should only take 5-10 years.

"Pay no attention to that man behind the curtain." - Wizard of Oz
Quote this message in a reply
Member
Posts: 156
Joined: 2002.11
Post: #20
From a fellow developer who's using Tiger beta.
Quote this message in a reply
Moderator
Posts: 3,579
Joined: 2003.06
Post: #21
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!
Quote this message in a reply
Member
Posts: 156
Joined: 2002.11
Post: #22
I was using Preview as well. I'll check it out again. The files are sure smaller.
Quote this message in a reply
jarfish
Unregistered
 
Post: #23
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.

2. a. Select "Calculations..." from the "Image" menu.
b. Choose "Red" for Source 1 Channel. Ignore Source 2.
c. Choose "Normal" for the "Blending"
d. Choose "New Channel" for the Result.

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.

Hope that helps.
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Photoshop sizing and dpi Chamse 5 9,252 Apr 13, 2011 10:35 PM
Last Post: Anomalous Interactive
  Your favorite Photoshop tutorials Carlos Camacho 6 6,160 Nov 18, 2005 04:08 AM
Last Post: Fenris
  Photoshop transparency/alpha channels willman256 17 12,848 Oct 29, 2005 05:21 AM
Last Post: TomorrowPlusX
  Creating anti-aliased sprites in Photoshop Malarkey 9 11,240 Mar 7, 2005 09:52 PM
Last Post: arekkusu
  Generating Skybox Images in Photoshop Nick 9 14,371 Feb 24, 2005 08:15 AM
Last Post: jamie