Here's an over-the-top, relatively exhaustive HUD guide. Hopefully this helps some people read, understand, edit, and maybe even make their own HUD files - It's not that hard at all! I know there are a couple of other guides, but this should provide some alternative insight.
The first things you should may seem negligible, but help you in the long run. They probably seem unecessary but I recommend them all.
Of course, you should always make a back-up of whichever file you're editing. I also have a habit of editing the back-up itself, rather than the 'live' file.
Download Notepad++ from here, and install it. If you'd rather not, Notepad is great too, it's just handy in N++ to flick between different files, have syntax highlighting, etc.
Shift+Right Click a .menu file, and select Open With, then find the Notepad++ executable and tick the box telling it to always open .menu files in N++ (or simply select Notepad if you'd rather use that).
Open N++, go to Settings > Preferences > Edit Components, and then change tab size to 9. This will make the tab indent the same size as in Notepad, making the formatting a little more cross compatible.
Again, in N++, change the language to C by going to Language > C > C. This will make the syntax highlighting relatively useful.
Bind a key in QuakeLive to quickly load your HUD. Do this in-game by bringing console down (ctrl+alt+` if you haven't enabled it yet), and typing bind X loadhud, where X is the key you wish to bind. Alternatively, add the line to your game cfg.
Not really a step this, but the easiest way to work on a HUD is have QL open, edit a value in your editor, save, load the HUD, see what effect your change made, alt tab back into your editor again.. Wash, rinse, repeat.
To get this out of the way and shatter some peoples' hopes, you cannot edit the following:
The team overlay position. There is however, a custom HUD based alternative, but it doesn't show everything nor does it show appropriate icons. I may add this later.
The lagometer position. When drawn with cg_lagometer "1", the lag meter is always drawn in the same spot near the bottom right of the screen.
The demo recording message position. This is removable with cl_demoRecordMessage "0", however, it's on-screen position isn't movable.
First off, you'll need to understand that the HUD in QuakeLive is drawn on a 640x480 grid from the top left to the bottom right - No matter what, regardless of resolution or any other settings. There is also no way to make this into some special 'widescreen aspect ratio' mode.
I'm going to be using my own HUD as the example in this guide, as I know it well, it's laid out as cleanly as I was able, and should help you some. You can get the files from here:
quakelive.rar
Every HUD file needs to start off with the line
#include "ui/menudef.h"
This lets your HUD file reference the needed ownerdraws, etc. What's an ownerdraw? You'll know in a minute.
Before I go any further, I'd like you to know that #define is pretty much used as a shortcut in these files. It allows you to essentially alias something you're repeating lots, and have it easily changeable in one place - Wherever you made the #define. As example:
#define LEFTALIGN textalign ITEM_ALIGN_LEFT
LEFTALIGN here is an alias I have made to save me writing out textalign ITEM_ALIGN_LEFT every time I want to left align some text. It's more useful than just that, though.. You can use it to specify colours that you repeat over and over again through the code (you'll see where later, for example in the scoreboards and in your health/armour value). Therefore, every time you want to have a box or whatever as the colour you'd prefer, you only need to change it once like follows:
#define COLOUR_CRITICAL 1 0 0
I can then use COLOUR_CRITICAL in my health and armour to make it change to whichever colour I (or whoever may be editing my HUD) fancy for having a low HP/AP value, in this case 1 0 0 meaning red in RGB, but I'll explain that later.
You'll then need to make one of your HUD menuDefs, which are more like just a section of your HUD, which will then contain smaller sections (itemDefs) with actual content. The menudef basically just allows you to have an initial co-ordinate for a group of itemDefs you want to keep in the same area. It serves that purpose for me, at least. So, cracking on, you'll do something similar to the following..
menuDef {
fullScreen MENU_FALSE
visible MENU_TRUE
rect 0 0 640 480
}
fullScreen MENU_FALSE appears optional, but it's good practice to keep it there, whilst visible MENU_TRUE simply means it's visible in-game rather than hidden.
The following line is then an important one, as the rect values are how you move your HUD elements around. The first value is the horizontal position on the 640x480 grid, whilst the second is the vertical position. Doing 0 0 means that this menuDef's start off at the top left of the HUD, at the beginning of the grid. Starting at the beginning of the grid when I was learning how to do this myself made it much easier for me to comprehend where I was putting the HUD elements, but you can group things together later. Then, the third value is the horizontal size that this menuDef will use (640 meaning it will use the full 640 width), and the fourth value is the vertical size (with 480 obviously meaning it uses the full 480 height of the grid).
However, because we will use fullScreen MENU_FALSE and visible MENU_TRUE in every menuDef, we can use a #define to make writing them out less tedious. So if I put the line
#define DEFAULTS_MENU fullScreen MENU_FALSE visible MENU_TRUE
near the top of my HUD file, I can then shorten my menuDef to
menuDef {
DEFAULTS_MENU
rect 0 0 640 480
}
However, even though the parser accepts 2 commands on 1 line, it isn't really supposed to, so shy away from this outside of the exampled DEFAULTS_MENU and DEFAULTS_ITEM (seen later). Anyway, moving on.. This menuDef is empty and had no content, so we need to add an itemDef!
itemDef {
DEFAULTS_ITEM
rect 296 444 22 22
backcolor 0 0 0 0.8
style 1
background "ui/assets/hud/health.tga"
}
Beginning on the first line, I am using another #define alias by the name of DEFAULTS_ITEM. All itemDefs should have the lines decoration and visible 1, so by using the following we can cut down on the tedious re-writing of this, and have less lines and clutter in the file:
#define DEFAULTS_ITEM decoration visible 1
Then, on the second line, is another rect setting. The co-ordinates in this (the first two numbers) are relative to the co-ordinates for the menuDef, in this case 0 0. The 296 444 means this itemDef is located 296 units across, then 444 units down on the 640x480 grid.
The third line is backcolor 0 0 0 0.8. backcolor enables you to colour an area, the size of which is determined by the third and fourth values of rect above (in this case 22 wide and 22 tall). The numbers are R G B A, meaning Red Green Blue, and Alpha (alpha meaning transparency). So, to change the colour to one of your choice, the change the first three numbers. I can't really provide an endless list of values for these, but you can pop open almost any colour picker, and choose a colour, and then fill in the numbers as appropriate. You can find seemingly a great online colour picker here. So, a red value of 21, green 131 and blue 47 would make your area this green colour . Then change the last number between 0 and 1 for the level of transparency.
This sets the style of the box. There are five usable styles. Taken from rfactory.org as I can't write it any better:
style WINDOW_STYLE_EMPTY - this is the default window style and nothing special is done with it.
style WINDOW_STYLE_FILLED - fill the window with the background color. Also use the fade values to fade the menu in and out.
style WINDOW_STYLE_GRADIENT - use the gradiant bar graphic, colored with the background color to fill the window. The graphic is stretched to fit the window size.
style WINDOW_STYLE_SHADER - fill the window with the background graphic, tinting it with the foreground color if one has been defined.
style WINDOW_STYLE_TEAMCOLOR - fill the window with the color of the team you are on. A Team Arena specific window style.
You can also use the number of the style, rather than the full name, so for an empty box you do style 1.
This allows you to set an image to be the background of the itemDef area. The image will be scaled to the full size of the rect value.
By using an ownerdraw you are able to include something dynamic such as health, armour, game clock, obituaries, scores, flag carrier icons, etc. These can be used in conjunction with ownerdrawflag to only show when appropriate.
For a full list of ownerdraw values, check this text file. Most are fairly self-explanatory.
http://quakelivehud.blogspot.com/
Fiddle with the numbers.
// ********** HEALTH //
// Health icon
itemDef {
DEFAULTS_ITEM
rect 296 444 22 22
backcolor 0 0 0 0.8
style 1
background "ui/assets/hud/health.tga"
}
itemDef {
DEFAULTS_ITEM
rect 295 443 22 22
ownerdraw CG_TEAM_COLORIZED
style 1
background "ui/assets/hud/health.tga"
}
// Health value
itemDef {
DEFAULTS_ITEM
rect 210 450 63 22
ownerdraw CG_PLAYER_HEALTH
HEAVYSHADOWTEXT
RIGHTALIGN
textscale vitalsBIG
forecolor COLOUR_STACKED 1 // COLOUR_STACKED when >150
addColorRange -999 30 COLOUR_CRITICAL 1 // COLOUR_CRITICAL from -999 to 30 (30 = max quad PJ dmg)
addColorRange 31 80 COLOUR_LOW 1 // COLOUR_LOW from 31 to 80 (80 = rg dmg)
addColorRange 81 150 COLOUR_HEALTHY 1 // COLOUR_HEALTHY from 81 to 150
}