Making the UI :: Adding elements

[DarN]

Making the UI :: Adding elements

In this article I will show you how to add elements to the HUD, with custom values provided through script with FOSE.


Files: hud_main_menu.xml - %your_config_file%.xml, a gamemode script

"io()" is simply a shortcut to the menu itself. "globals()" is from globals.xml, and is always available from any menu. The DUI F3 config file is included in globals.xml, and thus any usage of globals() is likely to be a DUI setting.

Let's start with the XML code. For this tutorial, I'll use the combat indicator introduced in DUI F3 a11:

Code

GeSHi (xml):
1. <image name="DUIF3_CombatIndicator">
2.	<filename> Interface\loading\glow_loading_vdsgsymbol.dds </filename>
3.	<x>
4.		<copy src="screen()" trait="width" />
5.		<sub src="me()" trait="width" />
6.		<div> 2 </div>
7.		<add src="globals()" trait="_HUDCI_X" />
8.	</x>
9.	<y> <copy src="globals()" trait="_HUDCI_Y" /> </y>
10.	<width>
11.		<copy> 128 </copy>
12.		<mul src="globals()" trait="_duiscale" />
13.	</width>
14.	<height>
15.		<copy> 64 </copy>
16.		<mul src="globals()" trait="_duiscale" />
17.	</height>
18.	<zoom> <copy src="globals()" trait="_duiHUDscale" /> </zoom>
19.	<systemcolor> &hudalt; </systemcolor>
20.	<alpha> <copy src="io()" trait="_HUDAlpha" /> </alpha>
21.	<visible>
22.		<copy src="io()" trait="_HUDMode" />
23.		<and src="io()" trait="_inCombat" />
24.	</visible>
25. </image>

This is an image element obviously, and as such has a filename tag associated with it. I chose the vdsgsymbol for this one - I couldn't find anything that screamed combat in the original textures. The path is relative to Data\textures.

The horizontal position on line 3 centers the element on screen, and adds whatever the user has configured in the config file to that position (line 7). The vertical is simply copied from the config.

For width and height, the original size is used (128x64) and scaled to what the UI scale is set to. For DUI this will be 60% by default. The "_duiscale" var will be .6 at 60%, making the width 76.8 in this case. If you're adding to the default HUD, scaling won't be necessary of course. <width> 128 </width> would suffice then.

On line 18 we have the zoom tag, which takes care of scaling the image. If zoom is absent, it'll be at 100%, which makes our new sizes to small for the content, so we need this to make it fit. For elements with textures defined in the texatlas, zoom is calculated automatically. duiHUDscale is another var in DUI to simplify the code a bit. It's simply 60 here. These helper vars can be found in duiUtilFunc.xml if you're interested.

We set systemcolor to be hudalt here, making it red. This only shows when the user is in combat, so red should be appropriate.

Alpha is copied from a global var I've defined in hud_main_menu.xml, which copies the value from another element. If the user has configured HUD transparency in the game options, this will make our element blend in.

The visible tag is where the important stuff happens for this one. _HUDMode is again a custom var, set to true only when we're in game mode. _inCombat is our custom var for this particular element. It's simply defined at root level in hud_main_menu.xml: <_inCombat> 0 </_inCombat>
Setting this to 0 here, means the element is hidden by default, and will only show when we toggle it from script. Visible will only be true if _HUDMode and _inCombat is set to 1.

We need one more variable here:

Code

GeSHi (xml):
<_HUDinCombat> <copy src="globals()" trait="_HUDShowCI" /> </_HUDinCombat> <!-- DarN for FOSE -->

There's no access to globals() from script (yet), so this simply copies the value into the HUD so FOSE can access it. I've simply placed it above _inCombat.

_HUDShowCI is the setting for turning on/off the combat indicator. Here's our settings:

Code

GeSHi (xml):
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Combat Indicator ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<_HUDShowCI> 1 </_HUDShowCI>			<!-- [0] Show Combat Indicator - needs FOSE	-->
<_HUDCI_X> 0 </_HUDCI_X>			<!-- [0] Rel. center screen			-->
<_HUDCI_Y> 5 </_HUDCI_Y>			<!-- [5] 					-->

These are found in DUIF3Settings.xml, which is included in globals.xml, which makes them accessible with globals(). Cumbersome, I know.

That's all the XML required for this one - on to the script portion.

In my init code, run when GetGameLoaded is true, we have

Code:

Set showInCombat To GetUIFloat "HUDMainMenu\_HUDinCombat"

This gets our setting from the HUD (originally from our config of course) into a local var. Then later in the GameMode block

Code:

if (showInCombat)
short CI
Set CI To Player.IsInCombat
SetUIFloat "HUDMainMenu\_inCombat" CI
endif

This code is run if the user has turned the indicator on. CI will be 1 or 0, making the element shown or hidden respectively.

Here's our combat indicator in action: