Transparency colors

#1 I havent done any art editing yet, but certain picture formats allow you to save a "transparrent" color, and i'm assuming png lets you do this.

#2 I use PNGs with alpha-channel, which works fine. So you can have different levels of transparency. PNGs also support single-color-transparency but I don't know if this works properly.

#3 This sounds like bad news for me then... I'm using an older version of Photoshop that does not support the PNG format. I downloaded a converter tool that goes from one format to another, but if I edit a file as a BMP and then convert to PNG I don't get the alpha channel layer.

Assuming I get that working, how does the alpha channel work? Does any colored pixel in the alpha channel prevent an image pixel from being drawn? Or is it one particular color? And if so, what color?

#4 The alpha channel in PNGs can range from 1 bit (full opacity/no opacity) and up depending on the bit depth of the PNG, so higher bit depth images can have partial transparency/opacity based on the value of the alpha channel.

I don't know how far back the support goes, but you can try superPNG, a free Photoshop PNG plugin.

#5 I'm using Photoshop 3 (old yes, but if it ain't broke, don't fix it) but the superPNG plugin does appear to work. Thanks to the plugin I have my masking problems solved for the moment.

#6 On a side note, if you do upgrade Photoshop and for some reason don't upgrade to CS or higher, keep superPNG around; there's a bug and several performance issues with the native Photoshop PNG support prior to Photoshop CS. :)

#7 Doesn't tga support 24bit alpha channels? you could save to that, and then use a program to convert that to a png? maybe irfan view could do that?

http://www.irfanview.com/

#8 I'm interested in using two JPEG images: one for the alpha channel mask (greyscale) and one for the image itself (RGB). Seems this could potentially be a lot smaller storage since PNGs can become really huge even with their "compression". I seem to recall something like this being used in one of the TGE demos or something, but I have no idea how it would be done with T2D.

Has anyone done anything like this?

#9 Just remember that choosing something like JPEG vs PNG vs BMP is optimizing DISK SPACE, not memory usage. Inside the game engine, JPEG and others expanded into their full 16- or 32-bit glory and are using up the full amount of memory. The only methods that don't do this are DXT compression which is not natively supported by Torque (because of OpenGL). So, unless disk space is a big concern, save yourself the hassle and get better looking assets by using PNG.

#10 Download size is actually the issue. I want to stay under 20MB for my next project, and there's a huge amount of art.

#11 You can have a seperate alpha-channel if you use the following rules...

- The file-type must be JPG
- The base image must be RGB.
- The seperate alpha-channel image must be in the same directory as the base image.
- You name the alpha-channel with the same filename but append ".alpha.jpg".

Therefore, you would use the following filename format...

"mySprite.jpg" - Base RGB Image
"mySprite.alpha.jpg" - Seperate Alpha Image

This is a core-engine capability and the resultant images can be used anywhere.

EDIT: You can see this code in "gTexManager.cc" (Line 1286).

- Melv.

#12 This might be practiced already, but I've gained significant filesize improvements by using 8bit PNGs wherever possible and/or using PNG utilities such as pngquant and pngcrush. For Photoshop users, there's an issue of not supporting all possible types of PNG (such as writing indexed 8bit + alpha) so it can pay off experimenting with external converters/compressors. There's a great article about PNG and its supported formats here.

#13 By the way, Fortune Tiles Gold uses the alpha JPG technique to good effect (the entire game being about 10MB). They even use smaller resolution files for the alpha in some cases.

Edit: Typo fixed in url tag

#14 Has anyone here tried experiments with compression? I find when I LZMA compress (which you should be doing!) a compressed image I end up with a bigger file. It's called "entropy" or something weird :/ Zip X compressed JPGs, then X uncompressed TGAs. You may find the latter to be a smaller archive.

I'm not saying what you're doing is pointless, you can save disk space for the user... but you may pay for that in bandwidth, and image quality (as Jason "T2DBoy" Cahill says).

#15 @Melv: Ah, thank you thank you!!! That's precisely the info I was looking for.

#16 I won't use anything for 2D graphics but PNG 24 (or Melv's nice JPEG alpha solution when appropriate). Because around the edges of sprites - especially on rounded edges - you really need to have semi-transparent pixels. For certain types of games this might not be important, but I'm sure you've all seen those amateur games and demos where the hard pixels around the edges - or graphics anti-aliased for display against a particular color - ruin an otherwise lovely graphics ensemble. And don't even get me started on web graphics.

By using feathered selections in Photoshop and the handy delete key you can produce sprites that look as good against any color, regardless of the contrast. Combine this with Save for Web and you've got a great means of rapidly saving out graphics in multiple sizes. (Though better results are obtained by resizing in the Photoshop editor first, and anti-aliasing each size's edges separately.)

Illustrator's Save for Web works even more nicely, because it takes care of all the transparency work for you and produces great results regardless of how much you scale up or down in the Save for Web dialog.

Fortunately I'm using Photoshop CS on the Mac platform, where PNGs are supported throughout the system. I do also have Photoshop 6 on Windows 2000 but it's pretty much unusable for PNG work without the plugin mentioned above.

#17 The line of code that determines if an image with the suffix "alpha.jpg" is usable as an alpha channel is this:

if (bmpAlpha && bmpAlpha->getWidth() == w && bmpAlpha->getHeight() == h && bmpAlpha->bytesPerPixel==1)

NOTE: 'w' and 'h' in the above line of code refer to the pixel width and pixel height of the RGB bitmap we're trying to add an alpha channel to.

The bit that was causing me trouble was not knowing about the "bmpAlpha->bytesPerPixel==1" part: I'd not seen this info mentioned anywhere. Once I saved may alpha-channel image as an 8bit jpeg, all was good.

BTW, IrfanView can save 8bit jpgs:

File->Save As
Save as type -> JPG - JPEG files
Select "Show options dialog" checkbox
Select "Save as grayscale JPG (please remember!)" Checkbox

HTH,
DGuy

#18 Yeah, you definately need to use an 8-bit (single-channel) alpha JPG image that's the same dimension as the 24-bit (three-channel) primary image.

Thanks for pointing that out David. :)

- Melv.