Transparent GUI Components
by Emil Diego · in Torque Game Engine · 07/14/2005 (5:51 am) · 10 replies
I am trying to create some Bitmap GUI components that have some transparency in them. I can't seem to get it to work though. I am using photoshop CS for graphics.
Here is what I am doing.
1) I created a png image that has a button on it.
2) I added an alpha channel.
4) Colored the sections I want visible white, transparent black.
5) Added the bitmap to a GuiBitmapControl.
6) Run the program and I see the whole image without any of the transpaecy.
Is there a step that I am missing? Or does the engine not support the alpha layer in a PNG?
Thanks in advance for the help.
Here is what I am doing.
1) I created a png image that has a button on it.
2) I added an alpha channel.
4) Colored the sections I want visible white, transparent black.
5) Added the bitmap to a GuiBitmapControl.
6) Run the program and I see the whole image without any of the transpaecy.
Is there a step that I am missing? Or does the engine not support the alpha layer in a PNG?
Thanks in advance for the help.
#2
07/14/2005 (6:04 am)
So the alpha channel is useless for png files ? 
#3
Make sure that photoshop is actually saving the alpha channel.
www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=1920
07/14/2005 (6:08 am)
Emil, That should have worked just fine. Make sure that photoshop is actually saving the alpha channel.
www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=1920
#4
I have also tries opening the png file adding the alpha channel to it and saving, but it still get's lost.
Is this a bug in photoshop?
Do PNG files support alpha channels?
07/14/2005 (6:21 am)
I read the page you sent me too, but I am using photoshop 8 not Paint Shop Pro. I don't know how to "Make sue that photoshop is actually saving the alpha channel". When I save the photoshop files the alpha channel stays, but when I save the image into a png file, the alpha channel gets lost. I have also tries opening the png file adding the alpha channel to it and saving, but it still get's lost.
Is this a bug in photoshop?
Do PNG files support alpha channels?
#5
07/14/2005 (6:35 am)
Yeah, I had some trouble with that too, which is why I suggested the checkered-background thing. At least you can test the image out in-game if nothing else.
#6
07/14/2005 (6:37 am)
I tried that and it worked ok. But i need a full transparency range inorder to get the GUI components to look good. I want the corners and other rounded edges to blend in with the background.
#7
07/14/2005 (6:38 am)
PNG files DO support alpha channels. Try and open your .png in a web browser and see if the transparent parts are working correctly. Perhaps the alpha channel is below the others?
#8
07/14/2005 (6:57 am)
All the info here seems good... as Unsung Zero said, PNGs do support alpha channels. I have several in my GUI that work fine. If you would like to see some of the files we have working, so you can compare them with what you have, email me at klamers@earthlink.net, and I can send them to you. I have a 2-D artist producing most of this stuff, but I should be able to get you both the .png and .psd files. Make sure you use a meaningful subject line, or I may delete it, thinking it's SPAM
#9
PNG does support a full transparency range, what Trent is trying to say is that it's easier to get the effects you desire by simply working with varying levels of actual transparency in your image than it is to try and manipulate the grayscale and create your own alpha channel.
You should also be aware that there has been some controversy regarding the PNG format as of late.
Apparently, the older implementations of PNG were not actually upholding the format spec, or some such crap - so some older versions of graphics apps do not deal with PNGs in the same way newer ones do.
Somehwhere around here there's a resource for Photoshop users called "Super PNG".
If you can't get your Alpha channels to work correctly, peruse that resource and see if it might help.
07/14/2005 (7:07 am)
Emil,PNG does support a full transparency range, what Trent is trying to say is that it's easier to get the effects you desire by simply working with varying levels of actual transparency in your image than it is to try and manipulate the grayscale and create your own alpha channel.
You should also be aware that there has been some controversy regarding the PNG format as of late.
Apparently, the older implementations of PNG were not actually upholding the format spec, or some such crap - so some older versions of graphics apps do not deal with PNGs in the same way newer ones do.
Somehwhere around here there's a resource for Photoshop users called "Super PNG".
If you can't get your Alpha channels to work correctly, peruse that resource and see if it might help.
#10
Make a new image and set the background to transparent...
Design your button or whatever you want to make...
Goto File> Save as... give the file a name and select PNG from the format drop down bar... when the "PNG Options" box pops up click "none" then ok
Add it to you game and it should work without any problems.
Also... if you want to make the whole image translucent (so you can see stuff behind the image)
Make your design and set the image/shape "opacity" to what ever you want it to be, and save the image the same way as the button above....
Hope it helps.
-Joseph
07/14/2005 (7:25 am)
I used photoshop 7 to make my transparent images...Make a new image and set the background to transparent...
Design your button or whatever you want to make...
Goto File> Save as... give the file a name and select PNG from the format drop down bar... when the "PNG Options" box pops up click "none" then ok
Add it to you game and it should work without any problems.
Also... if you want to make the whole image translucent (so you can see stuff behind the image)
Make your design and set the image/shape "opacity" to what ever you want it to be, and save the image the same way as the button above....
Hope it helps.
-Joseph
Torque Owner Trent "mittens" Polack