Buttons with Custom Bitmap Borders

Download Code File

The bitmap border button is a simple gui control that lets you make push buttons with customized borders. The BitmapButton control also lets you make customized pushbuttons, but you have to create and maintain four bitmaps for every single button you use, which is overkill if you just want some fancy looking "OK" and "Cancel" buttons.

The bitmap border button constructs the border by tiling together parts of a bitmap, very similar to the way that the bitmap border control works. There are some sample bitmaps in this resource that you can use as a guideline; basically, you split the bitmap into parts that represent the four sides and four corners of the buttons, in active/inactive/highlighted states. That's 24 parts total you have to build. The easiest way I've found is to create a blank button as you would like it to appear on the screen and then cut that button up into the eight parts you need.

Adding the controls to the engine is easy, but you also have to add a GUI control profile that describes
which bitmap to use for your button borders.

Instructions to add the GuiBitmapBorderButtonCtrl class to your copy of TGE 1.3:


1. Copy the files:

GuiBitmapBorderButtonCtrl.cc
GuiBitmapBorderButtonCtrl.h

to your engine/gui directory, and add those two files to your project, then rebuild it.

2. To use the new control, you'll need some bitmaps and also a new profile. To add blue and orange
buttons to the TGE 1.3 SDK, copy these files into starter.fps/client/ui:

customProfiles.cs (replacing your current one)
blueBorderButton.png
orangeBorderButton.png

3. Now you should be able to create a GuiBitmapBorderButton from the
GUI editor. It works pretty much like a normal text pushbutton, except that
any profile you used needs to specify the bitmap used for drawing the border.
Look at the profiles at the end of customProfiles.cs to see how to set this
value. It is the bitmap field of the profile:

new GuiControlProfile (GuiBitmapBorderButtonTextProfile)
{
   opaque = true;
   border = 2;
   fillColor = "0 0 255";
   fillColorHL = "15 89 255";
   fillColorNA = "15 89 128";
   fontColor = "200 200 120";
   fontColorHL = "255 255 255";
   fontType = "Arial Bold Italic";
   fontSize = 16;
   bitmap = "./blueBorderButton";
   textOffset = "6 6";
   hasBitmapArray = true;
   justify = "center";
};

As a further example, I have included a copy of mainMenuGui.gui which already
has some modified buttons in it; just dump it into your client/scripts/ui directory
on top of the current one and run torque to see the changes.