# GUI skin

This topic is 3315 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi! Right now I'm writting my GUI lib. I'm stucked with skinning. What I've invented so far.. Each control(window, scroll bar, etc) is divided on few quads. For instance window has nine quads: 4 for rows, 4 for borders, one for the background. Now, lets say I got skin file, which goes like this: window.TopLeft = "topleft.jpg" window.TopRight = "topright.jpg" And then... void Render(IRenderer renderer) { renderer.DrawRectangle(SkinQuads["window.TopLeft"], someDestinationRextangle); ... } But it does not look very nice to me.. in fact it looks awfull, especially hardcoded strings ("window.TopLeft", etc) Are there any patterns, well known solutions for skinning? I need some hints. Thanks in advance, and uhm... Merry Christmas (;

##### Share on other sites
I have little experience with this, as I'm starting a project similar to yours, but I think you should look up XML as a way to "script" your UI.

Having info outside the code in some kind of text file allows you to change those file names and positions without having to recompile or re-write any code.

Anyone more experienced want to take a shot at this one? I'm very interested in knowing what you all have to say as well.

##### Share on other sites
The system I have setup works similar to your system. My controls are divided into 3 different types: solid (a single quad), segmented (3 quads), and grid (9 quads). These 3 types have a skin class associated with them:
Solid:    ImageSegmented:    LeftImage    CenterImage    RightImageGrid:    TopLeftImage    TopCenterImage    TopRightImage    MiddleLeftImage    CenterImage    MiddleRightImage    BottomLeftImage    BottomCenterImage    BottomRightImage

Every control class has a static method named "GetClassName()", which returns the control's class name (for example, my PushButton class return's "PushButton.")

The skin file keeps a collection of classes with control class names attached.

Anyway, a simple skin file for a button for my system looks like so:
// PushButton is a segmented type in my systemPushButton{    Left-Image: Image("MySkin.png", 0, 0, 7, 7);    Center-Image: Image("MySkin.png", 7, 0, 1, 7);    Right-Image: Image("MySkin.png", 15, 0, 7, 7);}

void PushButton::OnRender(){    SegmentedSkinClass *SkinClass = UserInterface::GetSkinClass(this->GetClassName());    UserInterface::Renderer.RenderSegmentedControl(this, SkinClass);    UserInterface::TextEngine.RenderText(this->Text, -1, this->GetBounds(), this->TextAlignment, SkinClass);}

HTH!

(*Note that this is a little bit older and might not be the best system; just giving you an idea of how I was doing it.)