🔒 Locked

GUI skin

Started by ishikawa-san Dec 22, 2008 at 8:03 AM 1 replies 1.5k views

Original Post

Dec 22, 2008 at 8:03 AM

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 (;

Alphabat

Dec 22, 2008 at 11:38 PM

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.

Programmer16

Dec 23, 2008 at 12:22 AM

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.)

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.