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
Copy to clipboard
<!-- ~~ 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)
Copy to clipboard
<!-- ~~ 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
Copy to clipboard
<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>