Every (client-side) web developer has encountered the PNG file format more than once. This is especially true for ActionScript developers, mainly because of the native Flash player support for this lossless image format.
A Wikipedia article on the subject states that PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license.
PNG supports a wide range of image types and color depths, including transparency. It is also forward-compatible, and uses a lossless compression algorithm superior to the one used by GIFs. Nowadays, most of the image-editing software recognize the virtues of PNG. However, as always, this was not the case back in the day. PNG's road to becoming a standard, purposeful image format was rough, mainly because many software vendors didn't implement the format in all its glory, rendering its files either too big, or inadequate for the majority of its users.
Two rather huge and extremely well-distributed applications implemented PNG so bad that people started avoiding it altogether. You have three seconds to guess which two companies were big enough to actually ignore an open standard. (Hint: It's not Apple.) 1... 2... Aand..
I bet you guessed at least one of them right. Yeah, MS Internet Explorer, what else. But the other one comes as a shock.
Adobe Photoshop.. omg.
Well, I'm not interested in why that much, it's probably some kind of business policy, or busy schedule, or something like that.. What's really important is, although the Photoshop's PNG support improved significantly (i.e. Save for Web), it's oversimplified, and that's why many ActionScript coders / Photoshop users aren't aware of the true PNG potential.
And that brings us to the topic. What I wanted, for the game I'm making (next time I'll reveal more about it, I promise), was to bundle quasi-3D lighting data into a single RGBA image (or ARGB, whatever).
Naturally, my first comment was: "Yeah, I'll just make a PNG, it supports transparency, so it has all four channels in it, and 8 bits per channel is just fine.."
Flash. Loves. PNG.
It always did. Probably because Macromedia engineers could see into the future and stuff.. They saw the future and everything.. And stuff.. Well, it doesn't matter actually. It turned out right.
So, I went further on and started making some graphics for the early lighting prototype. In Photoshop, of course. The idea was to compose the RGBA image out of several different greyscale images, but because the neighboring areas would overlap each other, I came to an idea of distributing the images all over the four channels in the RGBA order, so that they could overlap each other to some extent and retain the original data. RGBA channels are all 8-bit greyscale bitmaps, essentially, so in effect, I have four bitmaps per file at my disposal. Additionaly, it came to me that these light maps don't have to use the entire 8-bit (28 = 0x00-0xFF) value space per channel, because I'd split that range into 16 segments, each having 16 shades of grey (16x16 = 0xFF+1). So, that's how to pack 64 (4x16) greyscale light maps into just one image file.
Now, you don't have to understand a word of what I'm saying here, basically because if a picture is worth a thousand words, the final demo I'm going to show you is definitely worth a thousand pictures.
However, for those who care, what I wanted to make is, in fact, a simple data structure, in many ways similar to normal maps, except for the normal part (pun intended).
So, I've made the resource file, and there it was. A big problem.
Because it employs transparency masks, Photoshop doesn't produce an alpha channel on its own. If you look at the Channels palette, you'll find just RGB. So, I had to create one additional channel for the alpha, which is ok. But how do you save your custom alpha channel as PNG? Save As, PNG, or Save for Web, PNG-24, checking the 'transparency' box won't do the trick.
Although Photoshop does very good job at creating transparent PNGs via Save for Web, it doesn't let you make a separate alpha channel, because it uses a layer transparency mask (and converts it for your convenience). God, I hate smart features! Some other formats do not have this issue—for example TGA, TIF, even BMP all work just fine with alpha masks and even some other metadata.
It's a bit awkward to think that a transparent image file format such as PNG couldn't support alpha channels, but I had my share of doubt. Did I have doubts in Photoshop??! Of course not. So, in no time, I was looking at the Wikipedia article on PNG. This is what I've been looking for: "indexed, greyscale, greyscale & alpha, truecolor, truecolor & alpha".
Well, that was enough for me.
To cut the extremely looong story short, here's the way to do it.
- Download this Photoshop plugin (released in 2002). http://fosters.realmwarsgame.com/tools/SuperPNG.zip
- unzip it,
- copy SuperPNG.8bi to
<Adobe Photoshop>\Plug-Ins\File Formats\ - remove Png.8bi from the folder (don't delete it!!),
- (re)start Photoshop,
- open a new RGB image,
- create a new alpha mask (Channels palette), and draw something to it,
- save the file with Save As, and select the SuperPNG file type.
I know, the URL is wicked, but note that the latest official version of SuperPNG won't do any good. It actually obeys the Photoshop rules (i.e. sucks). The 2002 version works like a charm, and some 3D people (yeah, like the rest of us are 2D) are still using it to prepare textures with properly embedded alpha.
Happy that I was able to work around this interesting Photoshop misbehavior which is probably widely recognized as a "smart feature," I continued working on the lighting prototype. The alpha channel was saved, the birds flew over the bright blue sky, little lambs jumped wiggling with their little hooves...
Soon enough, my enthusiasm turned into a very dark place full of incinerated mutton chops, when I realized that neither Pixel Bender nor Flash would read my PNGs. In fact, they hate the stuff so much, that my head started to hurt.
Stay with me, while I fight the windmills. See what happens in the part 2 of the series (full of illustrations, coming soon).