Changing skins

Feb 10, 2009 at 10:19 AM
First of all, I'll thank you for the Window System! It's helped a lot already.

But I have a problem too. I want to use a custom skin, but I really don't know how to do it. How do I create a new skin, pick the texture, slice it up into bits and apply it?
I understand I have to import an XML file containing the texel information, but I really don't know how.

Could you please help me?
Feb 26, 2009 at 3:36 PM
Edited Feb 26, 2009 at 3:36 PM
I'd be interested in knowing this also.  Being able to have one or multiple customization options for the menu system would be great.
May 3, 2009 at 3:33 AM
This may be too delayed for your benefit, but I'll leave some info anyway for future readers.

The short answer is to use the GUIManager.ApplySkin() method to apply your custom .skin and texture file to the components. You'll want to execute ApplySkin() before creating the components so the new default values will be applied. When I was testing ApplySkin() the applyCurrent parameter didn't seem to work, though I may have been using incorrectly. I've included some more details that I have gathered when looking into this myself, though I haven't attempted to actually reskin the entire UI yet.

The simplest way to replace the default skin with your own would be to replace the DefaultStyle.png image, which contains the various default textures for all the components, though you would be limited to creating textures that are the exact size of the default skin components.

If you need to change the size of the textures, you would have to either modify the DefaultSkin.skin xml file or create your own. The XML file contains class names and then property key:value pairs, which looks like:

<Namespace.Classname
          Property1 = "value"
          Property2 = "X, Y, Width, Height"  // for Rectangle properties
        />

In the GUIManager class there's a method called ApplySkin(Skin skin, bool applyCurrent, bool applyDefaults) which calls the ApplySkin() method of the UIComponent class to propogate the skin to all the child components. The actual underlying method is the Apply() method of the Skin class. The applyDefaults parameter from ApplySkin() is passed to it, and if true, Apply() tries to match properties from the XML .skin file with the properties of the various components by appending Default to the beginning of the property names from the .skin file. If you look in the Window class for instance, you'll see a property named DefaultTitleFont which will match a property in the .skin file, and this property also has the attribute [SkinAttribute] above it.