Jump to content
  • Advertisement
Sign in to follow this  

GUI skin

This topic is 3591 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
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:




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


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

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!