This tutorial will cover writing a custom HUD component for displaying your current speed, compatible with the Ubermenu preset.
It is assumed you have TAMods and the Ubermenu working, and that you are familiar with customising the HUD in-game via the Ubermenu.
Custom HUD component scripts must be stored within the Ubermenu preset, at
<Documents>/My Games/Tribes Ascend/TribesGame/config/presets/ubermenu/hudmodules. Navigate to this directory and create a new file called
In this file, we'll first add the skeleton information that the Ubermenu needs for our HUDModule. The following is an annotated HUDModule skeleton; add it into your
Now we have the skeleton, we can make our script draw something! To test that we've set things up correctly, let's start by simply drawing the text "Hello World".
Add the following inside the
This draw command will draw the text
Hello World in white in the console font, at pixel position
(10, 10) on the screen.
To test this out, open the game, enter Roam Map, and open up the Ubermenu. Under
HUD Maker > Add Module, you should now see an entry labelled
Tutorial Speedbar. Adding this module should cause "Hello World" to appear in the top left of the screen, as in the following:
If adding your module caused Lua errors to display in the console, then your script is incorrect. You will have to fix your script and use
/reloadconfig to reload it before you can try adding it again.
You can remove the
drawSmallText call from your script. We will now make the script display a custom speedbar.
First, we'll add some options for the user to set to customise the speedbar. Add the following into your script, directly under where
module.opts is assigned:
We're adding options for the user customise the
Y placement of the bar, its
Height, as well as the colours used.
Note that by convention,
Y positions for HUDModules should represent a percentage of the screen width/height. This will allow your module to display in the same place regardless of what resolution you play the game at. For this script however, the
Height will be in pixels.
Now we need to write our
module.draw function to actually display the speedbar. First, we need to calculate the values we need for displaying it.
module.draw, add the following statements to ensure we only draw the speedbar when the player is alive and is skiing (or is in a vehicle):
hud_data variable is provided by Ubermenu to give access to particular parts of game information (e.g. whether the player is alive) without having to call
player.isAlive() yourself. Ubermenu checks the status once and exposes the value to all modules via
hud_data because there may be many different modules that all need to know whether the player is alive.
These lines will cause the
module.draw function to exit early, without drawing anything, in the event the player is dead or is not skiing/in a vehicle.
Next, we will calculate the pixel positions we will use for drawing:
Next up, we will figure out what proportion of the bar we need to fill, based on the current speed:
Finally, we'll calculate the colour of our speedbar, by linearly interpolating between the minimum speed colour and the maximum speed colour:
Now that we've calculated the values we need, we can actually draw our speedbars. First we'll draw a background and a border for our speedbar:
Next we'll draw the bar itself:
The above command will draw our speedbar inside our border; the second last parameter specifies the direction of the bar (the bar fills upwards in our case).
And finally, we'll draw the player's actual speed underneath the bar:
Here we are drawing the speed using an Unreal Tournament font; we've gotten the drawing size of the text so that we can offset its Y position to prevent it clipping into the bar.
The script is now complete. Try it out in the game and fix any errors (you can see the full, correct script below). It should look something like the following screenshots:
You've now written your first HUDModule! All HUDModules should use the same skeleton as this one; you can vary the options you present and the code in the
module.draw function to display other things, and combine them with other TAMods features to build more complex custom HUDs.