With the new UI system and the ability for any of you to make Custom UIs, some explanations are needed about how to make them.
First of all, all the UI files will be located in your "Data/UI" folder.
There, with a normal installation of DR, you should find the following files:
http://s4.noelshack.com/old/up/1-ec563e8988.png
Let's look at the uilist.ui file:
Code: Select all
MonsterWarInfos
MainInterface
QuickMagic
This file contains contains the names of all the other .ui files. So if you wish to add a new UI into the game, you must add a line into that file.
Let's add a line and let's call it PlayerInfos:
Code: Select all
MonsterWarInfos
MainInterface
QuickMagic
PlayerInfos
Now make a new text file in the folder and call it PlayerInfos.ui
http://s4.noelshack.com/old/up/2-db16d20068.png
Let's open it.
First, you need to put the main block of the UI by adding the following code:
Code: Select all
UIName=PlayerInfos
{
}
As you can see, we set the name of the UI there also (the name we set in the uilist.ui is only the file name, not the actual UI name)
We first need to place our UI on the screen. To do so, we have 2 possbilities.
Set the top left corner coords.
Set the origin coords (center of the UI).
I will set it by its origin like this, at the center of the screen:
Code: Select all
UIName=PlayerInfos
{
ox=400
oy=300
}
Then, we need to set its width and height. If you plan on adding a Background (highly recommanded !), the best way to do is to tell it to get it from the background's image:
Code: Select all
UIName=PlayerInfos
{
ox=400
oy=300
SizeFromElement=Background
}
Then, as we set its size from the Background, let's add that background !
To add a new "Element" or "Widget" in the UI, you must add a new block called "UIElement", like this:
Code: Select all
UIName=PlayerInfos
{
...coords & size...
UIElement=Image
{
}
}
Image sets the kind of Element to be an Image (logic !), a complete list of Elements is available at the bottom of this tutorial.
Now let's look at that Image.
First, we must give it a name (very important !):
Code: Select all
UIElement=Image
{
name=Background
}
Then, we must set its relative coords:
Code: Select all
UIElement=Image
{
name=Background
relx=0
rely=0
}
relx is the relative X coord and rely is the relative Y coord. By relative this means their coord in the UI, not on the screen. The 0,0 point is the top left corner of the UI.
And finally, as it is an image, we must set an image !
Code: Select all
UIElement=Image
{
name=Background
relx=0
rely=0
image=Data/UI/Resources/Extra/Background1
}
Attention, the UI Images must be of the .csp extension and we will NOT provide any tool to make .csp images ! However, we will provide progressively enough .csp to make any kind of UI you want (and we may add later on other kind of image types such as .png)
The minimal code of our UI is done ! However, it wont be shown on the screen as nothing calls it.
To do so, we must edit an existing UI and add a Button which will call it.
So, open MainInterface.ui and scroll down until the bottom:
Code: Select all
UIName=MainInterface
{
...
UIElement=ItemIcon
{
name=ItemQuick5
relx=592
rely=69
shortcut=5
}
}
And let's add a new TextButton Element after the ItemIcon called ItemQuick5:
Code: Select all
UIName=MainInterface
{
...
UIElement=ItemIcon
{
name=ItemQuick5
relx=592
rely=69
shortcut=5
}
UIElement=TextButton
{
name=PlayerInfosButton
relx=210
rely=28
text=Click Me!
action=PlayerInfos
type=OPEN_UI
}
}
Let me explain the following code:
name, relx and rely, we have seen before what those were.
text: It is the text of the button, which will appear on the screen.
action: It is the action which is executed when the button is clicked. We put there the name of our new UI.
type: It is the type of action the button executes. As we open an UI, we set OPEN_UI.
Alright, let's save the file and check what appears ingame !
http://s4.noelshack.com/old/up/3-08c7010062.jpg
http://s4.noelshack.com/old/up/4-39976f0560.jpg
Next time I will show how to add some stuff in our UI
![Wink ;)](./images/smilies/icon_e_wink.gif)