TUTORIAL 2 - Messing with the HUD
by Lev

In this tutorial I'm going to teach you how to mess around with the hud in Q3A. If there's any experienced programmers out there shaking their heads because of my messy coding style. Well what can I say it's messy! but it's easy to understand for newbies in the world of programming.

The finished product of this tutorial should be a status bar for you ammo, which is easy to replicate for any other application.

The only file we'll be working with is:
cg_draw.c

1. getting rid of that model and numbers

All we're going to do here is comment some code. Basically taking the line where it draws the model and the numbers for your ammo and getting rid of them.
Go to about line 349

CG_Draw3DModel( CHAR_WIDTH*3 + TEXT_ICON_SPACE, 432, ICON_SIZE, ICON_SIZE,
	   cg_weapons[ cent->currentState.weapon ].ammoModel, 0, origin, angles );

turn this line into this!

// -- commented out for status bars.
// CG_Draw3DModel( CHAR_WIDTH*3 + TEXT_ICON_SPACE, 432, ICON_SIZE, ICON_SIZE,
//	   cg_weapons[ cent->currentState.weapon ].ammoModel, 0, origin, angles );

On about line 381 you'll see this...

CG_DrawField (0, 432, 3, value);

Comment that out too.

2. Creating the Actual Bar

Ok first lets make a variable. Why? It's a surprise.
Go back up to about line 316

	
static void CG_DrawStatusBar( void ) {
	int			color;
	centity_t	*cent;
	playerState_t	*ps;
	int			value;
	
        int             drawvalue;

	vec4_t		hcolor;
	vec3_t		angles;
	vec3_t		origin;

Ok so now we'll actually write the lines that draw our status rectangle. Go to about line 387.

trap_R_SetColor( colors[color] );
	
            drawvalue = value * 100/200;
            CG_FillRect( 21, 450-drawvalue,  20, drawvalue, colors[color]);

Now I guess I can let you in on the seceret of the variable. When quake draws the screen pixels 1,1 are at the top right of the screen. so the way we set up the rectangle is to calculate your ammo as a percentage of 200 (that's max ammo for every weapon except the machinegun.). Then that 450 - drawvalue line is telling the function what y value to draw the top corner of the rectangle. so now you have a working status bar that will shrink as you use up ammo.. that was pretty straight forward. Still missing something though? Well I guess I'll tell you right now that all of the draw functions for text and 3d models all work off the same basic x,y,color principle. So you could easily add another bar behind it that's a different color.

One more thing I can show you is the syntax for their colors. At about line 324 you'll see something like this.

	{ 1.0, 0.2, 0.2, .8 },		// low health
	{0.5, 0.5, 0.5, .8},			// weapon firing
	{ 1, .49, 0, .8 },			// health > 100
        { 0, 1, .5, .1},              //transparent green
	{ 1, .2, .2, .1}};           //transparent red

The numbers aren't going to be the same cause I've messed with them a little bit. but this is basically an array that the good boys at ID made in order to define the {Red,Green,Blue,Transperency} attributes of their colors. Also you should only have four different colors. But you can define more by making the array bigger. In this way you can make a semi transparent rectangle behind your ammo rectangle to give it that cool look. Well hopefully you can figure out everything you want to do from here. Any questions, post at the forum at on.to/tht or email me