History: MyGUI skin creating
Source of version: 10 (current)
Copy to clipboard
!!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
{CODE(wrap="1", colors="xml")}
<!--
~~ 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>
{CODE}
Alignment: ((MyGUI align table|__align table.__))
Properties: ((MyGUI skin properties table|__skin properties table.__)) (__warning - outdated__)
{CODE(wrap="1", colors="xml")}
<!--
~~ List of resource-files.
-->
<MyGUI type="List">
<List file="[XML file name]"/>
</MyGUI>
{CODE}
!!Mouse-pointer file format
For pointer examples look at Media/MyGUI_Media/core_pointer.xml
{CODE(wrap="1", colors="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>{CODE}