Skinnable GUI Controls in TGE

Download Code File

Let me preface this resource with some ScreenShots!



Let me begin by saying that this code is provided as is, with no assurance of proper functionality with your TGE setup, it has been tested on a clean HEAD build from the CVS and I used that as the basis for writing this resource.

I only post this code in hopes that you (the community) will help me to improve upon something i've put a bit of time and heart into creating. You're free to use this (duh?!) but I would ask that if you make any updates/changes to the code that you submit them to myself as well so I may update this resource.

On to the implementation!

First off, in the accompanying zip file there are modified GUI class .cc's and .h's, you simply overwrite your orginials (if they're un-modified by yourself) with these and compile. Simple enough?

There is ONE OPTIONAL EXCEPTION, I modified guiControl.cc and .h to support an extra border type. If you set the border = 5 then the control references the bitmap of that profile and uses it to draw the border. example below.

new GuiControlProfile(GuiDefaultBorderProfile : GuiDefaultProfile)
{
   hasBitmapArray = true;
   border = 5;
   bitmap = "fps/data/skins/WindowsXP/XPGuiBorder";

};

If you don't wish to add that functionality to your program, then simply don't use the guiControl.cc and .h from the zip.

Pretty simple thus far, ehh? Well the next piece is the only queer part. Now we must modify your defaultProfiles.cs, Most people have these already modified so i'll show you what to change if you've already got your default profiles like you like them. If you don't really care, i've also included a defaultProfiles.cs in the zip that you can use which is just a clean HEAD build defaultProfiles.cs with the changes that i'll list below.

starting from the top of the defaultProfiles.cs we'll go down the list.

first off, in any text editor with a replace/replace all option, i've changed the naming convention of the bitmaps to match. I did this because i failed to see the logic behind having darkWindow and then torqueRadio, torqueCheck, etc.. So open it up, go to replace, and replace all 'darkWindow' with 'torqueWindow', then all 'darkScroll' with 'torqueScroll'.

Next we have to add some stuff to the default profiles. First we find GuiButtonProfile, we need to add a hasBitmapArray = true and a bitmap member to them.

if(!isObject(GuiButtonProfile)) new GuiControlProfile (GuiButtonProfile)
{
   opaque = true;
   border = true;
   fontColor = "0 0 0";
   fontColorHL = "32 100 100";
   fixedExtent = true;
   justify = "center";
	canKeyFocus = false;
   [b]hasBitmapArray = true;
   bitmap = "./torqueButton";[/b]

};

Next we find GuiTextEditProfile.

if(!isObject(GuiTextEditProfile)) new GuiControlProfile (GuiTextEditProfile)
{
   opaque = true;
   fillColor = "255 255 255";
   fillColorHL = "128 128 128";
   border = 3;
   borderThickness = 2;
   borderColor = "0 0 0";
   fontColor = "0 0 0";
   fontColorHL = "255 255 255";
   fontColorNA = "128 128 128";
   textOffset = "0 2";
   autoSizeWidth = false;
   autoSizeHeight = true;
   tab = true;
   canKeyFocus = true;
   [b]bitmap = "./torqueTextEdit";
   hasBitmapArray = true;[/b]

};

Next we find GuiControlListPopupProfile. Here instead of adding bitmap we modify it as follows

if(!isObject(GuiControlListPopupProfile)) new GuiControlProfile (GuiControlListPopupProfile)
{
   opaque = true;
   fillColor = "255 255 255";
   fillColorHL = "128 128 128";
   border = true;
   borderColor = "0 0 0";
   fontColor = "0 0 0";
   fontColorHL = "255 255 255";
   fontColorNA = "128 128 128";
   textOffset = "0 2";
   autoSizeWidth = false;
   autoSizeHeight = true;
   tab = true;
   canKeyFocus = true;
   [b]bitmap = "./torquePopupMenu";[/b]
   hasBitmapArray = true;
};

Next is GuiPopupMenuProfile. We change this one like we did the one above.

if(!isObject(GuiPopUpMenuProfile)) new GuiControlProfile (GuiPopUpMenuProfile)
{
   opaque = true;
   mouseOverSelected = true;

   border = 4;
   borderThickness = 2;
   borderColor = "0 0 0";
   fontSize = 14;
   fontColor = "0 0 0";
   fontColorHL = "32 100 100";
   fontColorSEL = "32 100 100";
   fixedExtent = true;
   justify = "center";
   [b]bitmap = "./torquePopupMenu";[/b]
   hasBitmapArray = true;
};

and finally we have GuiEditorClassProfile

if(!isObject(GuiEditorClassProfile)) new GuiControlProfile (GuiEditorClassProfile)
{
   opaque = true;
   fillColor = "232 232 232";
   border = true;
   borderColor   = "0 0 0";
   borderColorHL = "127 127 127";
   fontColor = "0 0 0";
   fontColorHL = "32 100 100";
   fixedExtent = true;
   justify = "center";
   bitmap = "./torquePopupMenu";
   hasBitmapArray = true;
};

Oops, this is out of place but i forgot about it! so find your GuiSliderProfile and add to it these values

if(!isObject(GuiSliderProfile)) new GuiControlProfile (GuiSliderProfile)
{
   [b]hasBitmapArray = true;
   bitmap = "./torqueSlider";[/b]
};

That should get you setup to use your own skinnable controls!

Skinnable they are, but changeable is a different story, I devised a way to make skins for our project, but it took a bit of scripting restructuring and I really just don't have the energy to include it in this resoruce, perhaps at a later date. However the changing bitmaps on the fly code is still implemented in the controls, so changing a control's skin is as simple as overwriting it's GuiControlProfile in-game, if you do that it will automatically update itself.

Good luck, and I hope I didn't forget anything!

Oh yes, I included a windowsxp style skin in the resource so add those bitmaps in your common/ui directory :)

*NOTE* I just took the Zip, and a new clean HEAD (not the one i used to compile this resource) extracted the files, rebuilt the libs and .exe and started. The bitmaps weren't visible! Not to fear, it's the damned .dso's for some reason it wasn't re-compiling the defaultProfiles.cs in common/ui. So if you experience this problem, just delete the .dso's in common/ui

One thing you may notice is that in some of the editors the textedit's use weird bitmaps, this is not my fault and i won't go into step by step fixing all the profiles *glares at GG guys*. Had they simply derived them all from the default profiles there wouldn't be this problem :(