Game Development Community

Curved GUI Elements...

by Kirby Webber · in Torque Game Engine · 06/28/2005 (10:55 am) · 6 replies

Let me start by saying that I'm NOT trying to spam the forums (for those who saw the thread in the GUI Creation forum) - I do, however, get the impression that not too many developers are subscribed to the "Torque Art Public Area" forum. =\

I'm working with some gui elements that require curvature - they are basically your standard Health and Energy meters, but I'm at a bit of a loss as to how they'd be implemented properly.

Here's an example of what I'm trying to accomplish.

I know this can be done - Idryonis' Cyberfuge screenshots are proof enough of that, but how?

Any pointers would be greatly appreciated.

#1
06/28/2005 (11:16 am)
Certainly an interesting one... but I can think of a few ways off the bat that - without trying them myself - should technically work.

1.) Treat them like 'straight' graphical objects. Modify the object so you can slowly reveal a seconadary graphic layer beneath the first. The upper layer shows your 'full' health, while the bottom shows the empty bar. Just have it reveal it one pixel-row at a time.

2.) Create a new kind of object class that does the above, but also draws a vector line at the very end, and have the vector line properly angle at the very end of your power bar to sorta give it the closed-off effect, without just havng this sudden and sharp color change.

3.) I'm not sure if this kind of object currently exists in TGE, but you could add a GUI object that supported a sort of animation, like the .IFL's, then just change the graphic being displayed for each layer. (Infact, this you could do from script now that I think about it...)

4.) And finally, do the whole thing in the engine, programming a beautiful new vector and .PNG driven curved health bar, make it snazzy, and share it with all of us. ;)
#2
06/28/2005 (11:27 am)
One way would be to use transparent elements for the parts you don't want to be seen. Fill the rest of the rectangle with transparancy.

www.garagegames.com/mg/forums/result.thread.php?qt=3777 has information on how to go about this :]
Good luck!
#3
06/28/2005 (11:35 am)
Hmmm... I'm familiar enough with using alpha channels to mask out portions of an image, but applying this to the health/ energy fill might be a differeent issue...

Interesting idea.
#4
06/28/2005 (1:16 pm)
In my previous thread, it was suggested that I contact Mike Kuklinski as his project "Kuiper" has a very similar HUD construction to what I'm trying to create.

You can see his DSOTD here.

After contacting him to find out how he implemented (what appeared to be" bezier curves, he responded:

Quote:They aren't real curves, they are just image mapping.

I emailed him a secodn time to clarify what he meant by image mapping (as this term seems to have a rather plyable meaning depending on the developer you are talking to) and got this response:

Quote:They are images who have alpha masks to block out everything but the
curved part from being rendered.

This leaves me to wonder:

Is there some magical way in which I can make the "stock" health/ energy meter in Torque inherit its opacity from a PNG image?

If so, how would one go about it?

It couldn't be as simple as nesting the health bar into the image declaration in the .gui file could it?

I only ask because I've been known to overlook rather simplistic solutions before only to find out later that I'm overcomplicating the issue. (C;
#5
06/28/2005 (1:31 pm)
There is a Bitmap Health GUI floating somewhere around the resources that should shed some light on what you are trying to accomplish.

Edit: Maybe this one: www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=2031
#6
06/28/2005 (1:35 pm)
*GASP*

Chris - you are my hero.

That is exactly what I needed! (C:

See... I told you I had a tendacy to overcomplicate! =)