View Single Post
  #8  
Unread 09-23-2015, 09:21 AM
Thurallor's Avatar
Thurallor Thurallor is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: May 2013
Posts: 202
A couple of other things, in addition to Adra's excellent summary, that a beginner needs to know:
  1. What is an XML file?

    An XML file is not a computer program. It does not contain a sequence of instructions for the computer to execute. Instead, it merely describes the structure and characteristics of something. In the case of LOTRO, we use an XML file to describe the structure and characteristics of the UI.

  2. What is inside an XML file?

    An XML file contains tags and attributes.

  3. What are tags?

    A tag is a word surrounded by angle brackets (<, >).

    Some examples of tags you will find in a SkinDefinition.xml file:
    Code:
    <PanelFile>
    <Element>
    <Mapping>
    The above are called opening tags. For each opening tag there must be a corresponding closing tag with the same name. Closing tags start with a slash (/). Examples of closing tags:
    Code:
    </PanelFile>
    </Element>
    </Mapping>
    Everything that appears between an opening tag and the corresponding closing tag is logically "inside" the tag. Example:
    Code:
    <PanelFile><Element></Element><Element></Element></PanelFile>
    In the above example, the two Elements are inside the PanelFile.

    Note that spacing and linebreaks between the tags don't matter, so you can use indentation to make the structure clearer:
    Code:
    <PanelFile>
        <Element></Element>
        <Element></Element>
    </PanelFile>
    If there is nothing inside a tag, there is a shorthand way to write the tag: just put a slash (/) at the end of the opening tag; then you can omit the closing tag. Example (this is equivalant to the previous example):
    Code:
    <PanelFile>
        <Element />
        <Element />
    </PanelFile>
  4. What are attributes?

    An attribute is a word that appears inside a tag, after the name, and has a value. Examples of attributes that can appear in a SkinDefinition.xml file:
    Code:
    <Element ID="Auction_MainField" X="0" Y="11" Width="1024" Height="767" />
    The above specifies information about a UI element called "Auction_MainField". The attributes are ID, X, Y, Width, and Height. The attribute values specify that the ID of this element is "Auction_MainField"; the location is X=0, Y=11, the width is 1024, and the height is 767. (All of the numbers are in units of pixels.)

    Note that the X and Y values are specified relative to the containing element. Example:
    Code:
    <PanelFile ID="ID_UISkin_Auction_MainField">
        <Element ID="Auction_MainField" X="0" Y="11" Width="1024" Height="767">
            <Element ID="Auction_TitleBar" X="315" Y="-11" Width="392" Height="40">
                <Element ID="Auction_TitleBar_Label" X="16" Y="12" Width="360" Height="25" />
            </Element>
        </Element>
    </PanelFile>
    In the above example, assume that the "ID_UISkin_Auction_MainField" panel happens to be located at X=100, Y=100 on the screen. The "Auction_MainField" element's location is given as X=0, Y=11. Since it is contained within the "ID_UISkin_Auction_MainField" panel, its location is relative to X=100, Y=100, so its actual location is X=100, Y=111.

    Similarly, the "Auction_TitleBar" element is located at X=315, Y=-11 relative to X=100, Y=111, so its actual location is X=415, Y=100.

  5. Making your own UI skin

    The skinning pack from Turbine comes with two XML files (although one of them doesn't have the XML extension, for whatever reason):
    SkinDefinition.xml
    SkinDictionary.txt

    To create your own UI skin, you can use this SkinDefinition.xml file as a starting point. It contains a huge list of all of the images (.tga files) in the game that you can replace. Each line in the file has a <Mapping> tag, with two attributes. Example:
    Code:
    <Mapping ArtAssetID="ActionPicker_Base_Background" FileName="ActionPicker_Base_Background.tga" />
    If you want to use the default image in your skin, you can remove this <Mapping> tag from the SkinDefinition.xml file and delete the corresponding .tga file. If you want to change the image, leave the <Mapping> tag alone and edit the .tga file with Photoshop, etc.

    If you want to change the sizes and locations of the UI elements, you can copy the appropriate <PanelFile> tag from the SkinDictionary.txt file and paste it into your SkinDefinition.xml file. Be sure to copy everything between the opening and closing PanelFile tags. Then you can edit the location (X, Y) and size (Width, Height) attributes to achieve the effect you want.

    To see the results of your changes, after you have edited the SkinDefinition.xml file, you have to quit and restart the game.
Reply With Quote