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"?> "<documents>\ui\skins\RedToolb ar\letterbox_bottom_red.tga" Activating Your Skin
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:
Quote:
Updated version of this posted by Turbine today, here |
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;
|
Quote:
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 |
Thx for the extra tags Frosty.
|
To figure out the sizes of things, use these two tricks for now:
Quote:
Quote:
|
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. |
Quote:
Thank you for this information. I'll have a look during the week. |
Quote:
*writes self a note. -P |
Quote:
|
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 |
Ah, okay. I understand now. Thanks.
I am curious if there will be any planned tools external to the game client that will help with the skinning process? Or will that be left to the community to come up with? I already have an idea about a skin 'viewer' that will let the user see what the UI would look like without having to log into the game. The only thing that concerns me is breaking any EULA rules in making such a tool. |
Quote:
|
Are there any Image dimensions or how the images work in the UI explained anywhere?
I've found that for the most part the different image size use the lowest size possible and then just tile after that for a window larger and in some very strange cases the UI area is actually smaller and it clips the image down from the original size, which I don't understand. |
There is this post by Frosty, amongst others. It seems to be the best one so far for your specific question.
|
yep i've read that. I think I've read every post i can find here for developer information.
The one thing that makes this difficult is the window borders. I suppose my only option at the moment is to try to find a repeatable pattern on each end of my images without to much elaboration. The borders act kinda funky on each window and cut off at unexpected points but I do have the measurements started so i can atleast guess where they are gonna cut off. |
*Nod* It's always tricky working with graphics. I remember when I was first starting doing stuff for EQ way back when. Took me the longest time to get the trick of it (repeatable patterns, etc). I've no doubt that as the game and the community matures, we'll have more and better information though. :)
|
|
On a quick glance, it looks to be the exact same post as was copied to here from the beta forums, only prettied up. Good stuff. Thanks for pointing it out D.H1cks. :)
Me thinks I shall request the necessary permission to steal it outright (screenshots and all) and put it up on a special page, the same way as I did with my Default UI Walkthrough. :) |
At a rough glance, it doesn't look like any new assets were added either...
*keeps waiting* :) |
I'll be honest, I'd rather have a content patch with full ui access for modding than this new land to explore in June. Give me XML files for the love of god!
|
hehehehe, I hear that one!
|
Vitals bar?
I can't seem to find it. Did I miss it? Is there a vitals (avatar) ID?
Kuv |
1 Attachment(s)
Anyone know what (if they exist) IDs are used for the fading borders in most of the windows? I can seem to find it. Here is an image with everything transparent except the fading border.
|
Quote:
Kuv |
There isn't one that I know of, it follows the exact path of panel_border but I know that isn't it.
|
Quote:
|
Quote:
|
I dont know if anyone has yet to find any of the sizes for the tags or not, but heres a link that should give almost everything thats in the UI to be skinned and with sizes i think. Sorry if someone may have already posted this.
http://lotro.turbine.com/article/330 http://lorimages.turbine.com/admin_f...02/97/1327.jpg On another note, I just dont get how to do this at all. Wish someone could code a simple program for people like me to be able to possibly drag and drop graphics in and help us resize and stuff, sorta like a UI skinner for dummies or something,lol. I just hate that bottom bar in LOTR and that huge icon for auto battle, its useless, wish i could take the bag icons and the icons for options and stuff, and stack em together leaving one side of the screen blank for chat. The minimap and HP charcter bar is to huge for the res 1024x768 and eats up my play screen, wish i could resize or dumb down alot of that stuff to make it sleak and neat. Anyway big fan of the site and love everybodys work! Possibly Ill learn to do this in time cause Ive been really wanting to use some ideas i have in trying to make some interesting concepts. But Im still not even sure you can chop up parts of the main bottom letterbox bar and move things around like that. Anyway, hope the link helps, and good luck to everyone! |
Oh yeah, if you use the image sizes from LOTRO's article there, do NOT make base_box_center or base_box_center_silver 1024x1024 in size. I ran out of video memory on two different PCs testing this, the engine has a very hard time cutting that thing up. I went with 32x32 I think. All the other image sizes in that article are fine.
AmbushMartyr, the best way to learn is to download a simple interface and look at the file structure and stuff. It's just images and an xml file specifying which image belongs to which part of the UI. Note that right now fancy things like resizing elements are not possible, it is strictly just repalcing the images in the game with different images of the same size. |
Hey your right! I thought this was harder than it really is! I used another authors template here and started studying the structure and I get it now!
Im gonna try to see if I can come up with a few skins from this template, Ill also be sure to give the author credit as I used his form. But yeah, this is really cool and alot simpler than I thought. I still need to remember to save as a alpha chan but pretty simple so far. Hope the links helped since I seen a few posts inquiring about sizes. Big thanks everyone and hoping to get a new skin up soon. Does anyone have any templates for Character HP bar,Minimap? I want to try and cut the graphics size on those to make a leaner visual if possible. I dont know how to do these from scratch but a template would help alot of you know of any, thnaks again, good luck to all! |
Quote:
As far as the second, part, these are not currently available. However, if you take a screenshot of your game and copy the part out that you want to start modding for future use, the sizing is correct, but you will have to wait until these pieces are available for modding. Kuv |
Quote:
Regardless, it's still appreciated when the community points out stuff that can be helpful for others. We would by far prefer that something get linked extra times because it was overlooked, than never get linked at all because you presume someone else already did. :) Looking forward to what you come up with, sounds like you are well on your way. :) |
The bottombar has to be 1024 X 85?
Or can I make one, say 1280 X 200. /Isathor |
Quote:
|
Yeah, just what I thought :P
|
Quote:
|
I compiled a list from Frosty's recent update for Vol.2 Book 7 which includes all of the known names. Could we get an update to the first post on this thread to include all of these names? Thanks!
Code:
accomplishment_book_background |
All times are GMT -5. The time now is 12:59 AM. |
vBulletin® - Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
© MMOUI