Game Development Community

GUI-skinning, example?

by Johan Stenqvist (neochrome) · in Torque Game Builder · 09/29/2005 (4:54 am) · 3 replies

Hi,

I was wondering if anyone has any experince skinning the GUI components in Torque/T2D?
I've found the defaultProfiles.cs and some bitmaps with window borders etc under common/ui.
My question is if you're free to use whatever size etc you want when you create a new skin?
And is it possible to skin more than just windows and scrollbars - could you have skinned buttons
as well?? (and then I don't mean bitmapped buttons, but the "real" thing so you can change text
and size during runtime).

If there's some examples of this I would very much like to see them.
Thanx for listening.

Cheers,
Johan

#1
09/29/2005 (9:59 am)
You cannot skin the standard gui buttons in the stock engine. There is supposedly a fix to allow you to render text labels on top of bitmap buttons here. I'm not sure what you mean by being able to change the size during runtime? I don't see why you can't change the size of a bitmap button.

Different sized skins can be used for windows/scrollbars. There may be an upper limit, but I've never reached it and I've made skins that are two or three times bigger than the default skins. There are definitely some tricky bits, namely getting the color-key cell separator right, and the fact that the alignment of skinned elements (say the bottom edge of a window in relation to the left or right edge) is fixed so you have to work around/pad your images if you're making unusually shaped skins. What's worse is if you mess up something (botching the skin image) the engine just crashes flat out, so it is difficult to track down what you did wrong.

There is a video tutorial for skinning at http://torque.smdlabs.com/media/freeTutorials/skinGUI/page1.htm which is a good head start. It is also a good start to just take the stock image, bring it into a graphic program and fill each block of the skin with a different color and go see what it looks like in the game.
#2
10/02/2005 (11:46 pm)
Thanks for your reply Luke.

What I meant by changing the size in runtime was that a button (for example) should grow if you put more text on it during runtime. I know - might sound like a silly thing and I don't relly need that right now, but I was trying to think in some kinda general way - so that if I learn to do gui's it would work for other types of games as well. Right now it almost sound like using a second scenegraph in a 2dwindow gui control overlayed over the main game window and the draw you own gui with sprites etc would be the easiest - everything scales with resolution change and stays the same relative size, right? But then again, you'd miss out on any nice build in features in the standard gui components.
(BTW second scenegraph to be able to easily pause the main one...)

Cheers,
Johan
#3
10/03/2005 (12:58 pm)
Ah, well it probably wouldn't be too much work to code up a routine that would resize the button based on the length of the text of the label, just put your own type of setText() function in front of the gui ones and calc position/size based on the text passed in.

Using T2D as a GUI has a whole lot of incredibly exciting possibilities (so much so that I think there are no less than three people that have worked on or are working on various T2D gui projects) but the standard TGE gui stuff is so very mature and robust that it'll take a good bit of time before all the nice subtle features of the standard gui are represented in a full T2D gui. What would possibly be the best of both worlds would be if you can utilize t2dSceneObjects as the graphic elements used by the standard GUI controls. That would go a fair distance to have the feature set of the existing gui but the flash and sparkle of t2d.