Difference between revisions of "Client Skinning"
(Adding some more documentation. Still half-assed) |
|||
Line 1: | Line 1: | ||
− | + | = Client 2 Skinning Guide<br> = | |
− | + | == Creating a New Skin == | |
− | + | In Client 2, instead of editing the files in place, you actually create a new folder in the Contents dir. This will allow us to patch files without overwriting mods and allow people to share mods more easily. | |
− | + | Here is an example of creating a simple mod for C2: | |
− | |||
− | |||
− | |||
− | |||
− | + | #Create ''Contents/<newSkinName>/'' next to ''Contents/Default'' | |
+ | #Copy the appropriate file from ''Contents/Default/<dir1>/<dir2>'' to ''Contents/<newSkinName>/<dir1>/<dir2>'' | ||
+ | #Make the changes you want to make to the file | ||
+ | #Change the ''UserConfig.xml'' packages attribute to read ''packages="<newSkinName> Default"'' instead of ''packages="Default"'' | ||
+ | #*This will tell C2 to first look in <newSkinName> for the files it needs, then revert to Default for anything it doesn't find. You can chain many of these packages to apply multiple mods. (Eventually we'll have a UI mod manager as well). | ||
− | Any questions related to this can be sent to pip on the forums or asked on IRC. | + | Lastly, the packages attribute can also read in zip files, so you could place a zip file named '''<newSkinName>.zip in Contents/ and add it to the packages in the same way''', and it would read it. (This will make it even easier to share mods with others) |
− | [[Category: Guides]] | + | |
+ | Any questions related to this can be sent to pip on the forums or asked on IRC. | ||
+ | |||
+ | == XML Documentation == | ||
+ | |||
+ | === Button === | ||
+ | |||
+ | === Window === | ||
+ | |||
+ | === WindowTrans === | ||
+ | |||
+ | === ModalScreen === | ||
+ | |||
+ | === MessageBox === | ||
+ | |||
+ | === ScrollBar === | ||
+ | |||
+ | === Image === | ||
+ | |||
+ | <code><element type="image"> </code> | ||
+ | |||
+ | ==== Example: ==== | ||
+ | |||
+ | <code><element type="image"></code> | ||
+ | |||
+ | <code></code> | ||
+ | |||
+ | <code></code> | ||
+ | |||
+ | <code> | ||
+ | <attributes> | ||
+ | <rect name="Rect" value="12, 37, 483, 305" /> | ||
+ | <texture name="Texture" value="background.station.ships" /> | ||
+ | <bool name="UseAlphaChannel" value="true" /> | ||
+ | <color name="Color" value="9fffffff" /> | ||
+ | <rect name="ImageRect" value="25, 63, 498, 333" /> | ||
+ | </attributes> | ||
+ | </code> | ||
+ | |||
+ | <code></code> | ||
+ | |||
+ | <code></code> | ||
+ | |||
+ | <code></element> </code> | ||
+ | |||
+ | ==== Notes: ==== | ||
+ | |||
+ | The texture name is the name of an image specified in images.xml | ||
+ | |||
+ | ImageRect specifies a subset of the image to display | ||
+ | |||
+ | Color is in the aarrggbb format | ||
+ | |||
+ | === Rectangle === | ||
+ | |||
+ | <code><element type="rectangle"></code> | ||
+ | |||
+ | <code> <attributes><br> <string name="IdName" value="" /><br> <string name="TextID" value="" /><br> <int name="Id" value="-1" /><br> <string name="Caption" value="" /><br> <rect name="Rect" value="0, 0, 1, 1" /><br> <position name="MinSize" value="1, 1" /><br> <position name="MaxSize" value="0, 0" /><br> <bool name="NoClip" value="false" /><br> <enum name="LeftAlign" value="upperLeft" /><br> <enum name="RightAlign" value="upperLeft" /><br> <enum name="TopAlign" value="upperLeft" /><br> <enum name="BottomAlign" value="upperLeft" /><br> <bool name="Visible" value="true" /><br> <bool name="Enabled" value="true" /><br> <bool name="TabStop" value="false" /><br> <bool name="TabGroup" value="false" /><br> <int name="TabOrder" value="-1" /><br> <color name="col_left_up" value="ffffffff" /><br> <color name="col_right_up" value="ffffffff" /><br> <color name="col_left_down" value="ffffffff" /><br> <color name="col_right_down" value="ffffffff" /><br> </attributes></code> | ||
+ | |||
+ | <code></element> </code> | ||
+ | |||
+ | === Checkbox === | ||
+ | <pre><code><element type="checkBox"> | ||
+ | <attributes> | ||
+ | <string name="IdName" value="" /> | ||
+ | <string name="TextID" value="" /> | ||
+ | <int name="Id" value="-1" /> | ||
+ | <string name="Caption" value="" /> | ||
+ | <rect name="Rect" value="0, 0, 1, 1" /> | ||
+ | <position name="MinSize" value="1, 1" /> | ||
+ | <position name="MaxSize" value="0, 0" /> | ||
+ | <bool name="NoClip" value="false" /> | ||
+ | <enum name="LeftAlign" value="upperLeft" /> | ||
+ | <enum name="RightAlign" value="upperLeft" /> | ||
+ | <enum name="TopAlign" value="upperLeft" /> | ||
+ | <enum name="BottomAlign" value="upperLeft" /> | ||
+ | <bool name="Visible" value="true" /> | ||
+ | <bool name="Enabled" value="true" /> | ||
+ | <bool name="TabStop" value="true" /> | ||
+ | <bool name="TabGroup" value="false" /> | ||
+ | <int name="TabOrder" value="3" /> | ||
+ | <bool name="Checked" value="false" /> | ||
+ | <int name="IconChecked" value="-1" /> | ||
+ | <int name="IconUnchecked" value="-1" /> | ||
+ | <string name="IconBankName" value="" /> | ||
+ | </attributes> | ||
+ | </element> | ||
+ | </code></pre> | ||
+ | === Table === | ||
+ | |||
+ | === MeshViewer === | ||
+ | |||
+ | === StaticText === | ||
+ | |||
+ | === EditBox === | ||
+ | |||
+ | === SpinBox === | ||
+ | |||
+ | === TabControl === | ||
+ | |||
+ | === Tab === | ||
+ | |||
+ | === ContextMenu === | ||
+ | |||
+ | === Menu === | ||
+ | |||
+ | === Toolbar === | ||
+ | |||
+ | === ComboBox === | ||
+ | |||
+ | === Chat === | ||
+ | |||
+ | === RadioButtonGroup === | ||
+ | |||
+ | === RadioCheckboxGroup === | ||
+ | |||
+ | === Slider === | ||
+ | |||
+ | === Tutorial === | ||
+ | |||
+ | === Callback === | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | [[Category:Guides]] |
Revision as of 18:21, 10 November 2010
Contents
- 1 Client 2 Skinning Guide
- 1.1 Creating a New Skin
- 1.2 XML Documentation
- 1.2.1 Button
- 1.2.2 Window
- 1.2.3 WindowTrans
- 1.2.4 ModalScreen
- 1.2.5 MessageBox
- 1.2.6 ScrollBar
- 1.2.7 Image
- 1.2.8 Rectangle
- 1.2.9 Checkbox
- 1.2.10 Table
- 1.2.11 MeshViewer
- 1.2.12 StaticText
- 1.2.13 EditBox
- 1.2.14 SpinBox
- 1.2.15 TabControl
- 1.2.16 Tab
- 1.2.17 ContextMenu
- 1.2.18 Menu
- 1.2.19 Toolbar
- 1.2.20 ComboBox
- 1.2.21 Chat
- 1.2.22 RadioButtonGroup
- 1.2.23 RadioCheckboxGroup
- 1.2.24 Slider
- 1.2.25 Tutorial
- 1.2.26 Callback
Client 2 Skinning Guide
Creating a New Skin
In Client 2, instead of editing the files in place, you actually create a new folder in the Contents dir. This will allow us to patch files without overwriting mods and allow people to share mods more easily.
Here is an example of creating a simple mod for C2:
- Create Contents/<newSkinName>/ next to Contents/Default
- Copy the appropriate file from Contents/Default/<dir1>/<dir2> to Contents/<newSkinName>/<dir1>/<dir2>
- Make the changes you want to make to the file
- Change the UserConfig.xml packages attribute to read packages="<newSkinName> Default" instead of packages="Default"
- This will tell C2 to first look in <newSkinName> for the files it needs, then revert to Default for anything it doesn't find. You can chain many of these packages to apply multiple mods. (Eventually we'll have a UI mod manager as well).
Lastly, the packages attribute can also read in zip files, so you could place a zip file named <newSkinName>.zip in Contents/ and add it to the packages in the same way, and it would read it. (This will make it even easier to share mods with others)
Any questions related to this can be sent to pip on the forums or asked on IRC.
XML Documentation
Button
Window
WindowTrans
ModalScreen
MessageBox
ScrollBar
Image
<element type="image">
Example:
<element type="image">
<attributes> <rect name="Rect" value="12, 37, 483, 305" /> <texture name="Texture" value="background.station.ships" /> <bool name="UseAlphaChannel" value="true" /> <color name="Color" value="9fffffff" /> <rect name="ImageRect" value="25, 63, 498, 333" /> </attributes>
</element>
Notes:
The texture name is the name of an image specified in images.xml
ImageRect specifies a subset of the image to display
Color is in the aarrggbb format
Rectangle
<element type="rectangle">
<attributes>
<string name="IdName" value="" />
<string name="TextID" value="" />
<int name="Id" value="-1" />
<string name="Caption" value="" />
<rect name="Rect" value="0, 0, 1, 1" />
<position name="MinSize" value="1, 1" />
<position name="MaxSize" value="0, 0" />
<bool name="NoClip" value="false" />
<enum name="LeftAlign" value="upperLeft" />
<enum name="RightAlign" value="upperLeft" />
<enum name="TopAlign" value="upperLeft" />
<enum name="BottomAlign" value="upperLeft" />
<bool name="Visible" value="true" />
<bool name="Enabled" value="true" />
<bool name="TabStop" value="false" />
<bool name="TabGroup" value="false" />
<int name="TabOrder" value="-1" />
<color name="col_left_up" value="ffffffff" />
<color name="col_right_up" value="ffffffff" />
<color name="col_left_down" value="ffffffff" />
<color name="col_right_down" value="ffffffff" />
</attributes>
</element>
Checkbox
<code><element type="checkBox"> <attributes> <string name="IdName" value="" /> <string name="TextID" value="" /> <int name="Id" value="-1" /> <string name="Caption" value="" /> <rect name="Rect" value="0, 0, 1, 1" /> <position name="MinSize" value="1, 1" /> <position name="MaxSize" value="0, 0" /> <bool name="NoClip" value="false" /> <enum name="LeftAlign" value="upperLeft" /> <enum name="RightAlign" value="upperLeft" /> <enum name="TopAlign" value="upperLeft" /> <enum name="BottomAlign" value="upperLeft" /> <bool name="Visible" value="true" /> <bool name="Enabled" value="true" /> <bool name="TabStop" value="true" /> <bool name="TabGroup" value="false" /> <int name="TabOrder" value="3" /> <bool name="Checked" value="false" /> <int name="IconChecked" value="-1" /> <int name="IconUnchecked" value="-1" /> <string name="IconBankName" value="" /> </attributes> </element> </code>