Apr 26th 2007, 16:00 GMT
Game Systems: Custom UI Skinning in LOTRO
 |
The Directory Structure
All of the UI skins created by users must be located within the "\ui\skins" directory. Each user-defined skin should be placed in a separate subdirectory under our pre-defined location, so you may have something like:
"\ui\skins\ChatRevamp"
"\ui\skins\RedToolbar"
"\ui\skins\TestSkin"
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 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:
The sample skin is named "RedToolbar" and replaces one piece of media: the toolbar identified by "LetterBoxBottom" is replaced by the file
"\ui\skins\RedToolbar\letterbox_bottom_red.tga"
Activating Your SkinM
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.
After you click "Accept", your new UI will be applied!
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 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.
THE LORD OF THE RINGS ONLINE™ interactive video game © 2009 Turbine, Inc. and patents pending. All rights reserved. Middle-Earth Poster Map © 2007 The Saul Zaentz Company, d/b/a Tolkien Enterprises (SZC), under license to Turbine, Inc. All rights reserved. “The Lord of the Rings Online”, “Mines of Moria”, “Shadows of Angmar”, The Watcher logo, “Conquer the World Beneath”, “The Lord of the Rings”, and the names of the characters, events, items and places therein are trademarks or registered trademarks of SZC under license to Turbine, Inc. Turbine and the Turbine logo are trademarks or registered trademarks of Turbine, Inc. in the U.S. and/or other jurisdictions. Codemasters is a registered trademark owned by The Codemasters Software Company Limited and the Codemasters Online Gaming logo is a trademark owned by The Codemasters Software Company Limited. GameSpy and the "Powered by GameSpy" design are trademarks of GameSpy Industries, Inc. All other trademarks are the property of their respective owners.