Game Development Community

GUI Transparency, Translucency, Alpha, whatever.. possible?

by Cyrus Amiri · in Torque X 2D · 05/04/2007 (8:47 am) · 5 replies

Thought I'd figure this one out easily. But, I didn't

I'm mimicking 'panels' in TorqueX by making simple GUIControl's of a width and height of the 'panel' I want
I feed in a style with a fillcolor, usually black.
I stick kiddie components on it, making sure their ParentFolder is the 'panel'

It all works wonderfully.

Now, of course, I want some cool partially transparent panels. For lots of reasons.

Maybe I want to partially see the game behind a big UI panel.
Maybe I don't want little informational popups to totally obscure the view...

Problem is, I can't figure out how to do it.

GUIControls have a couple things that I tried:

1. IsOpaque (which if I set to false makes the fill color totally clear
2. FillColors of TransparentBlack and TransparentWhite, both of which show up as clear (?!?!)

What's a guy to do?

I'm about to try making a pure black image in photoshop, drill little transparent pixels into the image, save as a png and set as a material onto a control of some kind? Will that even work? Do I have to do something crazy like this? Isn't there something easier?

How do I do this in TorqueX? Heeeeelp!

Cyrus Amiri

#1
05/04/2007 (9:11 am)
I've used GUIBitmaps and transparent PNGs for all my transparent GUI stuff so that works, I'd be interested to know if it possible to do without them though.
#2
05/04/2007 (8:22 pm)
@cyrus: have you tried using alpha chanels for your graphics? it sounds like that's what Josh does
#3
05/05/2007 (7:04 am)
Jason, Josh - I was kinda joking about the "drilling" little holes.

Not really, but I'll put that into context later in this post

I knew it was most likely easily possible to use a single partially transparent image to make partially transparent GUI panels. Make a partially opaque graphic, save as PNG, render with a GUIBitmap. And, about an hour or two minutes ago, I tested that method works perfectly and you can see through the partially transparent 'panel' into whatever other torque stuff I got going on.

The main reason why I didn't and don't want to do this is because I don't know a great way to adjust the alpha of the PNG on the fly. One of the things I wanted to do was have "smart" UI screens that muck with their alphas if they detect some event (being attacked, nearing quest event, etc.) is going on yet obscured from your view by your GUI window. I'd rather not have lots of PNG's each representing a different level of Alpha. It would be choppy and annoying.

I'm probably going to play with the tinting stuff that's in Torque Combat, see if it helps out at all.

If not, and nobody pipes up about a better solution in a few days, It's probably onto my crazy drilling holes approach (perhaps a creepy solution) - which I describe a little better than in my last posts below:

I'd probably make a new type called GUIBitmap2 or whatever (joking)

It would have ONE new paramenter: opacity (0-100)

It would keep a copy of the original image,
also a local copy (which should be the one shown).

When the opacity property is changed, the control would read the original image, and 'drill' little transparent holes into it in accordance to the opacity set. There's some interesting questions to answer, but I think the basic idea *might* work. Who knows? Anyways, that's kinda why I want to look at the tint stuff some more.

Thanks for your help Josh and Jason! Adjustable alpha for the win!

Cyrus
#4
05/05/2007 (8:42 pm)
Well i'm not a 3d guy, but i belive that in 3d programming, you can set the alpha of each vertex of a triangle. And since a sprite is made up of 2 triangles, there is probably a way (assuming my belief in per-vertex alpha is corect) that you can set alpha that way. Note however, that sets the overall transparancy of the image, which is sounds like you want to do anyway.


That said, IF it exists, then i dont know if tx exposes that functionality, i'm not near a dev machine right now, so go check yourself :P
#5
05/06/2007 (9:06 am)
I'm not familiar w/ Torque X, but in TGE the first place i would go to make a GuiControl is the profile for the control.

Two lines in there seem particularly relevant:
opaque = true;
   fillColor = "255 255 255 80";

i'm not actually sure what "opaque" does,
but the "80" out there at the end of fillColor is opacity.

not sure if that's what you're after, but thought i'd mention it.