Example Skin Modifications

Adding a new widget

Widgets are part of the action_bar.xml file (the top bar), so to make another widget, firstly we need to move a copy of action_bar.xml over to our own skin so we won't lose our changes.

This is the XML for the speed indicator:

    <!-- Speed Indicator -->
    <element type="progressbar">
      <attributes>
        <string name="IdName" value="progressSpeed" />
        <rect name="Rect" value="0, 0, 100, 22" />
        <bool name="Dynamic" value="true" />
        <int name="IconWidth" value="22" />
        <string name="ToolTip" value="Current Speed" />
      </attributes>

      <bindings>
        <slot name="setText" signal="player_speed_text" id="GameManager" />
      </bindings>

      <element type="customButton">
        <attributes>
          <rect name="Rect" value="3, 3, 19, 19" />
          <bool name="Border" value="true" />
        </attributes>
        <element type="customImage">
          <attributes>
            <rect name="Rect" value="1, 1, 16, 16" />
            <string name="SpriteBank" value="items_small" />
            <string name="SpriteName" value="Speed" />
            <bool name="UseAlphaChannel" value="true" />
            <color name="Color" value="ff6effff" />
            <bool name="ScaleImage" value="false" />
            <bool name="CenterImage" value="true" />
          </attributes>
        </element>
      </element>
    </element>

Copy and paste this just after it, so we can change this to display something else, there are a few key lines. Namely the IdName, '<string name="ToolTip" value="Current speed"/>' the contents of bindings and the two strings in customImage.

IdName isn't used by the client unless it's a window, in general this can be what you want, but it shouldn't be the same as something else that already exists.

The customImage element sets the picture that is shown on the button to hide/show the value, to use a texture file which you specify yourself, or listed in images.xml, you'll have to change those two lines to '<texture name="Texture" value="texture.name"/>', where texture.name is the name listed in images.xml for that image or a path like 'UI/Images/misc/image1.png', if your image already has colour, or has multiple colours, you'll probably want to change 'value="ff6effff"' to 'value="ffffffff"'. Change 'Current speed' to any piece of text you like to change the text displayed when the tool tip shows, to change this to a value that is set by the client instead of just text is a bit more complicated, we'll look at that later.

The actual value is set by bindings, the bindings section is the important bit, it sets what gets displayed and how the UI interacts with the code in the client. In this case, our binding is this: '<slot name="setText" signal="player_speed_text" id="GameManager" />' This sets the slot 'setText' to receive a signal 'player_speed_text' from the manager 'GameManager'. You can change this value to something else, such as, if you wanted to display your visibility there, you can change signal to 'player_visibility'. A list of variables can be found at the end of this guide/tutorial.

Once you've done all that, you are done. Save your file, make sure you have a root.xml which specifies to load it and start your client to see your changes.

Giving the gapmap a static window

Again, copy the file over to your skin, the file is galaxy_map.xml.

Firstly, we want to make the window always appear, since it'll be static in it's location and always showing. To do this, we need to set Visible to true, which is on line 9, then we also need to set Movable to false, which is on line 8. Now when you start the client, the galmap window will be visible, when you press the button it'll disappear, and it's no longer movable.

Next, we need to disable the button, since the bindings section on lines 14-20 control this, it can all go, including the bindings tags themselves. So delete lines 14-20. If you ran the client now, the window would not move, always show, and the button will do nothing.

Now we need to place the galaxymap where we want it, we can do this by changing two values, Rect and PercRect. Rect sets the coords for two points, it is in the form of x1, y1, x2, y2. This means that x1 and y1 is the top left corner, and x2 and y2 is the bottom left corner. PercRect sets the percentage value of the current parent window, as such. If I wanted to put the gal map on the right hand side, in the middle of the Y axis, in enough to avoid the floaties. I'd set these two lines to the following;

<rect name="Rect" value="-312, 0, -56, 276"/>
<rectf name="PercRect" value="1.0, 0.5, 1.0, 0.5"/>

Finally, we need to delete the galmap button on the bottom bar, so copy bottom_bar.xml across to your skin directory and delete lines 175 through to 233. You might have to change the positions of the other buttons to the left of it afterwards, but you can do that much in the same way as moving the galmap window around, just change the Rect values.

A list of UI variables is available at https://docs.google.com/spreadsheet/ccc?key=0AteE8uOXJmHDdFJFYlJhVUlUb3d0LTRzMHJ5MVJlaXc&hl=en_GB#gid=0. Contact Jeff Bobbo/Blue Dwarf for access to this to add stuff to it.

If you would like a new example for something, just ask on the talk page. Remember to sign your request with ~~~~