Alpha Channels

[Quintaros]

Everybody seems very excited about this new feature but I feel totally left out as I have no idea what an Alpha Channel is.  

Can someone please explain?

[Darth Mandarb]

Each pixel of a 32bit image has four channels; 1 red, 1 green, 1 blue, and 1 (8bit) alpha channel.  It's the channel that is the opacity of that pixel.  It's 256 levels of grey (from white to black).  It's like a mask in Photoshop really ... so if you have full red and 50% transparent overtop of a pixel that is full blue you'd get a purple shade when the two overlap.

It can be used in AGS for some interesting effects.  For example, if the image was all white, but the alpha channel goes from one side (white) to the other side (black) the white square (in AGS) would start 100% opaque and be completely transparent at the other end.  You could use this for a cone of light coming from a spotlight.

You could create an alpha channel for the shadow around the players feet so that it's always semi transparent thus acting like a true shadow (which is what I'm most pumped about!)

It's a very useful (though at first completely confusing) element that gives you MUCH freedom!

Once you get the hang of it the ideas just start flooding in!

Hope this helped

])]v[

[Quintaros]

Well don't fully understand how it works but I think I do see its potential uses.  

Would it require importing a sprite than importing a 2nd grey scale sprite of the same image where the intensity of the grey defined how opague the original sprite is displayed?

[Darth Mandarb]

I haven't actually downloaded the new version of AGS to play with it yet ... but I'm guessing you can import PNG of TGA files which are (can be) 32bit files with the alpha channel included so you don't need to add a second file.

Here is an example.  I rendered these tires in 3DStudio MAX for a DVD project last year:

See the transparent background?  That will show up 'cause of this alpha channel ...

The alpha channel is invisible on the image itself (if the top image were an imported TGA or PNG or something it would include the Alpha Channel but you wouldn't see it) The white areas where the tires are is 100% visible and the black area (100% transparent) is the background, which is removed.

NOTE: These are GIFs (just for uploading) but the originals were TGA files

[Quintaros]

All right so the alpha channel is a part of the image file and doesn't have to be separately created.  At any rate I'm sure I'll understand it once I'm playing with the new AGS.  

Thanks, DM.

[Jongetje]

Hi,

This is maybe a stupid question, but I wonder if it's also possible with Alpha Channels to create an 'anti-aliasing' effect.

[Gilbert]

Yes, that's one of the most basic use for Alpha channels.

[James Kay]

Hi,

This is maybe a stupid question, but I wonder if it's also possible with Alpha Channels to create an 'anti-aliasing' effect.

I have no idea of the function in AGS but yes, with Alpha Channels you can keep or create "soft" edges with transparency.
You have to be careful though, as this can often cause unwanted effects for the amateur user.

When you export the file make sure the background colour is the same as the edge of the graphic that will be cut out using the alpha channel.  If you character has an anti-aliased black outline, make sure the background of the rest of the image is black.
If it is pink, for example, you'll see pink artifacts, dirty pixels, when the "cut-out" image is placed over a background.
Alternatively, make the background of the image a colour approximate to the avarage colour of the background. E.g., if you graphic is supposed to be shown over a water background, make the image background blue, so the artifacts are less visible.

It's a bit difficult to explain, sorry. But with extended use you'll see what I mean.
One thing to remember is: it's not as clean as, say, a photoshop layer. You will have to do a bit of tweaking and forward planning!

[Jongetje]

Thanks a lot. I will experiment with it to get the hang of it.

[SSH]

I have no idea of the function in AGS but yes, with Alpha Channels you can keep or create "soft" edges with transparency.
You have to be careful though, as this can often cause unwanted effects for the amateur user.

When you export the file make sure the background colour is the same as the edge of the graphic that will be cut out using the alpha channel.  If you character has an anti-aliased black outline, make sure the background of the rest of the image is black.
If it is pink, for example, you'll see pink artifacts, dirty pixels, when the "cut-out" image is placed over a background.
Alternatively, make the background of the image a colour approximate to the avarage colour of the background. E.g., if you graphic is supposed to be shown over a water background, make the image background blue, so the artifacts are less visible.

It's a bit difficult to explain, sorry. But with extended use you'll see what I mean.
One thing to remember is: it's not as clean as, say, a photoshop layer. You will have to do a bit of tweaking and forward planning!

This bordering problem will not apply with AGS2.6 (currently in beta - see technical forum) if you use 32-bit colour with alpha channel, as the alpha information will be included and those transparent pixels that were giving you the wierd border will now work properly. However, if you want to use 8 or 16-bit colour then you need to eliminate them This can be done in Paintshop Pro by getting the magic wand, turning select mode to Opacity, click in the middle of your sprite (over a solid bit) and then Invert selection and hit Delete to get rid of all semi-transparent pixels. Generally, an image will require some cleaning up after such an operation.

[James Kay]

The problem is inherent to alpha channels in general and it's not a problem with AGS.
I've quickly made some illustrations that should hopefully help people understand. I'm not very good at explaining this stuff, so bear with me.  

An alpha channel is like a cookie cutter for the image. It'll "cut" the actual image from it's background or however you want to do it. 100% white means it'll make that part completely opaque, 100% black will make that part completely invisible.

Now, the problem is, if you make an anti-aliased shape in, say, photoshop, and then use that same shape in the alpha channel, the following happens.



You can see, in the yellow circle, that the anti aliased shape, at this point, looks like a partly transparent red pixel. However, it is not. It is actually a dark red pixel. So when the alpha channel cuts it up, it doesn't take a red pixel and make it 50% transparent, it takes this dark red pixel and makes it 50% transparent. The effect is a dirty set of black pixels, or artifacts.
I cut the red circle from the black background and the result is the one in the middle. You can see the rim isn't neatly red anti-aliasing. It's for black dirt in there. The image on the right shows it on a blue background (not a good choice of mine, sorry, as red and blue cause an optical effect akin to noise - but I hope you see what I mean).

The solution? Well, there are two easy ones, if you really want to use antialiasing.



On the left I have created a 100% red image, with an alpha channel the shape of a circle. Now when the alpha channel cuts the image up it'll use only red pixels. So the antialiasing is nice and clean. This obviously is a lot harder, if not impossible, if you are using a many coloured sprite, like a character.
On the right, I have purpusfully created dirty pixels, but in the colour I want. Say this red circle will appear in front of an image of trees. So the background will be mostly green. The green dirt you see in the cut-up image will be almost invisible when placed over a greenish background.


Anti-aliasing can be lovely, but you have to know how to utilise it properly. So experiment!

I hope this helps some people. Like I said, it's kinda hard to explain...

[SSH]

I think that most people will use the automatic transparency done by antialiasing in their drawing program (e.g. PSP) , rather tha mnaually creating one as you are suggesting.

For example, I can draw something with antialias turned on and it will make semi-transparent pixels (ie with an alpha channel)  for me. Or, if I use the default settings in the deform tool I will almost certainly get some semi-transparent pixels at my edges. If I make sure that my background is transparent (you can use the background eraser in PSP8 if you have a solid colour background that you need to get rid of) and save as PNG or TGA, then AGS2.6 can import that alpha channel and give you lovely smooth edges without having to worry about what background it is going to be over.

[James Kay]

Whichever way you create it, a TGA or PNG file is a flattened image with an extra 8 bit black & white image which is your alpha channel. Unless you can drag a transparent layer from one program to another (like Photosop to Illustrator) then this problem will persist. The problem explained above goes for all formats that allow an 8-bit alpha channel.

Sure, for most people it won't cause too much of a problem, but if you're a bit perfectionistic (or compulsively obsessed with the tiniest detail that few people will notice) the above is handy to know.  

[SSH]

But why not just have a transparent background when you save, rather than white, black, green or whatever? That's what I have tried, and it works!

[James Kay]

Because there is no such thing as a transparent background in, say, a TGA. A 32-bit TGA is made up of a 24-bit image and an 8-bit alpha channel. Transparency, as experienced in Photoshop, is part of the program, not the file type.

I'll be honest with you, the effect, in most cases, is negligable. It's not something to worry about. But if you want to make a nice smooth corona to a light, or a mist haze or something like that it's handy to know the above.
Your avarage AGS user is not going to be losing any sleep over this, but there were some alpha channel questions and I just thought I'd share this bit of info.

[SSH]

So at the anti-aliased edges of your circle, you have some pixels with R 255 G 0 B 0 A 255 (completely opaque red) some with R255 G 0 B 0 A 127 (half-transparent red), some with, say, R255 G 0 B 0 A 20 (nearly transparent red) and various in-between. There is only colour and transparency info... there is no background info: any pink or black shading will be becuase the circle was drawn over a colour in the program, not becasue of the file format or because of using alphas.

[scotch]

If you use the automatic transparency in PS or PSP or a 3d program then saveas png or tga the correct colour information for the transparent parts is saved too so it's not a problem for anyone who isn't painting their own alpha channel, and hopefully the people who do will know what they are doing.

[James Kay]

It's be cool if AGS will have a "import, premultiplied with black" (or any specified colour) option, but we're heading into digital imaging territory here, so maybe not....  

[Hollister_Man at work]

In the circle example you could have the whole 24 bit layer filled with red and have the alpha layer "cut" out the edges, right?  So if you were going to anti-alias your sprite, you would want to fill the background of the sprite with a similar color to the sprite itself, correct?

Myself, I prefer the look of the "classic" games, but I am excited that AGS can now be used to do such amazing things.