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 5 See Also

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.

Many graphical elements have 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 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.

Frames for windows, menus, pages, and balloons are rendered using the templates shown near the lower-right corner of the texture map. Each frame has a drop shadow in the alpha channel. Except for a one-pixel border, the black pixels in the interior of the window frame and page frame are not rendered.

The menu bar and window strip are rendered using the bars at the bottom of the texture map, and they are stretched to the size at which they need to be rendered.

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 changes will be immediately visible without having to restart the engine.

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. (Two extra digits can be added for an alpha component.)

Variable	Default	Description
$desktopColor	"804040"	The color of the desktop when no game is running.
$buttonColor	"40D0FF"	The default color of various widget buttons when they are in a particular state. For example, checked boxes, selected radio buttons, and default push buttons.
$hiliteColor	"00C080"	The color used for highlighting selected text, menu items, and widgets that have the keyboard focus.
$windowBackColor	"A0A0A0"	The default window background color.
$balloonBackColor	"EDDBB8"	The background color for help balloons.
$menuBackColor	"C0C0C0F7"	The background color for menus.
$pageBackColor	"787878"	The background color for tool pages.
$windowFrameColor	"A0B0C0"	The color applied to window frames.
$pageFrameColor	"A0B0C0"	The color applied to tool page frames.
$stripFrameColor	"C0C0D0"	The color applied to the window strip frame.
$windowTitleColor	"FFFFFF"	The color of window titles.
$menuTitleColor	"000000"	The color of titles in a menu bar.
$pageTitleColor	"FFFFFF"	The color of tool page titles.
$stripTitleColor	"000000"	The color of windows titles in the strip.
$stripButtonColor	"40FFD0"	The color of selected window buttons in the strip.

See Also

• Widgets
• Panel Editor