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- To activate your skin, launch the game.
- Open the Options panel, Ctrl-O.
- Click the "User Skins" button.
- 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