Ok, like ray said, it depends on the program you're using. In theory, you want a 32bit image: 24 bits of color data, 8 bits of alpha. If you save it as a "PNG-8" I imagine that's a palletized 8bit (256-color) image, not unlike a Gif. A "PNG-24" with an alpha channel is probably what's desired.

Now, to save a PNG with alpha in photoshop you need to take your layer, cut out whatever you want to be "see through", set the opacity as desired, and remove/disable the background layer. Then you should have your image, with desired alpha, floating over the standard photoshop checkered background. DO NOT FLATTEN, at this point, save your 32bit RGB layer-with-no-background directly to a PNG. It should then have alpha.

Like ray says though, if you reload it, and then try to resave it, it'll probably muck things up. So keep around a PSD of your unsaved PNG to use to make changes. Different versions of photoshop can also screw things up differently. We went through an exciting period in the Photoshop 5->6 era when TGAs started saving differently, and treating alpha differently. For our production game, I use CS2 (9) and have no information on compatability of previous versions.

Ray uses Paint Shop Pro mostly, which used to have a free download trial version (although it may not anymore), and can make alphas through a completely different process. I imagine the GIMP can do it correctly too, but I have no idea how. Good luck!

Yeah, the GIMP does a good job with transparency.

Ok Inc, see that's what I thought you meant. But for some reason Photoshop is screwing it up. Regardless, I found a workaround using Illustrator instead.

But!

I can't get any real gradations in transparency. Its either fully transparent, or fully opaque.

To illustrate my point:

This is my hud. I've replaced the power bars. The white lines on the left and right are powerbar _left/right_bg.png. The blue ones in the middle are powerbar_left/right.png. I've left out hud_newpowerbars.png (the one with both the left and right images) simply because I haven't figured out what it does yet (maybe this is the problem).



Here is the powerbar_left_bg.png file that it is using. Note that there is a clear gradation of transparency in the file:



And the powerbar_left.png. Same thing, several levels of gradation:



So, is something wrong? Or does the UI simply not handle different levels of transparency in one file? And what exactly does hud_newpowerbars.png do?

The problem is that Ray is now using pre-multiplied alpha. What that means is that partly-transparent pixels need to be blended with black in the color layer of the image. It's different from how PNGs with alpha channels are ordinarily rendered.

Essentially what's happening is that at the top of your image, your bars are completely transparent but still fully illuminated. You should be able to 'see through' the top of the blue one. The white one is already fully white so you won't be able to see anything.

What I did now was to put a b/w version of the image in the lowest layer and then save.
The result looks ok ingame.

Does that sound about right?

EDIT: oups .. doesn't workanymore . must've left a layer in

Ooooooooooooooooooh.

Edit: Ok, so that makes perfect sense. Basically merge down your image with a black layer, then use the alpha channel to pull a selection from, and delete the black background, leaving the original image multiplied with the black image.

Now my only problem is that the engine for some reason or other won't recognize the alpha in any pngs I save with photoshop.

Arg I say. Arg.

Get GIMP. And I'll need to talk to someone to explain this to me, since I don't understand anything.

I don't use Photshop (too expensive) nor GIMP (piece of crap), so I don't understand the terms you're using, but I'm not finding any problem with Corel. I simply add a mask to the image, with different levels of intensity (greyscale: black 100% transparency, white totally opaque) on each area depending on how transparent I want them to be, and when saving I set the transparency with the masked area.

What do you mean too expensive? It's free!

Anyway, I'm curious if anyone can troubleshoot this for me. In photoshop, if I fill the 32x128 px canvas with a fully opaque black to fully transparent black gradient, completely filling the document, it works great ingame.

But, if I make a smaller square of gradient (say 20x80 px) surrounded by completely transparent area (in the 32x128 document), it doesn't register any of the transparency, instead displaying a completely white background with a black to white gradient.

There is no difference between the manner of exporting the files, the only difference being that one there is no fully transparent border, in the other there is.

Oh, this is in photoshop.

What do you mean too expensive? It's free!

Talk Like a Pirate Day is in September, Snax.

(Even Photoshop Elements costs about AU$90 here.)

FYI, apparently Irfanview (free) has one of the best PNG exporters:

http://www.irfanview.com/

I haven't tried using it yet. Your mileage may vary, yadda yadda.

Photoshop's PNG exporter is supposedly not-great, and I didn't export this particular HUD images, Ray did that (probably in PSP). Also, teh intarweb reports that Macromedia Fireworks is a good (not-free) program for working with PNG.

(EDIT: "PNGOUT" is apparently a separate plugin, which can be found at the above site under "plugins").

My past experience has been Fireworks works great with PNG and GIF formats for things like super effects text and logos and such. I use Photoshop (7 or CS2) for everything else though.

I think the problem is not with PNG format itself which, by default only supports non pre multiplied alpha, just straight alpha

it´s possible to export a psd unflatenned image to either fireworks or paint shop pro, and, both of them have trial versions available for download

the problem is, how should the image be sent FROM photoshop for any of this softwares in order to work properly?

in my tests using PSP or fireworks I got either a white halo around the images (which means that it´s using an straight alpha instead of a pre multiplied one) or no transparency graduations, just like transparency would be using a GIF image

even so, the preview images seemed to be correct

I appreciate any help in it

Ray, is it possible to get a new annotated.png of the new HUD elements?

Correct me if I'm wrong devs, but Reno, I think that they changed something in the way the new HUD reads the images. That's where the premultiplying comes in. You have to multiply the black into the image's alpha, then the game engine divides the black back out.

If so, I don't totally understand why this was done when the previous method seemed to work just fine.

Regardless, I'm still searching for a png export method that will work well. I'm gonna try Fireworks today and see how that does.

Ok update:

I tried Fireworks and encountered the exact same problem with the white backgrounds as I was in PS. So, it wasn't a problem with photoshop.

What is was a problem with, was when exporting, both programs gave any areas with 0% opacity an rgb value of 255,255,255 (white). Leading the game engine to read it as white because of the premultiply thing.

So I tried 1% black. It worked, but the problem being is you can see 1% black. But! you can't see 0.5% opacity. So, a background of 0.5% opaque black solves it!

Bam!

What's the benefit of premultiplied alpha, anyway?

There was no "previous method", this is the first HUD with alpha. The old HUD was additive blended. The new one actually shows up in front of a sun or flare or whatever.

I'll let ray go into reasons for premultiplied alpha, if he chooses.

The way I understand it premultiplying saves some computations when compositing images.

I've frown together a script that should do the converstion in gimp. hopefully correct :P
http://home.arcor.de/famscheffler/ven/venpremul.py
It needs gimp with the pygimp plugin.

if you have pygimp the script should should show up under Contextmenu->Python-Fu->premul after dropping it into the plugin dir.
When you'Re finished with your image click the entry and save the image that pops up in a new window. It should show up correctly ingame.

possible problems:
it's dreadfully slow.. especially on large images. No idea why. Maybe I'm just using some constructs that are slow in python *shrug*

and it may not work with grayscale images or images with more the default number of channels. I haven't checked it and don'T really care. :P

I see what you mean Inc. But to tell you the truth, not only did I prefer the simplicity of the previous method (although this one may just be a problem on my end), I also preferred the last method for that very fact. It gave a tactical advantage to manuevering your opponent into a position with a strong light source behind you. Blame it on whatever need be for RP purposes, I really liked it.