Game Systems: Custom UI Skinning in LOTRO

April 26th, 2007 by keven

In The Lord of the Rings OnlineTM: Shadows of AngmarTM (LOTRO), players can customize certain elements of the game’s user interface (UI), also known as “skinning.” While we don’t allow you to do a full-scale UI replacement, we do give you the ability to replace selected visual elements of the UI. (A full list of these elements and their sizes is provided at the end of this overview.)
The Directory Structure

All of the UI skins created by users must be located within the “…uiskins” directory. Each user-defined skin should be placed in a separate subdirectory under our pre-defined location, so you may have something like:

“…uiskinsChatRevamp”
“…uiskinsRedToolbar”
“…uiskinsTestSkin”

Inside each user defined skin directory a skin definition file (and accompanying images) 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 “…” directory is where you can find the UserPreferences.ini file. It is usually something like

“C:Documents and SettingsusernameMy DocumentsThe 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:

Sample Skin

The sample skin is named “RedToolbar” and replaces one piece of media: the toolbar identified by “LetterBoxBottom” is replaced by the file

“…uiskinsRedToolbarletterbox_bottom_red.tga”

Activating Your Skin

You can activate your custom UI skin from within LOTRO.

  1. Open the Options panel, Ctrl-O
  2. Click “UI Settings”
  3. In the “Current User Skin” droplist at the bottom of this window, select your skin.

 

Custom UI Options

(click on images for larger versions)

After you click “Accept”, your new UI will be applied!

Custom UI View

 

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 re-launched whenever a new skin is added or a change is made to an existing skin.

Want to learn more? Visit http://www.lotrointerface.com/, home to the LOTRO UI skinning community!

ArtAssetID Dictionary

The following is an alphabetical list of ArtAssetIDs and their sizes that can be
replaced by the game (Note: the monster play versions of these UI elements simply contain the suffix of _mp, as in accomplishment_journal_normal_mp).

Filename Dimensions
accomplishment_journal_normal 29 x 29
accomplishment_journal_pressed 29 x 29
accomplishment_journal_rollover 29 x 29
bag1 32 x 32
bag1_normal 29 x 29
bag1_pressed 29 x 29
bag1_rollover 29 x 29
bag2 32 x 32
bag2_normal 29 x 29
bag2_pressed 29 x 29
bag2_rollover 29 x 29
bag3 32 x 32
bag3_normal 29 x 29
bag3_pressed 29 x 29
bag3_rollover 29 x 29
bag4 32 x 32
bag4_normal 29 x 29
bag4_pressed 29 x 29
bag4_rollover 29 x 29
bag_inventory 32 x 32
base_box_center 1024 x 1024
base_box_center_silver 1024 x 1024
base_box_titlebar_left 35 x 42
base_box_titlebar_right 35 x 42
base_box_titlebar_top 139 x 42
basepanel_bottomleft 19 x 19
basepanel_bottommid 2 x 3
basepanel_bottomright 19 x 19
basepanel_midleft 3 x 2
basepanel_midright 3 x 2
basepanel_topleft 19 x 19
basepanel_topmid 2 x 3
basepanel_topright 19 x 19
black_translucent 128 x 128
blue_mail_select_highlight 425 x 45
blue_mail_select_highlight_active 435 x 45
blue_mail_select_highlight_active_admin 435 x 45
blue_mail_select_normal 435 x 45
blue_selection 384 x 20
blue_selection_accomplisment_updated 390 x 20
blue_selection_bright 242 x 36
blue_selection_quest_highlight 242 x 36
blue_selection_quest_highlight_active 242 x 36
blue_selection_quest_normal 242 x 36
blue_selection_selectable_reward_highlight 366 x 64
blue_selection_skilltrainer_ghosted 366 x 64
blue_selection_skilltrainer_highlight 366 x 64
blue_selection_skilltrainer_highlight_active 366 x 64
blue_selection_skilltrainer_normal 366 x 64
blue_selection_title_highlight 366 x 64
blue_selection_vendor_item_highlight_active 183 x 64
blue_selection_vendor_item_normal 183 x 64
blue_selection_vendor_item_repair 366 x 64
blue_selection_vendor_item_repair_normal 366 x 64
blue_tracking_select_highlight 225 x 25
blue_tracking_select_highlight_active 225 x 25
blue_tracking_select_normal 225 x 25
box_01_titlebar 512 x 20
box_silver_bottom 103 x 36
box_silver_bottom_left 36 x 36
box_silver_bottom_left_noadorn 36 x 36
box_silver_lower_right 36 x 36
box_silver_lower_right_noadorn 36 x 36
box_silver_side_left 36 x 105
box_silver_side_right 36 x 237
box_silver_upper 434 x 37
box_silver_upper_left 36 x 36
box_silver_upper_left_noadorn 36 x 36
box_silver_upper_right 36 x 36
box_silver_upper_right_noadorn 36 x 36
button_autoattack_highlight 63 x 63
button_autoattack_highlight_mouseover 63 x 63
button_autoattack_highlight_pressed 63 x 63
button_autoattack_mouseover 63 x 63
button_autoattack_normal 63 x 63
button_autoattack_normal_pressed 63 x 63
button_main_mouseover 51 x 34
button_main_normal 51 x 34
button_main_pressed 51 x 34
chat_back 32 x 32
chat_entry_focussed 13 x 20
chat_tab_tier1_middle_back_e 13 x 28
chat_tab_tier1_middle_back_n 183 x 28
chat_tab_tier1_middle_back_w 204 x 28
chat_tab_tier1_middle_front_e 13 x 28
chat_tab_tier1_middle_front_n 182 x 28
chat_tab_tier1_middle_front_w 204 x 28
chat_unread_overlay 16 x 16
crafting_highlight 29 x 29
crafting_normal 29 x 29
crafting_pressed 29 x 29
fellowship_normal 29 x 29
fellowship_pressed 29 x 29
fellowship_rollover 29 x 29
green_selection_vendor_item_stacktoggleon 183 x 64
green_selection_vendor_item_stacktoggleon_highlight 183 x 64
im_button_close_highlight_active 100 x 19
im_button_close_normal 14 x 14
im_button_close_pressed 14 x 14
im_button_close_rollover 14 x 14
im_button_ghosted 100 x 19
im_button_normal 100 x 19
im_button_pressed 100 x 19
im_button_rollover 100 x 19
im_chat_alert 14 x 14
inventory_normal 29 x 29
inventory_pressed 29 x 29
inventory_rollover 29 x 29
journal_normal 29 x 29
journal_pressed 29 x 29
journal_rollover 29 x 29
main_menu_normal 30 x 30
main_menu_pressed 30 x 30
main_menu_rollover 30 x 30
map_normal 30 x 30
map_pressed 30 x 30
map_rollover 30 x 30
money_player_all_background 265 x 28
no_hope_no_dread 238 x 238
options_panel_divider 400 x 30
panel_border 256 x 256
pedigree_bg 392 x 247
quest_normal 29 x 29
quest_pressed 29 x 29
quest_rollover 29 x 29
selection_inanimate_backdrop 229 x 65
social_panel_list_elements_highlight_bottom_center 44 x 3
social_panel_list_elements_highlight_bottom_left 3 x 3
social_panel_list_elements_highlight_center 94 x 75
social_panel_list_elements_highlight_lower_right 3 x 3
social_panel_list_elements_highlight_middle_left 3 x 43
social_panel_list_elements_highlight_middle_right 3 x 44
social_panel_list_elements_highlight_top_center 44 x 3
social_panel_list_elements_highlight_top_left 3 x 3
social_panel_list_elements_highlight_top_right 3 x 3
social_panel_list_elements_normal_bottom_center 44 x 3
social_panel_list_elements_normal_bottom_left 3 x 3
social_panel_list_elements_normal_lower_right 3 x 3
social_panel_list_elements_normal_middle_left 3 x 44
social_panel_list_elements_normal_middle_right 3 x 44
social_panel_list_elements_normal_top_center 44 x 3
social_panel_list_elements_normal_top_left 3 x 3
social_panel_list_elements_normal_top_right 3 x 3
tab_tier1_middle_back_e 13 x 28
tab_tier1_middle_back_e_sm 13 x 20
tab_tier1_middle_back_n 183 x 28
tab_tier1_middle_back_n_sm 131 x 20
tab_tier1_middle_back_w 204 x 28
tab_tier1_middle_back_w_sm 146 x 20
tab_tier1_middle_front_e 13 x 28
tab_tier1_middle_front_e_sm 13 x 20
tab_tier1_middle_front_n 182 x 28
tab_tier1_middle_front_n_sm 130 x 20
tab_tier1_middle_front_w 204 x 28
tab_tier1_middle_front_w_sm 146 x 20
textbutton_left_ghosted 147 x 20
textbutton_left_highlighted_mouseover 147 x 20
textbutton_left_highlighted_normal 147 x 20
textbutton_left_highlighted_pressed 147 x 20
textbutton_left_mouseover 147 x 20
textbutton_left_normal 147 x 20
textbutton_left_pressed 147 x 20
textbutton_mid_ghosted 120 x 20
textbutton_mid_highlighted_mouseover 120 x 20
textbutton_mid_highlighted_normal 120 x 20
textbutton_mid_highlighted_pressed 120 x 20
textbutton_mid_mouseover 120 x 20
textbutton_mid_normal 120 x 20
textbutton_mid_pressed 120 x 20
textbutton_right_ghosted 20 x 20
textbutton_right_highlighted_mouseover 20 x 20
textbutton_right_highlighted_normal 20 x 20
textbutton_right_highlighted_pressed 20 x 20
textbutton_right_mouseover 20 x 20
textbutton_right_normal 20 x 20
textbutton_right_pressed 20 x 20
tga_empty 2 x 2
titlebar_X_2 16 x 16
titlebar_X_2_mouseover 16 x 16
titlebar_X_2_pressed 16 x 16

The contents and format of the actual XML file appear below.

Custom UI - XML File

(click on image for larger version)

Posted in The Lord of the Rings Online News |

Similar Posts

Random Posts

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.