UI Skin Creating- Help

[Travisimo]

Right now I am attempting to make my own UI Skin... but I've come to some problems.

SkinDefinition files are really confusing me... how do I create one? Correct me if I'm wrong but I think I have to have a SkinDefinition file for the Skin to work.

So far I've been editing the graphics so they look like how I want them in-game. If I put all those graphics into sub-folders in the main folder (the one with the UI Skin name) will they automatically be present if I load the UI Skin from the game? Or is there a code or something else I need to get them to work?

What do I need to do after I've made the graphics look how I want them? What is the next step?

[daimon]

Hi and welcome.

I assume you donwloaded the art asset pack from Turbine.

That package includes all the skinnable elements there is atm.

Addition to the graphic (tga) files the package includes two text files: Skindefinition.xml and SkinDictionary.txt.


Skindefinition.xml is the file that controls your skin. It should include everything you have changed in the skin.

Skindefinition.xml: you can find all the art asset id's. These are used to map the .tga files you're going to replace with your skin. You only need the ones that you're going to use. Remember that if you're using subdirectories you have to include relative directory paths so the skin knows where to look those files. If no path information is available the skin will try to look files from the same directory where this file is.

SkinDictionary.txt: these are a collection of PanelFile and element id's. What you can do with these is to move and resize different kind of panels. If you need to edit some panels etc you need to include that part from here into your Skindefinition.xml.

Best way to learn how skin work is to download some skin from this site and see how it's done in practice.


http://notepad-plus-plus.org/ is pretty neat software to edit your Skindefinition.xml

sorry for the fast reply. I am meaning to write a better guide in near future about skinning.. we will see how that turns out :p

[Travisimo]

Well, I downloaded it but I can't figure out what to do with the SkinDefinition file.

Your above post states that I must include everything I have changed in the skin. How?

I am absolutely clueless about XML.

[daimon]

lemme try to do an example.

I open the default Skindefinition.xml (it has loads of entiries) and Skindictionary.txt in my notepad.

I'll make a new text document. Then I decide to add/edit following things in it:

<?xml version="1.0" encoding="UTF-8"?>
<opt>

<SkinName Name="Travisimo's Skin"></SkinName>

<Mapping ArtAssetID="letterbox_bottom" FileName="letterbox_bottom.tga"></Mapping>
<Mapping ArtAssetID="pedigree_bg" FileName="pedigree_bg.tga"></Mapping>
<Mapping ArtAssetID="minimap\no_hope_no_dread" FileName="no_hope_no_dread.tga"></Mapping>

<PanelFile ID="ID_UISkin_GamePlay_MountDisplayBox">
<Element ID="GamePlay_MountDisplayBox" X="409" Y="500" Width="147" Height="56">
<Element ID="MountDisplayField" X="-13" Y="10" Width="207" Height="70">
<Element ID="MountNameText" X="57" Y="11" Width="1" Height="1"></Element>
</Element>
</Element>
</PanelFile>

</opt>Next thing I do is I'll save my new file into \\My Documents\The Lord of the Rings Online\UI\Skins\Travisimo\ folder (I have to create the UI folder and the subdirectios Skins and My Skin as the client doesn't do it by itself) and name it as Skindefinition.xml.

Right so now I have a newly created Skindefinition.xml in that folder. Next thing I need to do is to have those modified .tga files where I just assigned them to.

So I move my letterbox_bottom.tga and pedigree_bg.tga into that same folder where my Skindefinition.xml is.

For some reason I wanted the next file to be located in a sub folder. So I will create that subfolder. Now I have \\UI\Skins\Travisimo\minimap\ folder. Next I move my no_hope_no_dread.tga into that minimap folder I just created.

Then I try my skin by launching the lotro client. Note that every change you make into Skindefinition.xml means that you have to load the client from the start, relogging isn't enough. You can edit pictures while you're skinning tho. Just modify your picture, deselect your skin from the game options and reselect it to see the effect you just did.

To know what you're modifying might be a bit pain. Best thing is to have some picture browser software open so you can see what .tga files you want to edit and add to your skin. This is even more difficult with things in SkinDictionary.txt as you basically have to guess what something does, it's a lot of work to find the right coordinates for example for the element you're trying to edit.

What does the above example do:
It sets the skin name to Travisimo's Skin
It changes the mainbar art into your modified art (letterbox_bottom.tga)
It changes the pedigree panel (bio) art into your modified art (pedigree_bg_tga)
It changes the minimap art into your modified art (no_hope_no_dread.tga). (Note if you gain more hope or dread then the file doesn't effect minimap anymore, you need to assign more minimap assets for dread/hope)
PanelFile ID="ID_UISkin_GamePlay_MountDisplayBox" defines values for the panel while you're mounted ie. it shows your mount health, name etc. In the example I have removed lots of lines from the original <PanelFile ID> and kept only the <Element ID>'s I need to have to modify the things I wanted. In this case I wanted to remove the name of my mount so I changed height and width values in <Element ID="MainNameText"> into "1" to hide the name.Tags in the example:
<opt> & </opt> these tags start and end the skindefinition.xml
<Skinname> tag sets the name of your skin, the name you can see in the in-game menu.
<Mapping ArtAssetID=""> are used for the .tga files. every file got it's own specific tag
<PanelFile ID=""> is the parent tag for <Element ID=""> tags.
<Element ID=""> tag defines various structural values, like crafting panel size, location of crafting button, size of the crafting button, size of the crafting entry field etc.The basic structure of Skindefinition.xml therefore is:
<?xml version="1.0" encoding="UTF-8"?>
<opt>

<SkinName Name="Name of the Skin"></SkinName>

<!--comment: optional modifications start -->

<Mapping ArtAssetID="tga_asset_name" Filename="tga_file_name.tga"></Mapping
...
...
<PanelFile ID="panel_file_name">
<Element ID="element_name1>
<Element ID="element_name2></Element>
...
...
</Element>
</PanelFile>

<!--comment: optional modifications end -->

</opt>


It's a lot to take when you start but it really isn't that complicated as it first seems. Try different things, start from something easy, just replacing some art like the mainbar to see how it works, then move on more advanced stuff.

[Travisimo]

I've opened the SkinDefinition with Notepad, and the page comes up with a long list of code. Should I begin editing this directly or is there something else I'm missing?

By the way, thanks for all the help daimon :D

[daimon]

thats the original Skindefinition.xml by Turbine where all the tags for images are, think it as a library. From there you pick the ones you need to create your own skin and add the lines to your own Skindefinition.xml.

As I said earlier the easiest way to figure out how it works is to check someone else's custom skin.

np. It's a bit difficult to try to explain it all in a few sentences. Just start by trying to do the example I explained above.

[Travisimo]

Last question (I think):

I came across a problem I didn't notice before... the editing tool I'm using to change the look of the UI parts is automatically converting them from .tga to a simple image (TIFF image specifically). So when I loaded the LOTRO client and checked to see if my skin worked, all I got was plain boxes in the areas I had tried to change.

Are there any tools you can recommend that will allow me to customize the parts of the UI without changing them from .tga? Any sites that you can recommend?

[daimon]

There are couple freeware softwares I could recommend.

http://www.getpaint.net/
http://www.gimp.org/

There are punch of plugins for both of those apps. Just google their name and plugin you're looking and you should be find those fairly easy.

One thing you need to know about .tga files is to learn how to use Alpha Layers. This is a layer where where the transparency information is stored. There's plenty of good guides about Alpha Layers out there.

:)