Basic Skinning instruction

[ccheath776]

I moved this over to this thread so people can see it better.

Good Day DDO bashers, smashers, and now designers.

With the new interface appearing there will obviously be many questions that will need to be answered.
Allow myself to introduce....myself.

Basically what I do for a living is help develop XML and Web interface applications for a transaction security company, so I am familiar with both XML and interface design.

This thread is here to ask your questions and hopefully get answers for whatever it is that you have questions for in regards to the UI interface toolkit.

Note: I am no expert nor a guru. I will not claim to be. Some questions I doubt I can answer thats why the thread is "open". It means anyone can answer the question. I'm sure I'll have some myself.
If you got a question I or someone in the DDO community will try to assist.
So ask away.

[ccheath776]

So let me start with a guide on the interface.
There is a good guide at http://www.lotrointerface.com/index.php?p=guides

But if that makes your face squint with confusion I simplified it even further.
The first rule of development and design is DONT PANIC!! Be patient.

Guide:
If you are wishing to design some UI interfaces the basics are this. This is really good and I am explaining it in the simplest of forms. UI interfaces is my specialty, its what I do every day, all day professionally. The first thing to understand is "Dont Panic!!"

U dont need to know xml coding to understand this. They have actually made this very simple.

You can read where to place these files here at this website.
http://www.lotrointerface.com/index...._ui_skinning_1


Let me start by explaining the xml file because that is the basis for all of your UI design. Everything feeds off that file. XML or any programming is easy if you speak the language just like any other language. If you know what it means or what its saying you will understand how to talk to the computer to make it do what you want.
For example Mapping ArtAssetID="level_background" FileName="vitals\level_background.tga"
In XML language I am saying.
"Computer, use the file name level_background.tga located in the vitals folder for the UI section level_background."

Ok now that you understand what programming language means lets discuss how to design the interface we want.

You have one .xml file, you can have more than one but that is advanced xml scripting, so we will stick to just one.

The file has to be named SkinDefinition.xml. The best way to code XML is to do it in a notepad or notepad+.
When you open that file it will look like this.

<?xml version="1.0" encoding="UTF-8" ?>
- <opt>
- <!--
Skin Name: ArenUI - Halloween Edition
Skin Creator: Aren of <Two Words>, Windfola
Skin Version: 3.
-->
<SkinName Name="ArenUI v3" />
<Mapping ArtAssetID="LetterBoxBottom" FileName="mainbar.tga" />
<Mapping ArtAssetID="level_background" FileName="vitals\level_background.tga" />
<Mapping ArtAssetID="level_background_red" FileName="vitals\level_background_red.tga" />
<Mapping ArtAssetID="bag_inventory" FileName="invisible.tga" />
<Mapping ArtAssetID="bag1" FileName="invisible.tga" />
<Mapping ArtAssetID="bag2" FileName="invisible.tga" />

Dont PANIC!!
Its not as hard as you think.
The first line to look at is the skinname.
- This is what DDO will identify it as when you go into your options screen to select the skin. So if I were to implement this skin, then go into DDO, go into options, ui settings, current user skin. In the drop down list there would be "default" and then "ArenUI v3". This is the most important aspect. If there is no name, the file will not parse and wont work.

Next is the Mapping ArtAssetID
- There are two parts to this line that are important.
You will notice the line says
Mapping ArtAssetID="LetterBoxBottom" FileName="mainbar.tga"
The first part is "Letterboxbottom" This indicates which UI you are defining an image for. Let me say that again so its clear. This first part defines a specific part of the UI, not the image. In this case it means that you are defining the image for the letterbox bottom. The definitions for each aspect of the Ui can be found here.
http://www.lotrointerface.com/index...._ui_skinning_2
The next part is the actual image. It is recomended that you use TGA. I will explain what that is in a second but for now just know what that means. What it means is that you are telling the game engine to use the the image name mainbar.tga for letterboxbottom.

After that there is nothing else to it. Thought it was going to be harder than that huh? Not so. So basically lets review. Remember two things about the xml file. The Skinname and the Mapping ArtAssetID. The skinname defines what you want it to be called, the ArtassetID tells the program in two parts what to do. The first is what UI to use, the next is what image to use and where to find it.

DIRECTORY STRUCTURE -
This is also important.
All of the UI skins are placed in a directory called "uiskins. So on your C: drive or wherever you put your DDO installation. You will see this most likely.
C:\Program Files\Dungeons and Dragons Online\Uiskins
Or it could be here.
C:\Documents and Settings\username\My Documents\Dungeons and Dragons Online\Uiskins
Where ever it is, that is what you must know and understand in order to implement your skins.
Once you find the directory your directory must be named uiskins"skin name"
So it will look like this.
C:\Program Files\Dungeons and Dragons Online\Uiskins\uiskinsArenUIV3
THIS IS IMPORTANT!!
Underneath that uiskins sub directory you will put first your SkinDefinition.xml and then all of your TGA files. How you organize that is up to you. Typically people organize it in more sub-directories so its more visually pleasing rather than a folder with a bunch of TGA files in them. But you can organize that however you want. Just make sure the Filename in the Mapping script line matches the correct path. So if you have this.
\uiskinsArenUI3\silver\side_right.tga
Then the filename line in your script should say silver\side_right.tga
That sounds complicated but it will make more sense when you start writing your script.


That is the basics of setting up your UI interface.
First - Define your skinname in the xml file
Second - Organize your TGA images and define what TGA image goes for which aspect of the UI
Third - Design your directory structure to make it more manageable.

WAIT!! Dont stop yet I need to explain what in the heck TGA images are.
TGA images are specialized, high quality, images. These normally can only be created or edited in programs such as Photoshop, CorelDraw, or Paintshop Pro. In other words you can't just open them up in a regular J-peg viewer. You can place JPG or BMP files there but their quality will not be as good.
If your using photoshop, make sure to FLATTEN your layers before publishing or the image file will be too big.

In the next post I will give an example of how to set up a basic UI interface.
It sounds much more complicated than it is.
Cont. below

[ccheath776]

Cont. So Here is a typical workflow of how to design a UI interface and get itto work.

The first thing I do is make a .TGA image. In this case I'll make a border that has some cool looking barbs on it.
I will name it barbsborder.TGA

But wait.
I want to organize my folders first.
I am going to create a folder called "uiskinsborderflame"
Underneath that I will put a bunch of subfolders in a way that I can organize my images properly. I will start with one, just to make it simple.
I will name it "borders"
so my folder setup looks like
uiskinsborderflame/borders
I then place the .tga file I just created in that borders folder and leave it for now.

Next I open notepad, in my case I use notepad+.
I type in the following lines. I first, name my skin design.
Borderflame is what I will call it.

<SkinName Name="borderflame" />

Next I look up in the definitions listing for a letterbox. I want to change the letterbox of the lfg panel to have a border with barbs instead of the typical solid yellow we normally see. I've already created my .tgs file. But I need to tell the DDO game engine to use my image file correctly. So I type the following making sure under filename to place the proper path.

<Mapping ArtAssetID="lfg_leftBorder_active" FileName="borders/barbsborder.TGA" />

So now I've told the DDO engine to use for the Ui interface LFG border when its active to use the image barbsborder.tga. The effect should be that when I open the LFG bar and click on it, the barbs will appear. To give the interface a bit of interaction.
I then go through, making more TGA images, creating more subfolders, and then putting the language into the XML file directing the engine to pull up that interface

I save the notepad file.
And I am done.

Nothing much else to it except your imagination and patience.

Advanced -
When I learn if I can, I will show you how to do some advanced UI interfacing like adding some cool xml scripts to make the interface do some interesting things. I can't animate the borders like flames and that but we can come pretty close. I just have to do more testing with it. Good luck.

[iamsamoth0]

I'm gonna have to re-read it .
I very much appreciate you going through the trouble to try and help.
Thank you.

I still read it,
".....Don't Panic....blah, blah, .....stuff I shouldn't fool with....., careful..., ...scripting, .....don't, .....make sure..... ;)!.
Guh!
One day maybe.

[ccheath776]

Its alot of information but on the surface its quite easy.
Plus you get an intro into the UI interface world, something I specialize in.
I wish there was more I could do with this interface like maybe a dev kit that I could really do some cool stuff with. But some of that may be too close to the source code.
I just like the ability to use it.

Maybe some day turbine will let me work for them and then I could get to work on some cool ideas ive had for UI changes.
Im all about easy, interactive design.

[Hordo]

Ok, bro...expect a few /tells from any one of my "Hordo" toons...cause I'm gonna get the hang of this or die trying.
I have lots of things I'd like to do, and I'll give it a go first then /tell you.
But, mainly, I want to alter the color scheme just a little, insert an image in the corner of my screen and if possible change the font. All the rest of what I'd like to do rests on those things. Anyway, I'll be giving you a holler!

[Hordo]

Ok.
I will not panic.
I promise.
I just cannot find, anywhere on my machine, a directory that even has "UI" upper case, lower case, mixed case anywhere in any directory.
I am frustrated.
Will not panic.
Will await further instructions.
*gulp*

[Cairenn]

I just cannot find, anywhere on my machine, a directory that even has "UI" upper case, lower case, mixed case anywhere in any directory.You need to create it yourself, the same as if you were installing (http://www.lotrointerface.com/forums/faq.php?faq=lotro_interface#faq_installation) one. Just change Lord of the Rings Online to Dungeons and Dragons Online as applicable. So, your final path will be:

C:\Documents and Settings\username\My Documents\Dungeons and Dragons Online\ui\skins

[Hordo]

Cairenn, THANK YOU! I'll give this a go when I get home after work tonight and let you folks know how I did. I'm not a deft-hand at this sort of thing but am eager to learn and grateful for the assistance.

[Hordo]

Now, thanks to Carienn, I have downloaded some of the 'complete' skins and have had a great time playing with those. However, I do have a few questions now.

1. If I want to begin to make my own skin, but don't want to change alot of the stuff, do I need to have my XML file with a complete TGA ArtAssetID list or can I just list the ones I wish to have altered, leaving the rest at default just by not mentioning them?

2. I have had a problem occuring perfoming the Quit function. It does not quit but shows a very large picture of the quit choice box and then I have to use the X to close DDO out. Is there a way to correct this bug?

3. Where on my PC can I find the default TGA(?) files for DDO to begin to edit/alter 'clean' copies?

4. Is there a way to put a standalone picture on the screen that doesn't have any other real purpose? For instance, if I wanted a small pic of my dog (completely random item folks...I'm wierd, but not that wierd) in the bottom right of the screen could I do that and if so how?

I'm sorry for being a noodge folks, but I am very interested in learning this stuff.

[Agarth]

I figured it out... I'm an idiot...

~Riosse

[stuby]

does it still work because i have made a folder with ui and then made one with skin and i didn't work. then made one with uiskin and didn't work help please?

[iamsamoth0]

That is well deserved, good info here. Just not brave enough to attempt on my own.
Hint.
Hint.
Cough~cough
Wink~wink
Nudge~nudge

[WolfSpirit]

I just want to be able to download a pre-made skin that I like into X-Directory. Then choose it from the options panel...
Or even:
Download file001 into X-Directory, then
Download file002 into Y-directory, then
Download file003 into Z-directory...

No Such Luck huh?

[WolfSpirit]

I would love to skin truthfully, because for me the cursor in this game is WAY too small and the color blends in with nearly everything.
Since I'm a Shortcut bar clicker instead of a Keybinder, this makes it VERY hard to find my cursor sometimes in serious times during the game.
(Such as when a major Battle ensues and there is CC all over the place)
Is there some way to enlarge my cursor or even just change its color?

[tharveysinjin]

I wish there was more I could do with this interface like maybe a dev kit that I could really do some cool stuff with. But some of that may be too close to the source code.
I just like the ability to use it.

Maybe some day turbine will let me work for them and then I could get to work on some cool ideas ive had for UI changes.
Im all about easy, interactive design.

What's the possibility of posting some type of run book with screenshots that provide an image of a finished skin, followed by step by step instructions with images that show the progression from start to finish.