• Advertisement
Sign in to follow this  

GUI skin

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

If you intended to correct an error in the post then please contact us.

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 this post


Link to post
Share on other sites
Advertisement
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 this post


Link to post
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:
Image

Segmented:
LeftImage
CenterImage
RightImage

Grid:
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 system
PushButton
{
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.)

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement