Quantcast Skinning the LOTRO UI - LoTROInterface
VGInterface.com
Search Downloads


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

Reply
Thread Tools Display Modes
  #1  
Unread 02-09-2007, 04:06 PM
Cairenn's Avatar
Cairenn Cairenn is offline
Credendo Vides
Premium Member
LOTROInterface Admin
Interface Author - Click to view interfaces
 
Join Date: Jan 2007
Posts: 628
Skinning the LOTRO UI

Skinning the LOTRO UI
You may have noticed a new tab on the "Options" panel: User Skins. LOTRO now gives you the ability to provide different media for some of the panels in the game. We don't allow you to do a fullscale UI replacement, but we do give you the ability to replace selected media. (A full list of the media is provided at the end of this document.)

The Directory Structure
All of the UI skins created by users must lie in an expected location. We have defined this location as the "<documents>\ui\skins" directory. Each user defined skins should be placed in a separate subdirectory under our pre-defined location, so you may have something like:

"<documents>\ui\skins\ChatReva mp"
"<documents>\ui\skins\RedToolb ar"
"<documents>\ui\skins\TestSkin "

etc.
Inside each user defined skin directory a skin definition file is expected. This XML file is named "SkinDefinition.xml" for every skin (discussed below.)
The remaining files in this directory are the media files. The media files are generally TGAs (RGB + alpha).

Note: the "<documents>" directory is where you can find the UserPreferences.ini file. It is usually something like

"C:\Documents and Settings\username\My Documents\The Lord of the Rings Online"

The Skin Definition File Structure
The skin definition provides two pieces of information: the name of the skin (which is displayed on the "User Skins" option panel listbox) and the list of media that the skin replaces. The two xml tags are:

SkinName
- the name of the skin. There should only be one SkinName tag in the file.
Mapping - the mapping of an ArtAssetID to an image FileName. There will be one mapping in the file for each piece of media that is going to be replaced.

The "Mapping" tag has two parts:

ArtAssetID - a string representing in internal identification of an image. We provide you a "dictionary" of all valid mappings from which to chose (see below)
FileName - the local file to use when rendering that ArtAssetID. These can be any media on your drive.

A sample skin file is as follows:

Code:
<?xml version="1.0" encoding="UTF-8"?>
<opt>
<SkinName Name="RedToolbar"></SkinName>
<Mapping ArtAssetID="LetterBoxBottom" FileName="letterbox_bottom_red .tga"></Mapping>
</opt>
The sample skin is named "RedToolbar" and replaces one piece of media: the toolbar identified by "LetterBoxBotton" is replaced by the file

"<documents>\ui\skins\RedToolb ar\letterbox_bottom_red.tga"

Activating Your Skin
  1. To activate your skin, launch the game.
  2. Open the Options panel, Ctrl-O.
  3. Click the "User Skins" button.
  4. In the "Current User Skin" droplist, select your skin.
The UI changes!

If your skin is not in the list, it failed to parse. Make sure your tags are all specified and closed! Currently, the game must be relaunched whenever a new skin is added or a change is made to an existing skin.


L33t H4xx0rs Need Apply

You'll notice in the directory that we don't tell you the size of the images or (precisely) what the ArtAssetID tags are. Hopefully the names are clues enough. There's so much media in the game, we haven't yet identified all the file sizes and names for all the art. It's up to you to experiment!

ArtAssetID Dictionary

The following is an alphabetically list of all ArtAssetIDs that can be replaced by the game.

accomplishment_journal_normal
accomplishment_journal_pressed
accomplishment_journal_rollover
bag_inventory
bag1
bag1_normal
bag1_pressed
bag1_rollover
bag2
bag2_normal
bag2_pressed
bag2_rollover
bag3
bag3_normal
bag3_pressed
bag3_rollover
bag4
bag4_normal
bag4_pressed
bag4_rollover
base_box_center
base_box_center_silver
base_box_titlebar_left
base_box_titlebar_right
base_box_titlebar_top
basepanel_bottomleft
basepanel_bottommid
basepanel_bottomright
basepanel_midleft
basepanel_midright
basepanel_topleft
basepanel_topmid
basepanel_topright
black_translucent
blue_mail_select_highlight
blue_mail_select_highlight_active
blue_mail_select_highlight_active_admin
blue_mail_select_normal
blue_selection
blue_selection_accomplisment_updated
blue_selection_bright
blue_selection_quest_highlight
blue_selection_quest_highlight_active
blue_selection_quest_normal
blue_selection_selectable_reward_highlight
blue_selection_skilltrainer_ghosted
blue_selection_skilltrainer_highlight
blue_selection_skilltrainer_highlight_active
blue_selection_skilltrainer_normal
blue_selection_title_highlight
blue_selection_vendor_item_highlight_active
blue_selection_vendor_item_normal
blue_selection_vendor_item_repair
blue_selection_vendor_item_repair_normal
blue_tracking_select_highlight
blue_tracking_select_highlight_active
blue_tracking_select_normal
box_01_titlebar
box_silver_bottom
box_silver_bottom_left
box_silver_bottom_left_noadorn
box_silver_lower_right
box_silver_lower_right_noadorn
box_silver_side_left
box_silver_side_right
box_silver_upper
box_silver_upper_left
box_silver_upper_left_noadorn
box_silver_upper_right
box_silver_upper_right_noadorn
button_autoattack_highlight
button_autoattack_highlight_mouseover
button_autoattack_highlight_pressed
button_autoattack_mouseover
button_autoattack_normal
button_autoattack_normal_pressed
button_main_mouseover
button_main_normal
button_main_pressed
chat_back
chat_entry_focussed
chat_tab_tier1_middle_back_e
chat_tab_tier1_middle_back_n
chat_tab_tier1_middle_back_w
chat_tab_tier1_middle_front_e
chat_tab_tier1_middle_front_n
chat_tab_tier1_middle_front_w
chat_unread_overlay
crafting_highlight
crafting_normal
crafting_pressed
fellowship_normal
fellowship_pressed
fellowship_rollover
green_selection_vendor_item_stacktoggleon
green_selection_vendor_item_stacktoggleon_highligh t
im_button_close_highlight_active
im_button_close_normal
im_button_close_pressed
im_button_close_rollover
im_button_ghosted
im_button_normal
im_button_pressed
im_button_rollover
im_chat_alert
inventory_normal
inventory_pressed
inventory_rollover
journal_normal
journal_pressed
journal_rollover
LetterBoxBottom
LFP_Top_BG
LFP_Unavailable_Overlay
main_menu_normal
main_menu_pressed
main_menu_rollover
map_normal
map_pressed
map_rollover
money_player_all_background
no_hope_no_dread
options_panel_divider
panel_border
pedigree_bg
quest_normal
quest_pressed
quest_rollover
selection_inanimate_backdrop
social_panel_list_elements_highlight_bottom_center
social_panel_list_elements_highlight_bottom_left
social_panel_list_elements_highlight_center
social_panel_list_elements_highlight_lower_right
social_panel_list_elements_highlight_middle_left
social_panel_list_elements_highlight_middle_right
social_panel_list_elements_highlight_top_center
social_panel_list_elements_highlight_top_left
social_panel_list_elements_highlight_top_right
social_panel_list_elements_normal_bottom_center
social_panel_list_elements_normal_bottom_left
social_panel_list_elements_normal_lower_right
social_panel_list_elements_normal_middle_left
social_panel_list_elements_normal_middle_right
social_panel_list_elements_normal_top_center
social_panel_list_elements_normal_top_left
social_panel_list_elements_normal_top_right
tab_tier1_middle_back_e
tab_tier1_middle_back_e_sm
tab_tier1_middle_back_n
tab_tier1_middle_back_n_sm
tab_tier1_middle_back_w
tab_tier1_middle_back_w_sm
tab_tier1_middle_front_e
tab_tier1_middle_front_e_sm
tab_tier1_middle_front_n
tab_tier1_middle_front_n_sm
tab_tier1_middle_front_w
tab_tier1_middle_front_w_sm
textbutton_left_ghosted
textbutton_left_highlighted_mouseover
textbutton_left_highlighted_normal
textbutton_left_highlighted_pressed
textbutton_left_mouseover
textbutton_left_normal
textbutton_left_pressed
textbutton_mid_ghosted
textbutton_mid_highlighted_mouseover
textbutton_mid_highlighted_normal
textbutton_mid_highlighted_pressed
textbutton_mid_mouseover
textbutton_mid_normal
textbutton_mid_pressed
textbutton_right_ghosted
textbutton_right_highlighted_mouseover
textbutton_right_highlighted_normal
textbutton_right_highlighted_pressed
textbutton_right_mouseover
textbutton_right_normal
textbutton_right_pressed
tga_empty
titlebar_X_2
titlebar_X_2_mouseover
titlebar_X_2_pressed
Who_MyOptions_BG

To figure out the sizes of things, use these two tricks for now:

Quote:
A simple solution to ge the EXACT dimensions is thus:

A) open paint program
B) make a 1x1 pixel image
C) Color it some obnoxious color (orange is good here)
D) add the alpha channel, make it opaque
E) Save as 32 bit TGA
F) Use it in place of whatever thing you want to get the size.
G) Open LOTRO
H) Change skin
I) Look for change.
J) Take screenshot
K) Open screenshot in paint program
L) Measure the orage area of whatever was replaced.
and

Quote:
Just a little information for other skinners who haven't figured this out yet:
If you create a SkinDefinition.xml file specifying a non-existant image file the client will load a grid pattern; allowing you to use the above method for getting the size without the need for creating an image file.
You can see the results of you image changes without reloading the client;

1. Load up the client and login to the game.
2. Load up your skin, this is how it is now.
3. Change back to the default & alt+tab into your image editor.
4. Make your changes & save them
5. alt+tab back in to the game & change back to your skin, you should see the update image.

Happy Skinning!

P.S. the bottom toolbar is 1074 x 85 pixels.
All information taken from the Skinning the LotRO UI thread in Turbine's Beta UI Forum.

Updated version of this posted by Turbine today, here

Last edited by Cairenn : 04-26-2007 at 12:14 PM.
Reply With Quote
  #2  
Unread 02-16-2007, 11:22 AM
Xukii Xukii is offline
The Unscathed
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 16
As well as targa files i found its also possible to use jpegs. Also has anyone had joy with finding an animated format (gifs don't seems to work), the reason I mention this is because I noticed when you fight Arch Nemesis, Elites or Signature Mobs their display panel has a small animated Sauron's eye which I thought was quite interesting.

On another note I was in the process of creating a full theme but stopped work when realising we were missing the following asset ID tags;
  • Loading screens border
  • Fellowship panels
  • Raid panels
  • Radar
  • Progression Bar
  • Avatar
Reply With Quote
  #3  
Unread 02-16-2007, 01:38 PM
Frosty's Avatar
Frosty Frosty is offline
Tools and UI Engineer
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 177
Quote:
Originally Posted by Xukii
On another note I was in the process of creating a full theme but stopped work when realising we were missing the following asset ID tags;
While researching your comment, I found a few more asset tags that can be remapped:

green_selection_vendor_item_stacktoggleon
green_selection_vendor_item_stacktoggleon_highligh t
LFP_Top_BG
LFP_Unavailable_Overlay
pedigree_bg
Who_MyOptions_BG

We are still coming up with the full and complete list that we'll support at launch. We know that there are certain panels that don't have art asset IDs - there's debate about whether we will be allowing users to modify some of those panels. We'll hopefully be doing another big pass of the "UI dictionary" soon.

-P
Reply With Quote
  #4  
Unread 02-19-2007, 01:40 PM
Xukii Xukii is offline
The Unscathed
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 16
Thx for the extra tags Frosty.
Reply With Quote
  #5  
Unread 03-03-2007, 11:18 PM
Cairenn's Avatar
Cairenn Cairenn is offline
Credendo Vides
Premium Member
LOTROInterface Admin
Interface Author - Click to view interfaces
 
Join Date: Jan 2007
Posts: 628
To figure out the sizes of things, use these two tricks for now:

Quote:
A simple solution to ge the EXACT dimensions is thus:

A) open paint program
B) make a 1x1 pixel image
C) Color it some obnoxious color (orange is good here)
D) add the alpha channel, make it opaque
E) Save as 32 bit TGA
F) Use it in place of whatever thing you want to get the size.
G) Open LOTRO
H) Change skin
I) Look for change.
J) Take screenshot
K) Open screenshot in paint program
L) Measure the orage area of whatever was replaced.
and

Quote:
Just a little information for other skinners who haven't figured this out yet:
If you create a SkinDefinition.xml file specifying a non-existant image file the client will load a grid pattern; allowing you to use the above method for getting the size without the need for creating an image file.
You can see the results of you image changes without reloading the client;

1. Load up the client and login to the game.
2. Load up your skin, this is how it is now.
3. Change back to the default & alt+tab into your image editor.
4. Make your changes & save them
5. alt+tab back in to the game & change back to your skin, you should see the update image.

Happy Skinning!

P.S. the bottom toolbar is 1074 x 85 pixels.
Both taken from the Skinning the LotRO UI thread in Turbine's Beta UI Forum.
__________________
"My friends, love is better than anger. Hope is better than fear. Optimism is better than despair. So let us
be loving, hopeful and optimistic. And we’ll change the world."

Co-Founder & Admin: MMOUI
FaceBook Profile, Page, Group
Avatar Image by RafM
Reply With Quote
  #6  
Unread 03-04-2007, 11:14 AM
Melereg's Avatar
Melereg Melereg is offline
The Wary
 
Join Date: Mar 2007
Posts: 1
I created my own ArtAssetID list and came across (very) few differences:

IDs that are no longer present:
blue_selection_accomplisment_updated

New IDs:
blue_selection_vendor_repair_highlight
test_frost_1
test_frost_2
Who_Filter_Options_BG

Haven't tested anything but maybe somebody can make good use of it.
Reply With Quote
  #7  
Unread 03-05-2007, 07:19 PM
Xukii Xukii is offline
The Unscathed
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 16
Quote:
Originally Posted by Melereg
New IDs:
test_frost_1
test_frost_2
hmm, wonder who created those *looks towards Frosty*

Thank you for this information. I'll have a look during the week.
Reply With Quote
  #8  
Unread 03-06-2007, 10:46 AM
Frosty's Avatar
Frosty Frosty is offline
Tools and UI Engineer
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 177
Quote:
Originally Posted by Xukii
hmm, wonder who created those *looks towards Frosty*

Thank you for this information. I'll have a look during the week.
Uh-oh. Sloppy, sloppy!

*writes self a note.

-P
Reply With Quote
  #9  
Unread 04-05-2007, 07:50 AM
D.H1cks's Avatar
D.H1cks D.H1cks is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Apr 2007
Posts: 162
Quote:
Just a little information for other skinners who haven't figured this out yet:
If you create a SkinDefinition.xml file specifying a non-existant image file the client will load a grid pattern; allowing you to use the above method for getting the size without the need for creating an image file.
You can see the results of you image changes without reloading the client;

1. Load up the client and login to the game.
2. Load up your skin, this is how it is now.
3. Change back to the default & alt+tab into your image editor.
4. Make your changes & save them
5. alt+tab back in to the game & change back to your skin, you should see the update image.

Happy Skinning!

P.S. the bottom toolbar is 1074 x 85 pixels.
I think something has changed, cause this does not work for me. It appears that I have to shutdown and start the client in order to get it to recongnize any changes in the XML file. Is it possible there is something I am not doing right?
Reply With Quote
  #10  
Unread 04-05-2007, 09:23 AM
Frosty's Avatar
Frosty Frosty is offline
Tools and UI Engineer
Interface Author - Click to view interfaces
 
Join Date: Feb 2007
Posts: 177
That is correct. The technique specified in the message has to do with modifying the graphics of the skin, not the XML. You will have to exit the client and restart to see the changes to the XML file itself.

-P
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 01:54 AM.


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