Quantcast Skinning sizes and Positions - LoTROInterface
VGInterface.com
Search Downloads


Go Back   LoTROInterface > LotRO > Developer Discussions > Tutorials & Other Helpful Information (L)

Reply
Thread Tools Display Modes
  #1  
Unread 06-06-2007, 03:52 PM
Frosty's Avatar
Frosty Frosty is offline
Tools and UI Engineer
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 177
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.

Last edited by Frosty : 05-28-2009 at 02:39 PM. Reason: modified the thread title
Reply With Quote
  #2  
Unread 06-06-2007, 04:08 PM
Kuvasie's Avatar
Kuvasie Kuvasie is offline
Super Moderator
Premium Member
LOTROInterface Super Mod
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Location: Texas
Posts: 67
Quote:
We will be publishing a full "dictionary" of skinnable elements soon.
Wonderful - thanks for the preview Frosty.

Kuv
Reply With Quote
  #3  
Unread 06-07-2007, 11:25 AM
Brode's Avatar
Brode Brode is offline
The Undying
 
Join Date: Apr 2007
Posts: 47
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.
Reply With Quote
  #4  
Unread 06-11-2007, 06:12 PM
AstroCat's Avatar
AstroCat AstroCat is offline
The Unscathed
 
Join Date: Mar 2007
Posts: 18
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!

Last edited by AstroCat : 06-11-2007 at 06:38 PM.
Reply With Quote
  #5  
Unread 06-14-2007, 07:46 PM
Navarion Navarion is offline
The Wary
Interface Author - Click to view interfaces
 
Join Date: Jun 2007
Posts: 1
Vote for: Please release the default SkinDefinition.xml file.
Reply With Quote
  #6  
Unread 06-15-2007, 04:08 AM
nulajedan's Avatar
nulajedan nulajedan is offline
The Wary
 
Join Date: Jun 2007
Location: Croatia
Posts: 1
Send a message via ICQ to nulajedan
yes, default SkinDefinition.xml file would be great, thanks
__________________
I love the smell of napalm in the morning.
- Lieutenant Colonel Bill Kilgore
Reply With Quote
  #7  
Unread 08-23-2007, 10:03 AM
Bulletsix Bulletsix is offline
The Undefeated
 
Join Date: Aug 2007
Posts: 8
any news to this? (it may be just me not finding anything )

and:

Does Book 10 change this part (toolbar-element-positioning)?
Reply With Quote
  #8  
Unread 08-23-2007, 10:06 AM
Frosty's Avatar
Frosty Frosty is offline
Tools and UI Engineer
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 177
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
Reply With Quote
  #9  
Unread 08-27-2007, 05:52 AM
Bulletsix Bulletsix is offline
The Undefeated
 
Join Date: Aug 2007
Posts: 8
ah!

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

thanks for the info
__________________
____________________

Thanks to D.H1cks for is awesome editor!!
____________________
Reply With Quote
  #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:	684
Size:	14.7 KB
ID:	139  Click image for larger version

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


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -5. The time now is 09:01 PM.


Our Network
EQInterface | EQ2Interface | Minion | WoWInterface | VGInterface | LoTROInterface | MMOInterface | Swtorui