View Single Post
  #10  
Unread 05-28-2009, 02:43 PM
Frosty's Avatar
Frosty Frosty is offline
Tools and UI Engineer
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 177
Position skinning has changed in Moria Book 8. This is live on Bullroarer today.

The keywords remain the same, as does the parent/child relationship with respect to the location of elements.
What has changed is how the elements are listed in the SkinDictionary.txt file. In previous versions, the pieces of the UI could be modified but there were problems when multiple UIs shared the same "piece". In this and all future versions, you must identify what you want repositioned from the top level panel that contains the elements.

The SkinDictionary.txt file is your "dictionary" for all the panels. When you want to skin something, copy the text from the SkinDictionary.txt file into the SkinDefinition.xml file for your skin. It must lie inside the <opt> tags or it won't work Then, remove any fields you don't want to reposition and keep just the information you do.

This is best shown with an example. I'm going to use the radar and move the Area and Coordinate Location text to the top of the radar.

Here is the radar as it exists today (see image "radar_original" below)

And it's code in the SkinDictionary.txt file:

Code:
<PanelFile ID="ID_UISkin_GamePlay_RadarBox">
  <Element ID="GamePlay_RadarBox" X="1017" Y="16" Width="224" Height="260"> 
    <Element ID="HiddenDragBox_DragBox" X="0" Y="20" Width="224" Height="240"> 
      <Element ID="Box_01_Empty_InnerShadow" X="1" Y="1" Width="222" Height="238"> 
        <Element ID="InnerShadow_TopLeft" X="0" Y="0" Width="9" Height="9"> </Element>
        <Element ID="InnerShadow_MidLeft" X="0" Y="9" Width="9" Height="220"> </Element>
        <Element ID="InnerShadow_BottomLeft" X="0" Y="229" Width="9" Height="9"> </Element>
        <Element ID="InnerShadow_BottomMid" X="9" Y="229" Width="204" Height="9"> </Element>
        <Element ID="InnerShadow_BottomRight" X="213" Y="229" Width="9" Height="9"> </Element>
        <Element ID="InnerShadow_MidRight" X="213" Y="9" Width="9" Height="220"> </Element>
        <Element ID="InnerShadow_TopRight" X="213" Y="0" Width="9" Height="9"> </Element>
        <Element ID="InnerShadow_TopMid" X="9" Y="0" Width="204" Height="9"> </Element>
      </Element>
      <Element ID="Box_01_Empty_LeftBorder" X="0" Y="0" Width="1" Height="240"> </Element>
      <Element ID="Box_01_Empty_BottomBorder" X="1" Y="239" Width="222" Height="1"> </Element>
      <Element ID="Box_01_Empty_RightBorder" X="223" Y="0" Width="1" Height="240"> </Element>
      <Element ID="Box_01_Empty_TopBorder" X="1" Y="0" Width="222" Height="1"> </Element>
    </Element>
    <Element ID="HiddenDragBox_DragBar" X="0" Y="0" Width="224" Height="20"> </Element>
    <Element ID="HiddenDragBox_TitleText" X="-15" Y="0" Width="254" Height="20"> </Element>
    <Element ID="GamePlay_Radar" X="0" Y="20" Width="224" Height="260"> 
      <Element ID="ToolbarButton_AreaText_DangerousArea_TutorialHighlight" X="27" Y="200" Width="170" Height="16"> 
        <Element ID="TutorialHighlighter_LeftBorder" X="0" Y="0" Width="3" Height="16"> </Element>
        <Element ID="TutorialHighlighter_BottomBorder" X="3" Y="13" Width="164" Height="3"> </Element>
        <Element ID="TutorialHighlighter_RightBorder" X="167" Y="0" Width="3" Height="16"> </Element>
        <Element ID="TutorialHighlighter_TopBorder" X="3" Y="0" Width="164" Height="3"> </Element>
      </Element>
      <Element ID="AreaText_QuestHighlight" X="0" Y="194" Width="224" Height="32"> </Element>
      <Element ID="CoordinateText_Label" X="12" Y="220" Width="200" Height="20"> </Element>
      <Element ID="MinimapViewport" X="27" Y="0" Width="170" Height="170"> 
        <Element ID="HousingPanel_DecoButton" X="25" Y="152" Width="25" Height="25"> 
          <Element ID="HousingDecorationButton_Button" X="0" Y="0" Width="20" Height="20"> </Element>
        </Element>
        <Element ID="TutorialHighlighter_Housing_Buttons" X="1" Y="161" Width="64" Height="64"> 
          <Element ID="TutorialHighlighter_Housing_Buttons_Arrow" X="0" Y="0" Width="15" Height="7"> </Element>
        </Element>
        <Element ID="TimeOfDay" X="9" Y="5" Width="22" Height="22"> </Element>
        <Element ID="MinimapFogOfWarDisplay" X="0" Y="-1" Width="2048" Height="1536"> 
          <Element ID="MinimapFogOfWarParent" X="0" Y="0" Width="2048" Height="1536"> 
            <Element ID="MinimapFogOfWarField" X="0" Y="0" Width="2048" Height="1536"> </Element>
          </Element>
        </Element>
        <Element ID="MinimapMapImage" X="0" Y="-1" Width="2048" Height="1536"> </Element>
        <Element ID="RadarMapImage" X="-196" Y="-212" Width="600" Height="600"> 
          <Element ID="MapNoteTemplate" X="0" Y="0" Width="30" Height="30"> 
            <Element ID="MTButton" X="0" Y="0" Width="30" Height="30"> </Element>
          </Element>
          <Element ID="RadarMapImage_Template" X="0" Y="0" Width="200" Height="200"> </Element>
        </Element>
        <Element ID="MinimapPlayerMarker" X="71" Y="71" Width="28" Height="28"> </Element>
        <Element ID="Minimap_Frame" X="-34" Y="-33" Width="237" Height="237"> </Element>
        <Element ID="RadarQuestObjective" X="0" Y="0" Width="30" Height="30"> 
          <Element ID="MTButton" X="0" Y="0" Width="30" Height="30"> </Element>
        </Element>
        <Element ID="HousingPanel_Button" X="9" Y="140" Width="25" Height="20"> 
          <Element ID="HousingPanelButton_Button" X="0" Y="0" Width="20" Height="20"> </Element>
        </Element>
        <Element ID="PerkBuy_DestinyPoints" X="137" Y="5" Width="25" Height="25"> </Element>
        <Element ID="Mood" X="127" Y="148" Width="22" Height="22"> </Element>
        <Element ID="MapZoom" X="147" Y="127" Width="25" Height="25"> </Element>
        <Element ID="WebJournalButton" X="152" Y="24" Width="25" Height="25"> </Element>
      </Element>
      <Element ID="AreaText_Label" X="27" Y="200" Width="170" Height="20"> </Element>
    </Element>
  </Element>
</PanelFile>
This is typical of many of the items in the SkinDictionary.txt file - it lists out EVERYTHING. Most of the time you won't (or don't) have to change the guts of a panel if you're interested in doing some simple re-organization.
As a first step, I'm going to remove all of the items from the radar that I don't care about...

Code:
  <PanelFile ID="ID_UISkin_GamePlay_RadarBox">
    <Element ID="GamePlay_RadarBox" X="1017" Y="16" Width="224" Height="260">
      <Element ID="GamePlay_Radar" X="0" Y="20" Width="224" Height="260">
        <Element ID="CoordinateText_Label" X="12" Y="220" Width="200" Height="20"> </Element>
        <Element ID="MinimapViewport" X="27" Y="0" Width="170" Height="170"></Element>
        <Element ID="AreaText_Label" X="27" Y="200" Width="170" Height="20"> </Element>
      </Element>
    </Element>
  </PanelFile>
Much more manageable. Note: most of the stuff I deleted is in the MinimapViewport. I don't care about the majority of the MinimapViewport's internals, since I want to move the whole radar down and keep it intact. Simply by moving the MinimapViewport down, all the buttons associated with the radar ring will automatically move too! Whew! Less work for me.

Now for my changes: I'm going to move the AreaText_Label to the top of the radar, the CoordinateText_Label underneath, then the radar below that. Because I'm a neat freak, I'm going to re-arrange the order of the elements and keep them in Y-coordinate order:

Code:
  <PanelFile ID="ID_UISkin_GamePlay_RadarBox">
    <Element ID="GamePlay_RadarBox" X="1017" Y="16" Width="224" Height="260">
      <Element ID="GamePlay_Radar" X="0" Y="20" Width="224" Height="260">
        <Element ID="AreaText_Label" X="27" Y="0" Width="170" Height="20"> </Element>
        <Element ID="CoordinateText_Label" X="12" Y="20" Width="200" Height="20"> </Element>
        <Element ID="MinimapViewport" X="27" Y="60" Width="170" Height="170"></Element>
      </Element>
    </Element>
  </PanelFile>
Save the SkinDefinition.xml file and restart your client. If you already have the skin assigned, when you go into the game you should see the changes. If not, you will need to set the skin on the options panel, then log out and back in again to see the changes.

Here's the modified radar skin (see the image "radar_modified" below)

Enjoy your skinning!
-P
Attached Thumbnails
Click image for larger version

Name:	radar_original.JPG
Views:	1622
Size:	14.7 KB
ID:	139  Click image for larger version

Name:	radar_modified.JPG
Views:	1708
Size:	14.0 KB
ID:	140  
Reply With Quote