GUI Skinning is done via an XML Skin Definition File and an associated image or images.
Overview
Design Decisions
The driving force behind our GUI Skinning system is to provide an easy and flexible way to change the appearance of GUI Control's while at the same time avoid excessive use of 'eye candy'. While many GUI's provide a large set of 'special effects', we opted for something simple so that we could focus more of our time developing the game instead of the underlying GUI subsystems.
To that end, the primary method of skinning objects is to use a set of nine images, four corners, four edges and a 'background' that is repeated over the center of an object within the edges. With the exception of a few specialized Control's, all Controls use this method of skinning.
Current Support
The following table lists supported Control types:
| Full Support | Partial Support | Planned Support |
|---|---|---|
| Button | ScrollBar | CheckBox |
| Window | RadioButton | |
| TextArea | TabArea | |
Usage
GUI Control Breakdown
Solid Color Background Quads
The following is a proposal that has not yet been discussed.
It occured to me that we can streamline both memory consumption and rendering speeds by offering a simple option to use a solid single colored 'flood fill' of the background area of any particular control. It will likely take the following format with RGB values ranging from 0 - 255:
<part type="bg-solid" r="0" g="0" b="0" />
Example
<skinset name="Default" image="default.png"> <control type="Window"> <part type="top-left-corner" xpos="0" ypos="0" width="8" height="8" /> <part type="top-edge" xpos="8" ypos="0" width="8" height="8" /> <part type="top-right-corner" xpos="16" ypos="0" width="8" height="8" /> <part type="left-edge" xpos="0" ypos="8" width="8" height="8" /> <part type="bg-quad" xpos="8" ypos="8" width="8" height="8" /> <part type="right-edge" xpos="16" ypos="8" width="8" height="8" /> <part type="bottom-left-corner" xpos="0" ypos="16" width="8" height="8" /> <part type="bottom-edge" xpos="8" ypos="16" width="8" height="8" /> <part type="bottom-right-corner" xpos="16" ypos="16" width="8" height="8" /> </control> </skinset>
