View Single Post
  #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