UI

UI Screens are defined in text files which define the objects and actions of UI screens. They are made up for 2 main sections, animations and objects. Animations are defined first in the file, followed by objects. Animations are not required for the correct operation of most UI screens.

Objects

All objects are defined by a minimal data chunk of the form:

[<objectName>] TYPE <type> X <x> Y <y> WIDTH <w> HEIGHT <h>

the different types of UI objects and their capabilities, defined using additional tags in the chunk, are described below. All x,y and width, height values are assumed to be based on a 1024x768 screen.

The Parent Object

The first object defined in a file is assumed to be the parent object. Any other object in the file without an explicit parent definition is assumed to be a child of the parent object. The parent object has a number of unique tags which can be set.

HANDLER <handlerName> // handler tags hook in to the code and so should be used with caution.

                       //In most cases you will want to keep handler values as they are already set in existing/equivalent files.

MODAL // if set, this says that the screen is modal and prevents interaction with any screens below it in the display stack. LEVEL <level> // each screen is created at a fixed level in the screen layers. It is the order in which screens are displayed.

Additional Common Tags

DRAGGABLE <size> // denotes that an object is draggable. Size is the height of draggable top border. FOCUS // can this object have focus (be moused over, clicked on, etc). Some objects (e.g. buttons) are always focus-able. SFXFOCUS <id> // play the sound (based on the position in the sound list) when the object is moused over. ALWAYSTOOL // always display the tooltip text at the bottom of the object ALWAYSTOOLX <offset> // x display offset for ALWAYSTOOL display ALWAYSTOOLY <offset> // y display offset for ALWAYSTOOL display CLIPPING //

Object Types

OBJECT This is a generic UI object. It is neither visible nor interactable.

IMAGE An image object is simply a displayed texture. Valid tags are:

FILE <filename> // the filename of the texture. The root path is DATA\UI\TEXTURES.

You can show just a portion of a texture by using the additional tags below:

IMAGELEFT <value> IMAGETOP <value> IMAGEWIDTH <value> IMAGEHEIGHT <value>

These values are in pixels, so if the texture is resized, they will need to be re-evaluated.

ANIMSPEED <speed> ANIMFADE <value> COLOUR <colour>

DISPLAY

A display object is a non interactive display. It draws a simple window using a window template texture.

Valid tags: FILE <filename> // texture filename

The window template is laid as as follows (generally it is assumed the texture will be 256x256). The corner 1/16ths of the texture are the corners of the window - these are drawn at 64x64. The top and bottom and left and right center halves are the frames (these are stretched to size) and then the middle of the texture is stretch to cover the remaining center of the window.

STRING <stringID> FONT <fontname> COLOUR <colour> BORDER <colour>

Used to display a window title when used.

BUTTON

Button objects are displayed using a texture file. This file must contain 4 versions of the button. These are arranged as follows:

Normal - top left Moused Over - top right Pressed - bottom left Inactive (greyed) - bottom right

Valid tags: FILE <filename> // texture name STRING <stringID> FONT <fontname> COLOUR <colour> BORDER <colour> IMAGEU <u> IMAGEV <v>

TEXT

A static text object used to display information to the user.

Valid tags: STRING <stringID> FONT <fontname> COLOUR <colour> BORDER <colour> CENTER // Causes the text to be centered horizontally in the rectangle. WINDOWEDBACK RESCALE FILE <filename> TEXTLEFT <value> TEXTTOP <value> TEXTWIDTH <value> TEXTHEIGHT <value> Screen placement values for the actual text list within the main object window.

LISTBOX

A listbox allowing the user to scroll through and select lines. Listboxes require 3 textures.

One is the texture which is used for the listbox frame.

Another contains all the various listbox controls. The texture is laid out as follows:

Up scroll arrow - top left Down scroll arrow - bottom right Scrollbar - bottom left (this is stretched to the height of the listbox) Scroll nub - bottom right

The third texture is the selection display. This is stretched across the width of the selection box.

Valid tags: TEXTLEFT <value> TEXTTOP <value> TEXTWIDTH <value> TEXTHEIGHT <value> Screen placement values for the actual text list within the main object window.

FONT <fontname> COLOUR <colour> Defines the display of the listbox item text.

FRAMETEX <filename> CONTROLTEX <filename> SELTEX <filename> The files containing the various textures used to display the listbox.

BARSIZE <value> Sets the size of the scrollbar. Default value is 32.

EDITBOX

A single line text entry box.

Valid tags: FONT <fontname> COLOUR <colour> MAXCHARS <count> Defines the display of the listbox item text.

REGIONMAP

A specialist control for representing a map of distinct regions.

Valid Tags FILE <texture>

The texture for the region map must be crafted in a specific way. It should be a 4 channel TGA file. The channels in the file are used in the following way:

R - a monochrome image layer. A region is coloured with its owning sides colour modulated with this channel. G - selected layer. The currently selected region has this layer coloured with the defined selection colour and blended with the normal map pixels. B - currently unused A - region layer. The alpha value of each pixel denotes which region the pixel belongs to. Value 255 is a special value for invalid pixels which belong to no region.

You can also provide a .DAT file (with the same name as the texture file) to define the owner and selection colours. These are of the format:

SELECT <hexcolour> COL0 <hexcolour> COL1 <hexcolour> ...

e.g.

SELECT FFFF00 COL0 FFFFFF COL1 FF00FF

Enhanced Graphics You can also provide enhanced graphical files if you desire. There are two ways of doing this, which all interoperate correctly.

You can provide a single drawn image by using the tag in the global chunk

HANDDRAWN <texture>

This image is used in place of the monochrome channel from the main texture file. The alpha channel determines how the side colours are blended with the image colour, with zero meaning that the image colours are fully modulated with the side colour, and other values blending the modulated colour with the original image.

You can also provide pre-created images for each side. That is, when a side owns an area then if an image for that side exists, the system will display that section of the drawn image with no colouration or other changes. These are defined by the tag in the global chunk

DRAWN<N> <texture>

e.g.

DRAWN0 side0.tga

sets the texture to be shown when an area is owned by side zero.

Per-Area Data You can also set up data for each area in their own chunk. Valid tags are:

X <x> Y <y> DATA <a> [<b> <c> <d>]

Where X and Y are the region map image pixel coordinates of the center point of the area (retrieved in script as 1024x768 coordinates using the RegionMapGetX/Y functions). DATA can be used for preset data on each area to be used in the script. There can be up to 4 data elements in the list. NOTE: While there are both Get and Set functions (RegionMapGetData/RegionMapSetData) it is important to note that this region data is NOT saved as part of a save game and so the Set function should only be used for data which can be rebuilt when the screen is activated etc.

e.g.

[44] // chunk header should contain the index of the area X 100 Y 300 DATA 100 4 5 // unset data is initialised to zero

VARIABLEEDIT

This is a control specially built to enable quick and simple editing of data stored in a script structure. The UI file itself only contains the basic positioning details of the control, with scripting being used to set up the structure type to be edited and any custom layout functionality.

The default behaviour is to list all the structure elements arranged to fill the control area, or centered horizontally if all elements will fit. The logic attempts to ensure the same layout irrespective of resolution.

Valid Tags

FONT <fontname>

The commands used to set up and control a VariableEdit control are

//set up a variable edit control with the structure you want to edit. The customFilename points to a file which allows setup of custom entry positioning/fonts and other details. VariableEditSetStruct(objectName, structName, [customFilename])

//fill the edit control with the values from the given variable. Requires the variable name string, not the variable itself. VariableEditSetVariable(objectName, variableName)

//use the edit control to set the values of a given variable. Requires the variable name string, not the variable itself. VariableEditGetVariable(objectName, variableName)

The custom layout file has a syntax as below

<elementName> I <elementName> R <x> <y> <width> <height> [<editbox width>] <elementName> C <hexColour> <elementName> F <fontname> <elementName> B<sizePercent>:<buttonTextureName>

The elementName can be either an explicit name, a wildcard string name, or apply to all members of an array, as follows

type I // ignore the type element of the structure type* I // ignore the type element and any other elements which start with type type? I // ignore all array entries for the type element

Examples of usage are

type R 10 10 100 40 // all in 1024x768 coordinate space

type C FFFF00FF // magenta fully opaque type F smallFont

type B50:plain_button.tga // rather than an edit box, have a button taking up 50% of the width of the area

By default the edit boxes are set up to only accept numeric input.

TABSET

Creates a set of buttons which automatically enable or disable other objects in the screen based on which is currently active.

Valid tags

FONT <fontname> COLOUR <hex colour> MAXWIDTH <maximum button width> FILE <button texture filename>

The control creates a button for each of its direct child objects. The button order is the reverse of the order the objects are defined in the UI file.

The text on the buttons defaults to the name of the UI object, but you can add a text file entry of the form

TAB_<objectname>

and this will be used.

Object Commands

All objects can have one or more commands attached to them. Commands are inbuilt UI commands to allow for simple actions to occur. While any object can have a command attached to it, not all are able to trigger nor respond to them. Available commands are:

COMMAND ENABLE <screen> COMMAND DISABLE <screen> COMMAND PRESS <UIObject> COMMAND SHOWBOX <stringID> COMMAND CLOSEGAMEANDOPENLINK <url> COMMAND CUSTOM <value> // send a custom value to a code-defined handler in the game COMMAND KEY <key> // simulate a key press. Can be any alphanumeric key value, or the special TAB value for the tab key.

for example

COMMAND ENABLE MAINMENU COMMAND DISABLE POPUP COMMAND PRESS POPUPOKBUTTON COMMAND SHOWBOX IDS_HELPFUL_MESSAGE COMMAND CLOSEGAMEANDOPENLINK someurlonslitherine.html COMMAND CUSTOM 55 COMMAND KEY F

All commands are checked for validity (that is, that the objects they reference are defined) during UI system loading. Screens are defined by the name of the root objects defined in them.

Current command triggers are:

BUTTON - commands triggered on press EDITBOX - commands triggered on RETURN key

Animations

Animations are defined at the top of a UI file, and their chunks all start with a # symbol as shown below. An animation with the name #START will be played whenever the screen is activated. Other named animations can be triggered from scripts etc. All animation commands work on a tick-based timer which is always reset to zero when an animation is played.

[#<name>] ANIM PLACE <object> <x> <y> // place the object at the given coordinates on the given tick ANIM MOVE <object> <x> <y> <steps> // move the object from its current position to a new set of coordinates over a given number of steps ANIM SCROLL <object> <dx> <dy> <startx> <starty> <endx> <endy> <loop> // move an object from one point to another in steps of dx,dy. If loop is not zero then it will loop indefinitely. ANIM BOUNCE <object> <startScale> <endScale> <steps> // cause the object to 'bounce' scale up in size and then back over time. The scales are in 1000ths, so to bounce an object without changing its size, you would use 1000 1000. ANIM OFF <object> // disable an screen via its parent object name. Only works on top level objects. ANIM SFX <object> <soundID> [<bank>] // play a UI SFX at the given time. The soundID is the position in the sound list. ANIM TIME <object> <delta> // change the 'time' for a given object. Each object can have its own flow of time, and this allows (e.g.) a single object on a screen to execute its animations over and over (if delta is <0, moving time back and allowing an object to execute its animations again. ANIM FADE <object> <startColour> <endColour> <steps> // change the colour (including alpha) of an object over time. Colours should be defined as hex values in AARRGGBB order, e.g. FFFFFFFF for fully opaque white.