Creating a GUI Skin

From C4 Engine Wiki

The appearance of the graphical user interface (GUI) in the C4 Engine is controlled by two texture maps and a small set of colors. The information contained in those items is called a “skin” and can be customized by the user. This article discusses some of the internal workings of the GUI system and describes how you can change the appearance of windows and controls inside C4.

Contents 1 Rendering Process 2 Texture Layout 3 Importing New Textures 4 Interface Colors

Rendering Process

There are two texture maps that the Interface Manager loads when the engine starts up, and they are stored in the resources Data/C4/C4/gui1.tex and Data/C4/C4/gui2.tex. The texture gui1.tex contains the base color and transparency information for the GUI, and the texture gui2.tex contains information about highlights. When a control is rendered by the Interface Manager, it multiplies the pixel data from gui1.tex by a constant color and adds the pixel data from gui2.tex. For example, to render a green round button, the Interface Manager takes pixel data from the appropriate rectangle in both textures and performs the following calculation:

The pixel data in gui1.tex is normally grayscale so that arbitrary colors can be used by the Interface Manager. The highlights from gui2.tex are not affected by the color multiplying the base texture. Note that the drop shadow comes from the alpha channel in the base texture (and the red color in the base texture comes from transparency shown in Photoshop when you select all four channels).

Texture Layout

Each of the textures gui1.tex and gui2.tex is 512×512 pixels in size. The Interface Manager expects certain graphics to be in predefined locations inside the textures, and these locations are the same for both textures. The following diagram shows the base texture map (gui1.tex) for the default skin that ships with C4. The red background shows transparency as displayed in Photoshop when all four channels are selected. The RGB color at these points is black.

Each graphical element has a size that is generally a multiple of 64 pixels in both width and height. There are 32 pixels of padding between adjacent elements so that bleeding doesn't occur during mipmap generation. This is important because interface controls are normally rendered from lower-resolution mipmaps. The above diagram identifies the 64-pixel ranges for all of the buttons used in the interface.

Push buttons and popup menus use the elongated graphics near the bottom of the texture map. Since these kinds of buttons can vary in size, the Interface Manager always uses the 32 pixels on the left and right ends of the buttons, and then uses as many pixels as necessary from the center region of the button. If such a button is more than four times as wide as it is high, then the pixels in the central region are stretched.

Window frames are rendered using the template shown near the lower-right corner of the texture map. The actual frame of a window is rendered using the pixels inside the 64×64 rectangle ranging from 352 px to 416 px horizontally and from 384 px to 448 px vertically. The remainder of the larger region shown in the diagram contains the drop shadow. The Interface Manager renders exactly 16 pixels from both the left and right sides of the 84×87 rectangle, exactly 30 pixels from the top side, and exactly 23 pixels from the bottom side. The pixels in the center of the window frame are not used.

The menu bar is rendered using the bottom 21 rows of the texture map, and the entire 512-pixel width of the texture is stretched to fit the display size.

Importing New Textures

The source images for the two default skin textures can be found in the Import/C4/C4/ directory. These can be used as a template for designing a custom skin. Once they are ready to be used, they can be imported using the Texture Importer tool. When importing the textures gui1.tga and gui2.tga, the following settings should be made in the texture import dialog:

• Set Alpha channel to Transparency.
• Set S wrap mode and T wrap mode to Clamp.
• Check the Disable anisotropic filtering box.
• Check the Require high-resolution rendering box.

The last setting is particularly important so that the GUI continues to be rendered at high quality even if the user has selected low-quality textures in the Graphics Settings dialog.

Both of the textures gui1.tga and gui2.tga must have an alpha channel. The final alpha channel used for blending by the Interface Manager is determined in the same manner as the color channels. Ordinarily, the alpha channel of the base texture (gui1.tga) determines the transparency of a graphical element, and the alpha channel of the highlight texture is filled with zeros (black).

Once the textures have been imported, the engine must be restarted to see the changes.

Interface Colors

There are several constant colors used by the Interface Manager to control the appearance of various graphical elements of the GUI. Each color is stored in a system variable that can be set in a .cfg file or changed in the console. These colors are described in the following table. Their values are represented using two hex digits for each of the red, green, and blue components.

Variable	Default	Description
$desktopColor	"804040"	The color of the desktop when no game is running.
$windowColor	"A0B0C0"	The color of a window frame.
$backgroundColor	"A0A0A0"	The background color of a window's interior.
$hiliteColor	"00C080"	The color used to highlight various elements, such as selected text.
$buttonColor	"40D0FF"	The color applied to various buttons used in the GUI, such as the default push button or a checked check box.
$pageColor	"BFA587"	The background color of a tool page in the World Editor.
$windowTitleColor	"FFFFFF"	The text color for window titles.
$buttonTitleColor	"000000"	The text color for button titles.
$menuTitleColor	"000000"	The text color for menu titles.