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:

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 !):

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 !

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:

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.

Let's have a look at some new proprieties in there:r, g and b are the text's color. r being Red, g Green and b Blue. There values go from 0 to 255.now text=#HeroName, what does #HeroName mean? Adding a # between a word for a text is a tag to tell the game it is a pre-defined text, HeroName being the name of that text. In this case, #HeroName is the tag to display the Character's name. A complete list of pre-defined texts will be available at the end of the topic.

Let's have a look at the different proprieties:image : The image used for the Gauge. Attention ! Only images ending with "_empty", "_full" and "_fill" are allowed for Gauges !width : Is the size of and Horizontal Gauge. If the Gauge was set as Vertical, height should be used instead.type : Is the type of Gauge, either HORIZONTAL or VERTICALadjustx and adjusty : Is were the Gauge is filled in the image, basically a few pixels down/right from the top left border.alpha : This propriety is also available for images and some other Elements. In this case, it defines the transparency of the Gauge (Attention, the Alpha doesn't really go from 0 to 255, afaik it more or less goes from 0 to 35, this isn't a decision from me but from DR's original code...)now and max : Are the values for the Gauge. max is the maximum value and now is the current value. Tags are put in order to ask the game the values.

This button is made nearly the exact same way as the TextButton but let's look at the differences:First we must set an image for the button. Attention, only the images with "_normal", "_highlighted", "_pressed" and "_disabled" at the end are allowed unless you add the propriety "uniqueimage=1".As you can see, we still reference the UI name in the "action" propriety but we changed the type to "CLOSE_UI".Also, we added a "shortcut" propriety. This allows you to set a keyboard shortcut for the button. This also works for TextButtons.

Layouts have two roles in the UIs.- The first and main one is to align several widgets properly without having to manually set the coord of each widget. You only have to set the Layout's coords.- The second role is to group the Radio Buttons.

The Layouts have the same common properties as the other Widgets.

They have one extra property however:offsetThis property determines the space in pixels between each widgets in the layout.

There are two types of layouts:HBox and VBox.HBox is the Horizontal Layout.VBox is the Vertical Layout.