Making game sprite images with transparency channels in photoshop

L
Posted By
lode
Feb 17, 2004
Views
890
Replies
2
Status
Closed
Hello,

I’m developing a tile based game, I have basic ground tiles, and above these tiles can be objects. My game engine supports objects with an alpha channel, where the alpha channel is used for transparency: alphachannel 0 = completely invisible pixel
alphachannel 255 = opaque pixel
alphachannel between 0 and 255 means the object and the background tile below that are blended, like semi-transparency.

This is useful to give the objects soft edges, and for
semi-transparant fire, ghosts, and other nice looking effects.

This all works very nice in the C++ code of the game, but the problem is of course that I also need to make images that have such an alpha channel, and be able to make those images in an intuitive way!

I’d like to be able to do the following:

-make images of 48*48 pixels with 4 channels: Red, Green, Blue and Alpha.
-when making these images, the Erasor tool should make the alpha channel more and more invisible, the same way as it does with layers. -save this image in a file format that can be read by my game and supports these 4 channels (*.raw, *.tga are fine to me, I prefer *.raw).

But here’s my problem! If I make a new image in photoshop with a single background layer, and doubleclick on the layer, it becomes a real layer and the background is transparent. If I then use the erasor tool, I see the grey/white block pattern appear. This is how I’d like to edit an image with alpha channel, but whenever I save this to tga or raw with the "alpha channel" setting enabled, it does NOT use the alpha channel of that layer but just a black one! 🙁

If on the other hand I go to the "channels" tab and make a new channel, then it can be saved, but it’s very unintuitive to use that channel, because you can only edit it while the colors are invisible, etc…

Is there a way to do what I’d like to do with photoshop, or with another program?

Thanks!

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

E
edjh
Feb 17, 2004
Lode Vandevenne wrote:

Hello,

I’m developing a tile based game, I have basic ground tiles, and above these tiles can be objects. My game engine supports objects with an alpha channel, where the alpha channel is used for transparency: alphachannel 0 = completely invisible pixel
alphachannel 255 = opaque pixel
alphachannel between 0 and 255 means the object and the background tile below that are blended, like semi-transparency.

This is useful to give the objects soft edges, and for
semi-transparant fire, ghosts, and other nice looking effects.
This all works very nice in the C++ code of the game, but the problem is of course that I also need to make images that have such an alpha channel, and be able to make those images in an intuitive way!
I’d like to be able to do the following:

-make images of 48*48 pixels with 4 channels: Red, Green, Blue and Alpha.
-when making these images, the Erasor tool should make the alpha channel more and more invisible, the same way as it does with layers. -save this image in a file format that can be read by my game and supports these 4 channels (*.raw, *.tga are fine to me, I prefer *.raw).

But here’s my problem! If I make a new image in photoshop with a single background layer, and doubleclick on the layer, it becomes a real layer and the background is transparent. If I then use the erasor tool, I see the grey/white block pattern appear. This is how I’d like to edit an image with alpha channel, but whenever I save this to tga or raw with the "alpha channel" setting enabled, it does NOT use the alpha channel of that layer but just a black one! 🙁

If on the other hand I go to the "channels" tab and make a new channel, then it can be saved, but it’s very unintuitive to use that channel, because you can only edit it while the colors are invisible, etc…

Is there a way to do what I’d like to do with photoshop, or with another program?

Thanks!
I don’t know if this is what you are after, but you CAN edit the Alpha with the visibility turned on for the rest of the channels. Just make sure all the eyes are on and you are clicked on the Alpha. You will get a preview selection color that you can select yourself instead of the black. You can switch between that preview and the B&W by turning on/off visibility on the composite (RGB) channel.


Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html
Batman art for sale:
http://www.sover.net/~hannigan/batsale.html
T
tacitr
Feb 19, 2004
But here’s my problem! If I make a new image in photoshop with a single background layer, and doubleclick on the layer, it becomes a real layer and the background is transparent. If I then use the erasor tool, I see the grey/white block pattern appear. This is how I’d like to edit an image with alpha channel, but whenever I save this to tga or raw with the "alpha channel" setting enabled, it does NOT use the alpha channel of that layer but just a black one!

correct. You have not instructed Photoshop to make a channel based on transparency.

Here is what you do:

Step 1: Create your image on a layer just like you are doing now.

Step 2: This is what you are missing. When you are finished, go to Select->Load Selection->Layer Transparency. Then go to Select->Save Selection->New Channel. *NOW* you have the proper alpha channel!

Step 3: Save the image in TGA format. Now the alpha channel will be correct, because in Step 2, you created the alpha channel from the existing layer transparency.

Hope that helps…


Rude T-shirts for a rude age: http://www.villaintees.com Art, literature, shareware, polyamory, kink, and more:
http://www.xeromag.com/franklin.html

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections