Unofficial Open UI interface help

[ccheath776]

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.

[Shaamis]

Awesome work Terrah!

[ccheath776]

As marvin says.
Most important thing



Take it slow and know that you wont get it right on the first time.
And if you get stuck ASK.

[Clankenbeard]

Great thread. Thank you for taking the time. I wish I had come here first before trying to decipher a lot of that on my own. I have been successful to a certain degree. I am confident that I can recolor of "add barbs" to the images, but I seem to have difficulty making them smaller.

For instance. My very first pass was to pull some barbs off of the focus orb just to see if I could make things work. So, I jumped into Photoshop Elements and did a little trimming to the TGA file "Focus_Orb_06 (235x245 pixels)" and resaved as a different file name. Works like a champ. I gut everything out of the skin definition file "SkinDefinition.xml" except for the refernece to it (with my new file name). Then, in DDo, I select my skin and I see the changes take place. The barbs are gone. Oh, I smell a big "but" coming... But, the removed barbs are now black instead of transparent. Somewhere (maybe Photoshop Elements can't handle it) there is a transparency map which I didn't edit. I know TGA's are supposed to have a transparency map. Pehaps, I am simply not using the right program to edit it. Any suggestions? Also, should TGA files be saved back at 16, 24, or 32 bit if I make somehting from scratch? Any help would be appreciated.

p.s. I found that the directory reference does not get too picky about the'/'. You can drop your custom skins into a /uiskins/ subdirectory or into /ui/skins/ and it treats it the same. No big deal. I only see it as a problem if you migh have both for some reason.


==================EDIT================
Okay, so the answer is that Photoshop Elements (PE) IS the problem. It will pull in a TGA with an Alpha channel and then p@@p all over it. Essentially, what was happening is that I would open the Focus Orb TGA and PE would immediately change the alpha channel into whatever color I had selected as my erase color at the time. It should have looked like the standard checkered background to let me know what was transparent. So, then the oddball thing that it did was somehow remember the geometry of the alpha channel (at open) and preserve it when I saved. Bizarre. The answer for me was to download a free image editing software that could handle the 24bit TGA with alpha channel. I got GIMP2.4 from http://www.gimp.org/ and it opened up the focus orb properly showing the transparency as a checkerboard. I erased some barbs, saves as a TGA, and it pulled into my skin perfectly.

So now my procedure will be as follows:
1. Create a goofy cartoonish interface in Flash
2. Export output to a PNG to get the needed transparency (Flash does not export TGA)
3. Pull TGA into Gimp and then Export to TGA

[jjflanigan]

Save it out as 32 bit.

I'm not sure how to change the ALPHA select in a TGA with photoshop elements. In Photoshop CS2, you do "Select -> Load Selection -> Alpha" and that will show you the current select box for the alpha channel in the TGA, then you can adjust that as you want to remove the barbs, etc, and do "Select -> Save Selection" and select the already existing select filter and that will update the alpha channel for the TGA.

Thanks for the starter guide with this!

[Memnir]

Just had to say - awesome thread.
I'm tyring to overcome my own feeling of panic here and figure it all out. I've got a total reskin in the works now - and I hope to share it soon.

[Tous]

I am working on a new skin using photoshop. I consider myself a midrange novice and I have a friend that is an expert.
When asking him questions I sometimes don't know what I am asking because I don't know the proper function I want to do. (Hope that made sense.)
Maybe you could post a glossary of terms to help understand some basic functions.

Also, I want to plug my new UI. Get it here (Saturday Morning DnD)

[Snowstar81]

I see that they have allowed us to modify the Art files and the are redirecting us to the LOTR modding site and they say that the DDO modding is like the LOTR modding. So will we be able to staticly place the objects so we can make an interface like the LOTR modders are doing or are we just left with replacing graphics? If we can place the elemnts exactly how we want them then what are the tags for it? The xml file doesnt contain those and none of the guides of at the LOTR site cover it but I see coding in the Interface developers for the LOTR interfaces so I was wondering how far of a cross over DDO has made with LOTR?

[Kakarotto]

Ok, I have been reading form after from!!! can someone please help me!!! I don't know how to make the skin work that I just Down Load!!!
I also got that program to make my own...but again I don't know how to get it to work!!! please help!!!

Thank you

[oronisi]

I suggest looking over in the 2 new forums for UI mods for help. It is no longer a Development discussion.

UI Skinning Discussion
Customized UI Skin Listings