MyGUI skin creating        

Intro

This page applies to MyGUI version 3.2.0+

Terminology:

  • Skin = relates to a single widget
  • Template = skin of a complex (compound) widget.
  • Theme = collection of skins and templates.

Files:

By convention, a theme consists of 4 files:

  • Image file (texture)
  • (SkinName)Theme.xml ~ Contains <MyGUI type="List"> element and links to other files. Not required.
  • (SkinName)Skins.xml ~ Contains <Resource type="ResourceSkin"> elements which define skins of elementary (not compound) widgets.
  • (SkinName)Templates.xml ~ Contains <Resource type="ResourceLayout"> elements which define complex (compound) widgets.

Theme file formats

<!--
~~ Generic resource list
-->
<MyGUI type="Resource" version="1.1">
    
    <!--
    ~~ <Resource type="ResourceSkin">
    ~~ Skin of a single simple (not composite) widget, such as button.
    ~~
    ~~ @param name: Any string. (required)
    ~~ @param size: Size in pixels
    ~~ @param texture: Image file
    --> 
    <Resource type="ResourceSkin" name="[string]" size="[int int]" texture="[filename]">      
        
        <!--
        ~~ <BasisSkin type="[SubSkin|MainSkin]">     
        ~~ Defines a section of the widget, such as "Whole checkbox" (type="MainSkin") "top left corner of a button" (type="SubSkin")
        ~~ Specifies a region of the texture to represent the widget (for each state)
        ~~
        ~~ @param type: 
        ~~    SubSkin: A portion of the widget. There can be 1-N such element
        ~~    MainSkin: A subskin covering the whole widget. Ignores alignment and works faster. There can be only 1 such element.
        ~~ @param offset: Position in texture file, from top left corner, in pixels (x, y, width, height)
        ~~ @param align: Alignment in widget's box. See "Alignment" link below. Can have multiple values delimited by space.
        -->
        <BasisSkin type="[MainSkin|SubSkin]" offset="[int] [int] [int] [int]" align="[alignment]*"> 
            
                <!--
                ~~ BasisSkin's appearence in single state.
                ~~
                ~~ @param state:
                ~~    disabled
                ~~    normal
                ~~    highlighted
                ~~    pushed
                ~~    disabled_checked
                ~~    normal_checked
                ~~    highlighted_checked
                ~~    pushed_checked 
                ~~ @param offset: Position in texture file, from top left corner, in pixels (x, y, width, height)
                -->
                <State name="[state_name]" offset="[int] [int] [int] [int]">
                
        </BasisSkin>
        
        <!-- 
        ~~ <BasisSkin type="[SimpleText|EditText]">           
        ~~ Defines a text caption on the widget
        ~~
        ~~ @param type: 
        ~~    SimpleText: Text label (no actions, works faster)
        ~~    EditText: Text label, selectable and editable
        ~~ @param offset: Position in texture file, from top left corner, in pixels (x, y, width, height)
        ~~ @param align: Alignment in widget's box. See "Alignment" link below. Can have multiple values delimited by space.
        -->
        <BasisSkin type="[SimpleText|EditText]" offset="[int] [int] [int] [int]" align="[alignment]*">  
            
            <!--
            ~~ <State>
            ~~ BasisSkin's appearence in single state.
            ~~
            ~~ @param state: See above
            ~~ @param colour: RGB, possible notations:
            ~~    colour="0.5 0.6 0.5\7"
            ~~    colour="#FF0000" (hex#RRGGBB)
            ~~ @param shift: ???
            -->
            <State name="[state_name]" colour="[colour]" shift="[bool]">
		
        </BasisSkin>
        
    </Resource>
    
    <!--
    ~~ <Resource type="ResourceLayout">
    ~~ Skin of a single complex (composed of simple widgets) widget, such as drop-box.  
    ~~
    ~~ @param name: Any string. (required)
    ~~ @param version: MyGUI version. 3.2.0 is valid.
    -->
    <Resource type="ResourceLayout" name="[string]" version="[version]">
    
        <!--
        ~~ <Widget>
        ~~ Specifies a single simple widget which the template consists from.
        ~~
        ~~ @param type:  
        ~~    Widget
        ~~    Button
        ~~    TextBox
        ~~    ScrollBar
        ~~ Note: many more types exist, but it's uncertain whether they're valid in this context
        ~~ Note: See file [base]/MyGUIEngine/src/MyGUI_WidgetManager.cpp for full list.
        ~~ @param skin: Name of the skin to use for the widget.
        ~~ @param position: ???
        ~~ @param name: Role of this simple-widget inside the compound-widget. Names pair with certain widget types.
        ~~    Root: (type: Widget) The entire widget. Wrapper element, must be the first child of <Resource type="ResourceLayout">
        ~~    Client: (type: Widget/TextBox) Area for child widgets (for Window, ItemBox, ScrollView, etc.). TextBox - text area in EditBox
        ~~    TabItem: (type: Widget) Related to tabbed view
        ~~    HeaderPlace: (type: Widget) Related to tabbed view
        ~~    Controls: (type: Widget) Related to tabbed view
        ~~    Left/Right: (type: Button) Related to tabbed view
        ~~    TrackPlace: (type: Widget) Wrapper for scrollbar
        ~~    Track: (type: Button) Scrollbar track
        ~~    Start: (type: Button) Scrollbar 'up/left' button
        ~~    End: (type: Button) Scrollbar 'down/right' button
        ~~    FirstPart: (type: Widget) Scrollbar-related
        ~~    SecondPart: (type: Widget) Scrollbar-related
        ~~    HScroll: (type: ScrollBar) Horizontal scrollbar of panel view.
        ~~    VScroll: (type: ScrollBar) Vertical scrollbar of panel view.
        ~~    VScroll: (type: Button)
        ~~    Check: (type: Widget)
        ~~    Caption: (type: TextBox) Window-related
        ~~    ResizeLeftBottom: (type: Widget) Window-related
        ~~    ResizeLeftBottom: (type: Widget) Window-related
        -->
        <Widget type="[type]" skin="[string]" position="[int] [int] [int] [int]" name="[role]">
        
            <!--
            ~~ <Property>
            ~~ Widget-specific property.
            ~~ See "Properties" link below.
            ~~
            ~~ @param key: Property name.
            ~~ @param value: Property value.
            -->
            <Property key="[string]" value="[string]"/>
            
            <!--
            ~~ <UserString>
            ~~ User-defined property.
            ~~
            ~~ @param key: Property name.
            ~~ @param value: Property value.
            -->
            <UserString key="[string]" value="[string]"/>
            
        </Widget>
        
        <!--
        ~~ <Child>
        ~~ Specifies a single simple widget which the template consists from.
        ~~ Works exactly like <Widget>, the difference is unclear.
        ~~
        ~~ @param type: See <Widget>
        ~~ @param skin: Name of the skin to use for the widget.
        ~~ @param offset: ???
        ~~ @param align: Alignment keywords. See "Alignment" link below.
        ~~ @param name: See <Widget>
        -->
        <Child type="[type]" skin="[string]" offset="[int] [int] [int] [int]" align="[align]" name="[role]">
        
            <Property key="[string]" value="[string]"/>
            
            <UserString key="[string]" value="[string]"/>
            
        </Child>
        
    </Resource>
</MyGUI>

Alignment: align table.
Properties: skin properties table. (warning - outdated)

<!--
~~ List of resource-files.
-->
<MyGUI type="List">
	<List file="[XML file name]"/>
</MyGUI>



Mouse-pointer file format

For pointer examples look at Media/MyGUI_Media/core_pointer.xml

<Resource type="ResourceImageSetPointer" name="__Pointer_name__">
 		<Property key="Point" value="__x y (hto spot position)__"/>
 		<Property key="Size" value="__width height__"/>
 		<Property key="Resource" value="__Image_resource_name(not texture - it is ResourceImageSet defined somewhere in XML)__"/>
 	</Resource>