LoTROInterface

LoTROInterface (https://www.lotrointerface.com/forums/index.php)
-   Tutorials & Other Helpful Information (L) (https://www.lotrointerface.com/forums/forumdisplay.php?f=21)
-   -   Skinning sizes and Positions (https://www.lotrointerface.com/forums/showthread.php?t=250)

Frosty 06-06-2007 03:52 PM

Updated: Skinning sizes and Positions (05/27/2009)
 
As of June 6, this only works on Roheryn!

Skinning Positions and Sizes
--------------------------------
We now allow position and size replacement of the UI. More keywords have
been added to the SkinDefinition.xml file to allow you to change the
default location and size of many elements on the screen. This document
assumes you've read the UI Skinning Image Replacement document and understand
the file format of the SkinDefinition.xml file.

Sample Modification for the Toolbar
-----------------------------------
The following is a sample of a new XML section in the SkinDefinition.xml
file used to move the toolbar into the middle of the screen and reposition
the buttons.

<PanelFile ID="toolbar">
<Element ID="ToolbarField" X="300" Y="100" Width="420" Height="125" Detach="1">

<Element ID="ToolbarFieldMain" X="0" Y="0" Width="1" Height="1"></Element>

<Element ID="LevelMeter" X="0" Y="0" Width="420" Height="30">
<Element ID="LevelMeterFill" X="5" Y="12" Width="420" Height="6">
<Element ID="LevelMeter_BonusMeter" X="0" Y="0" Width="420" Height="6"></Element>
</Element>
<Element ID="ToolbarButton_LevelUpXP_TutorialHighlight" X="0" Y="10" Width="420" Height="10"></Element>
<Element ID="ToolbarButton_Experience_TutorialHighlight" X="0" Y="10" Width="420" Height="10"></Element>
<Element ID="LevelMeterText" X="3" Y="10" Width="420" Height="10"></Element>
</Element>

<Element ID="AutoAttackIndicatorButton" X="175" Y="30" Width="40" Height="30"></Element>
<Element ID="ViolentModeIndicator" X="175" Y="30" Width="40" Height="30"></Element>
<Element ID="ToolbarButton_AutoAttack_TutorialHighlight" X="175" Y="30" Width="40" Height="30"></Element>
<Element ID="GamePlay_FervorPipDisplay" X="175" Y="30" Width="90" Height="42"></Element>
<Element ID="GamePlay_AimPipDisplay" X="175" Y="30" Width="90" Height="42"></Element>

<Element ID="ToolBarButton_MainMenu" X="240" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolbarButton_Crafting" X="270" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolbarButton_Social" X="300" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolbarButton_Accomplishment" X="330" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolBarButton_Quest" X="360" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolbarButton_Journal" X="390" Y="30" Width="30" Height="30"></Element>

<Element ID="ToolbarButton_Inventory" X="120" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolBarButton_Inventory2" X="90" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolBarButton_Inventory3" X="60" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolBarButton_Inventory4" X="30" Y="30" Width="30" Height="30"></Element>
<Element ID="ToolBarButton_Inventory5" X="0" Y="30" Width="30" Height="30"></Element>

<Element ID="Toolbar_Quickslot" X="0" Y="60" Width="420" Height="35"></Element>
</Element>
</PanelFile>

Keywords
--------
<PanelFile ID="toolbar">
PanelFile is the keyword that you use to specify the panel to be modified.
In LOTRO, any "top level UI" is called a panel. This keyword is what hooks
up the sub-tags into a UI in the engine. It's required. A PanelFile will
contain one or more "Element" tags to specify the position and size of the
elements in the panel's heirarchy.

<Element ID="ToolbarField" X="300" Y="100" Width="420" Height="125" Detach="1">
Element is the keyword that identifies a single element in panel to be modified.
An element will contain zero or more children elements. In this example, the
"ToolbarField" contains the art background, the level meter (which has it's
own set of children) the main bar's quickslot and all of the action buttons.
Note: you DO NOT need to specify the location and size for every Element in
the panel! If you like the location and size of an element or one of it's
children, you can simply remove the definition from the XML. All of the
coordinates are parent relative, so if nothing is specified, the engine
will use the defaults in the UI.

The ID is a string the engine expects and uses to identify the element in the
UI to be modified.

X and Y are the location within the parent that this child element appears.
In the example above, the "ToolbarButton_Inventory" lies at X,Y = 120,30 of
it's parent - these are it's parent-relative corrdinates. On the screen,
that equates to 420, 130 (300 + 120 = ToolbarField.X + ToolbarButton_Inventory.X
and 100 + 30 ToolbarField.Y + ToolbarButton_Inventory.Y)

Width and Height are the dimensions of the element in the UI. Width and
height must be greater than or equal to 1. A zero width or height is an
error. In the example above, the "ToolbarFieldMain" has a width and a height
of 1, which is how the background of the toolbar is erased. (This could
also be accomplished by changing the skinned texture of the toolbar field
to an empty tga.)

Detach is a special keyword that's only used by the toolbar at this time!
It removes the attachment information from the element so that it appears
where you've placed it. Many of the UIs have attachments that position
items within the panel to make them look right. Arbitrarily changing the
"Detach" keyword may have strange or undesirable consequences. "Detach"
can either be "1" or "0". If there is no Detach="1" specified with the
element, the default is Detach=0.

Caveats Ahoy!
--------------
You can currently change skins in the Options panel by selecting a new skin
from the listbox. Any graphics associated with the change occur immediately.
However, we need to recreate the UI from scratch when you change sizes and
positions. To do this, you must log out of the game and back in again.
You can either exit the game or return to the character selection screen
to reset the UI. A "reload UI" command will undoubtedly be one of the
first things we do for UI skinning.

As of this writing, the toolbar is the only UI that allows skinning of
sizes and positions. Future changes and panels will be activated with
an upcoming patch.

The skinning code does not automatically stretch images for you! You cannot
simply change
<Element ID="ToolBarButton_Quest" X="360" Y="30" Width="30" Height="30"></Element>
to
<Element ID="ToolBarButton_Quest" X="360" Y="30" Width="60" Height="60"></Element>

and expect the image to be twice as big! You must reskin the image using
the graphic reskinning technology covered elsewhere.

Due to a bug in the code, you have to replace any one image in the UI in
order for the position size and location tech to work. This is being fixed.

We will be publishing a full "dictionary" of skinnable elements soon.

Kuvasie 06-06-2007 04:08 PM

Quote:

We will be publishing a full "dictionary" of skinnable elements soon.
Wonderful - thanks for the preview Frosty.

Kuv

Brode 06-07-2007 11:25 AM

Thanks Frosty. Im really looking forward to the UI changes. UI modding and customization plays a HUGE part in mmorpg enjoyment for alot of people. WoW and EQ2 have spoiled us in this regard, and new mmo should release with this in mind.

wish list
1-Transparency control per chat tab
2- combat log- Hitsmode(full,abbr,mini) also like to be able to color incoming/outgoing combat text
3-custom map POIs

Thanks for giving the UI your attention, the community appreciates it.

AstroCat 06-11-2007 06:12 PM

Could you give us a default template to work off of? Oh and any luck getting us the original art assets?

For example: the LetterBoxBottom is currently: 1024 x 85

How would I change this to: 1024 x 121 so that I can add more to the top of the current art asset?

I can kind of get this to work, but some of the other assets get out of align even though I am not putting them in to my .xml file. I think that is why a default .xml would be good to see. I'm using a res. of 1280x960 but even at 1024x768 I think I could figure it out if I had a template.

Thanks!

Navarion 06-14-2007 07:46 PM

Vote for: Please release the default SkinDefinition.xml file. ;)

nulajedan 06-15-2007 04:08 AM

yes, default SkinDefinition.xml file would be great, thanks

Bulletsix 08-23-2007 10:03 AM

any news to this? (it may be just me not finding anything ;) )

and:

Does Book 10 change this part (toolbar-element-positioning)?

Frosty 08-23-2007 10:06 AM

Yup, this was all updated for book 10 and is now live on all worlds. see this post:

http://www.lotrointerface.com/forums...read.php?t=349

-P

Bulletsix 08-27-2007 05:52 AM

ah!

after reading this more thoroughly and looking at the file i think i understand now :)

thanks for the info :)

Frosty 05-28-2009 02:43 PM

2 Attachment(s)
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


All times are GMT -5. The time now is 07:14 AM.

vBulletin® - Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
© MMOUI