Game Development Community

Customize gui interface skins

by Keith Mc Dowell JR · in Torque 3D Professional · 07/27/2009 (9:55 am) · 5 replies

Hello, Wondering if someone could lead me in the direction to how one goes about creating a customize gui interface screen?
I've followed some of the threads, but some of the information found their is very vague. So, far from what I can gather in ->
C:\Torque\Torque 3D 2009 Beta 4\My Projects\TRO_Test\game\core\art\gui\images
contains a series of .png files that appear to be disassembled into pieces, in which reload is reassembled into order to make the display.. How does one go about cutting the pieces?

#1
07/27/2009 (11:42 am)
When you understand the basis behind the skin images it's not too hard. Those images are called bitmap arrays internally. Like you said, they're a bunch of pieces that are used by GUI controls. However, the way they are organized is the important point to understand, here's how a bitmap array is loaded, in general:

1) The top-left pixel color is read and stored as the separator color.

2) The left most pixel column is searched, from top to bottom, for a pixel color different than the separator color.

3) When a different pixel is found, the code searches for the separator color to the right and to the bottom of the current pixel. When those are found, the coordinates are added to a list of bitmap array rectangles.

4) The code continues searching to the right of the pixel from #2 grabbing all rectangles it can find. When its finished, it jumps to the next separator-colored pixel down on column 0 and repeats step #2.

So, since these are bitmap arrays, the important thing in them is the order of the image pieces, which must be organized from left to right and then top to bottom, separated by the same color as the top-left pixel. Also, the topmost horizontal line is skipped, so you can simply fill it with the separator color.

So, to create your own skins, you just need to know which pieces you need to provide for each control (by looking at the existing skin images) and make your images so they are in the same order. The size of the bitmap pieces is not important, so you're free to make them as big or as small as you want (like huge window borders).
#2
07/27/2009 (6:13 pm)

BTW, as a sidenote, when re-skinning in Torque, you don't need to touch the existing skins. This may cause you problems in the editors.

When you only want to skin some controls for your game, simply set up the few custom profiles you need and do skins for them. Then you can use these profiles just for your controls and have everything else (notably the editors) untouched.
#3
07/30/2009 (8:08 pm)
How do you add sound to a game gui? background music and so on. I am looking and cannot find anything that helps.


Thank You.
#4
07/30/2009 (8:11 pm)

Some of the controls (like buttons, for example) have sound effects that can be attached to events.

Playing background music would be achieved directly through the SFX system. Simply start playing a sound in the onWake function of your toplevel control.
#5
07/30/2009 (10:53 pm)
Quote:
How do you add sound to a game gui? background music and so on. I am looking and cannot find anything that helps.
In the FPS Genre Kit there is an example of how to attach sounds to the "soundButtonOver" and "soundButtonDown" events... but someone disabled them (ie. they're commented out) a couple of betas ago. As well as an example of a "startup" sound attached to the splashscreen, for which you could follow and do the same for any GUI.

There is also this page on TDN which details how to add menu music to TGE. Of course you would have to alter it's instructions to the SFX equivalents but that is easily done.