Quake Live HUD Tutorial

2009-06-24T06:48:00.009-07:00

Goodbye

(click on the image to see a large version)

Thanks for all the positive comments and e-mails.

(january 5, 2010)

My personal and professional life are keeping me really busy.
Borgondio.

Viva Quake!

(june 24) added #define post

(june 24) added a new HUD

(june 12) The link to the default file should be finally fixed now.

(june 06) New section: "demo HUDS" hopefully I'll post a few more huds soon.

(june 05) For those of you who asked for it: here is the link to my hud. http://qlhud.core.ws/id/0k1Jyd

(may 31) Take a look at the cvarTest post.

(may 27) See all available images. Open the pk3 files. See "images"

(may 25) new Edited Version of the default HUD file. Formatted, cleaned up and labeled. It should be easier to work with.

(may 24) instructions to uninstall a custom hud. check "install the HUD"
(may 24) correction about decoration. See "file.menu explained"

(may 23) new post "borders"
(may 23) new info in "backgrounds"
(may 23) examples for "position"
(may 23) new post "icons"
(may 23) new post "ownerdraw values"
(may 23) new post "ownerdrawflag values"
(may 23) added images and examples to most sections

(may 22) a couple of corrections in "text style" & "file.menu explained"

(may 19) take a look at the Crosshair examples

[ BORGONDIO.]

2009-06-24T06:37:00.000-07:00

#define

use #define to create text substitutions.

Example:

#define my_color 1 1 1 1

#define [your identifier name] [any code that you want]

If you want to change the color of 10 different elements with one line
you just have to use the "identifier"

itemDef {
forecolor my_color
}

2009-05-27T15:28:00.001-07:00

Customize your HUD

(click on the image to see a large version)

Updates

(june 24) added a new HUD

(june 12) The link to the default file should be finally fixed now.

(june 06) New section: "demo HUDS" hopefully I'll post a few more huds soon.

(june 05) For those of you who asked for it: here is the link to my hud. http://qlhud.core.ws/id/0k1Jyd

(may 31) Take a look at the cvarTest post.

(may 27) See all available images. Open the pk3 files. See "images"

(may 25) new Edited Version of the default HUD file. Formatted, cleaned up and labeled. It should be easier to work with.

(may 24) instructions to uninstall a custom hud. check "install the HUD"
(may 24) correction about decoration. See "file.menu explained"

(may 23) new post "borders"
(may 23) new info in "backgrounds"
(may 23) examples for "position"
(may 23) new post "icons"
(may 23) new post "ownerdraw values"
(may 23) new post "ownerdrawflag values"
(may 23) added images and examples to most sections

(may 22) a couple of corrections in "text style" & "file.menu explained"

(may 19) take a look at the Crosshair examples

[ BORGONDIO.]

2009-05-27T15:27:00.001-07:00

Available Images

Do you want to see all the images you can use for you HUD?

They are inside the pk3 files.
The pk3 files are in the same folder where the UI folder is:
id Software /quakelive /baseq3

How to open those pk3 files

1.Download - quakelivedec -
QuakeLive beta files decoder 0.1
here's the link: http://aluigi.org/papers.htm#q3

2. Unzip it.
Copy the 2 files to c:/windows/sytem32

3. Windows taskbar > start > Run
Type

quakelivedec file_to_decode.pk3 output_file.zip

The program will produce a zip file. Now, you can unzip it and see what images
you can use in you hud.

Example:

Let's copy the file qztourney8.pk3 to the directory c:/
(files can be anywhere, I chose this because it is easier to explain)

Windows taskbar > start > Run
you type

quakelivedec c:/qztourney8.pk3 c:/any_name.zip

Now you have a file named any_name.zip
Unzip it. You will see 5 folders. One of them is called "textures"
Inside this folder there are several folder with images.

You use this images with the command background.
for example:

background "textures/sf2/nlaunch.jpg"

It got easier

Thanks to TiabKeeg for this

Batch file to decode pk3 files
http://rs651.rapidshare.com/files/250852747/QuakeLive_BAT.zip

1. unzip, copy the folder to C://
2. Inside the folder you will find quakelivedec.zip, unzip and copy quakelivedec to C://windows/system32
3. put the pk3 files you want to decode in the "PAks" folder
4. double click "QL PAK to ZIP"
5. the decoded files are in the "ZIPs" folder

2009-05-23T09:58:00.001-07:00

Demo HUDS

Some demo HUDS for you to play around and start modifying:

BLACK BAR
link to file http://qlhud.core.ws/id/0k1Jyd

NO NUMBERS
link to file http://qlhud.core.ws/id/vH97Ug

CLUSTER
link to file: http://qlhud.core.ws/id/p0t872

COLOR-CHANGING BARS
link to file: http://qlhud.core.ws/id/ZgHCR4

Find more huds

http://qlhud.core.ws/

http://www.quakelive.com/forum/showthread.php?t=11523

2009-05-23T09:52:00.001-07:00

cvarTest

cvarTest works like ownerdrawflag.
It is used to display items only when a certain condition is met.

example: an item that shows only for unranked games (instagib or practice)

itemDef{
visible 1
rect 300 200 100 100
text "This is an unranked match"
cvarTest "sv_ranked"
showCvar {"0"} // 1=ranked match, 0 = unranked
}

As you can see, you also need showCvar. It indicates what value of the variable makes the item show. In the example the item only shows if "ranked" is false.

For a list of cvars go to http://www.holysh1t.net/quake-live-commands-list/

2009-05-23T09:40:00.000-07:00

ownerdrawflag

ownerdrawflag is used to display items only when a certain condition is met.

One example: the following piece of code displays two messages
"OK" if you are in 1st place
"wtf ?" if you are not in 1st place

menuDef {
visible 1
rect 300 240 20 20

itemDef {
rect 0 0 32 32
visible 1
text "OK"
ownerdrawflag CG_SHOW_IF_PLYR_IS_FIRST_PLACE
}

itemDef {
rect 0 0 32 32
visible 1
text "wtf ?"
ownerdrawflag CG_SHOW_IF_PLYR_IS_NOT_FIRST_PLACE
}

}

This is a list of the possible values for ownerdrawflag (almost complete)

CG_SHOW_IF_PLYR_IS_FIRST_PLACE
CG_SHOW_IF_PLYR_IS_NOT_FIRST_PLACE
CG_SHOW_IF_RED_IS_FIRST_PLACE
CG_SHOW_IF_BLUE_IS_FIRST_PLACE

CG_SHOW_IF_PLYR_IS_ON_RED
CG_SHOW_IF_PLYR_IS_ON_BLUE

CG_SHOW_IF_PLAYER_HAS_FLAG
CG_SHOW_YOURTEAMHASENEMYFLAG
CG_SHOW_OTHERTEAMHASFLAG
CG_SHOW_BLUE_TEAM_HAS_REDFLAG
CG_SHOW_RED_TEAM_HAS_BLUEFLAG

CG_SHOW_ANYTEAMGAME
CG_SHOW_ANYNONTEAMGAME
CG_SHOW_CTF
CG_SHOW_CLAN_ARENA
CG_SHOW_TOURNAMENT
duel matches

CG_SHOW_HEALTHCRITICAL
(when your health is <= 25 )
CG_SHOW_HEALTHOK
(health > 25)

CG_SHOW_IF_WARMUP
CG_SHOW_IF_NOT_WARMUP

2009-05-01T12:51:00.006-07:00

ownerdraw

ownerdraw is the command that displays info on the screen.
For example: the weapon icon and ammo value

menuDef {
name "Ammo"
visible 1
rect 266 442 99 36

itemDef {
name "weapon icon"
rect 12 0 24 24
visible 1
ownerdraw CG_PLAYER_AMMO_ICON2D
}

itemDef {
name "ammo number value"
rect 39 10 63 12
visible 1
textstyle ITEM_TEXTSTYLE_SHADOWED
textscale .62
forecolor 1 1 0 .5
ownerdraw CG_PLAYER_AMMO_VALUE
addColorRange -999 5 1 0 0 1
}
}

Note: for text items you can define
texstyle
textscale (size)
forecolor

To display your own text use this command

text "your_text_here"

This is a list of the possible values for ownerdraw
(almost complete)
(alignment is relative to the area defined by itemDef)

CG_PLAYER_HEALTH
alignment: bottom center

CG_PLAYER_ARMOR_VALUE
alignment: bottom center

CG_PLAYER_AMMO_VALUE
alignment: bottom center

CG_PLAYER_ARMOR_ICON
CG_PLAYER_AMMO_ICON
CG_PLAYER_ARMOR_ICON2D
CG_PLAYER_AMMO_ICON2D

CG_PLAYER_HEALTH_BAR_100
CG_PLAYER_HEALTH_BAR_200
CG_PLAYER_ARMOR_BAR_100
CG_PLAYER_ARMOR_BAR_200
Bars consist of two items. One goes up to 100 and the other goes up to 200.
Each item requires a background image.
example:

menuDef {
name "Health Bars"
fullScreen MENU_FALSE
visible MENU_TRUE
rect 130 435 142 32

itemDef {
name "health Fill 200"
rect 85 0 64 32
visible 1
ownerdraw CG_PLAYER_HEALTH_BAR_200
style WINDOW_STYLE_FILLED
background "ui/assets/hud/h200.tga"
}

itemDef {
name "health Fill 100"
rect 0 27 128 16
visible 1
ownerdraw CG_PLAYER_HEALTH_BAR_100
style WINDOW_STYLE_FILLED
background "ui/assets/hud/h100.tga"
}
}

CG_GAME_TYPE_ICON
can't change the color.

CG_GAME_TYPE
name (example "Free For All")
alignment: on top - left

CG_CAPFRAGLIMIT
captures, frags or rounds limit.
alignment: on top - left

CG_LEVELTIMER
alignment: on top - left

CG_ROUNDTIMER
in CA, 30-second countdown to end of round
red text
alignment: on top-left

CG_1STPLACE
CG_2NDPLACE
numbers only
In team matches (CTF, CA, TDM)
CG_1STPLACE is red team
CG_2NDPLACE is blue team
In FFA these are the actual 1st place and 2nd place
alignment: on top - left

CG_1ST_PLACE_SCORE
CG_2ND_PLACE_SCORE
names and numbers
alignment: on top - center

CG_PLAYER_SCORE
individual score for team games
(it also shows your score in FFA)
alignment: bottom - center

CG_BLUE_SCORE
CG_RED_SCORE
numbers only
alignment: bottom - right

CG_MATCH_WINNER
"x wins with n"
alignment: on top - left

CG_PLAYER_HASFLAG
CG_PLAYER_HASFLAG2D
(icons) if you have the flag

CG_RED_CLAN_PLYRS
CG_BLUE_CLAN_PLYRS
for Clan Arena, number of survivors.
alignment: on top - left

CG_KILLER
who fragged you
alignment: bottom - center

CG_PLAYER_OBIT
constant update: who fragged who
can't change color.
alignment: on top - left

CG_MAP_NAME
alignment: on top - left

CG_PLAYER_LOCATION
works only for some maps.
alignment: bottom - left

CG_AREA_NEW_CHAT
area to show the chat messages.
can't change size or color.
alignment: bottom - left

CG_FOLLOW_PLAYER_NAME
"Following player_name - (Red/Blue)
alignment: on top - left

CG_PLAYER_HEAD
3D icon

CG_PLAYER_ITEM
Icon. Usable items: kamikaze, invulnerability, etc.

CG_CTF_POWERUP
Icon. Capture the Flag powerups: scout, guard, etc.

CG_AREA_POWERUP
Powerups: quad-damage, regeneration, etc.
take a look at the highlighted lines.

itemDef {
rect 0 0 35 35
visible 1
ownerdraw CG_AREA_POWERUP
special 4 // space between icons
align HUD_VERTICAL //or HUD_HORIZONTAL
}

CG_TEAM_COLOR
adds a color background.
red/blue for team games, no background for non-team games.

CG_TEAM_COLORIZED
requires a background image.
displays the image using red/blue for team games, yellow for non-team games.
example:

itemDef {
rect 0 0 32 32
visible 1
ownerdraw CG_TEAM_COLORIZED
style WINDOW_STYLE_FILLED
background "icons/icon_time.tga"
}

2009-05-01T12:51:00.005-07:00

Borders

Areas defined by menuDef or itemDef can have a border.
Use the following code.

border WINDOW_BORDER_FULL
bordercolor 1 1 1 1
bordersize 1

border values:
WINDOW_BORDER_FULL
WINDOW_BORDER_HORZ
WINDOW_BORDER_VERT
WINDOW_BORDER_KCGRADIENT

examples:

menuDef {
visible 1
rect 100 200 100 100

itemDef {
visible 1
rect 0 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_FULL
bordercolor 1 1 1 1
bordersize 1
}

itemDef {
visible 1
rect 100 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_FULL
bordercolor 1 1 1 1
bordersize 5
}

itemDef {
visible 1
rect 200 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_FULL
bordercolor 1 1 1 .5
bordersize 10
}

itemDef {
visible 1
rect 300 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_FULL
bordercolor 1 1 1 .5
bordersize 15
}

itemDef {
visible 1
rect 400 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_FULL
bordercolor 1 1 1 1
bordersize 20
}

}

menuDef {
visible 1
rect 100 200 100 100

itemDef {
visible 1
rect 0 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_FULL
bordercolor 1 0 0 1
bordersize 5
}

itemDef {
visible 1
rect 100 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_HORZ
bordercolor 1 0 0 1
bordersize 5
}

itemDef {
visible 1
rect 200 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_VERT
bordercolor 1 0 0 1
bordersize 5
}

itemDef {
visible 1
rect 300 0 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_KCGRADIENT
bordercolor 1 0 0 1
bordersize 5
}

}

menuDef {
visible 1
rect 100 200 100 100

itemDef {
visible 1
rect 0 50 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_FULL
bordercolor 1 0 0 .5
bordersize 5
}

itemDef {
visible 1
rect 100 50 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_HORZ
bordercolor 0 1 0 1
bordersize 5
}

itemDef {
visible 1
rect 200 50 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_VERT
bordercolor 1 1 1 .3
bordersize 10
}

itemDef {
visible 1
rect 300 50 50 50
style WINDOW_STYLE_FILLED
backcolor 0 0 0 1
border WINDOW_BORDER_KCGRADIENT
bordercolor 1 1 0 1
bordersize 5
}

}

2009-05-01T12:51:00.003-07:00

Crosshairs

The crosshair is the graphic item in the center of your screen that you use to aim.
(a cross, a circle, a dot)

You can not use custom graphics for you crosshair.

But you can still have a custom crosshair.

This is my crosshair:

(click on the image to see a large version)

This is the code.
Just paste it after the line. #include "ui/menudef.h"

//--------------CUSTOM CROSSHAIR

menuDef {
rect 10 10 620 360
fullScreen MENU_FALSE
visible MENU_TRUE

// horizontal line left
itemDef {
rect 100 229.5 200 1
style WINDOW_STYLE_FILLED
backcolor 1 1 0 1
visible 1
}

// horizontal line right
itemDef {
rect 320 229.5 200 1
style WINDOW_STYLE_FILLED
backcolor 1 1 0 1
visible 1
}

// vertical line top
itemDef {
rect 309.5 50 1 170
style WINDOW_STYLE_FILLED
backcolor 1 1 0 1
visible 1
}

// vertical line bottom
itemDef {
rect 309.5 240 1 130
style WINDOW_STYLE_FILLED
backcolor 1 1 0 1
visible 1
}
}

New: a crosshair that changes color depending on your health value.

// little thin "+" custom crosshair
// changes color depending on your
// health value

menuDef {
rect 314.5 234.5 40 40
fullScreen MENU_FALSE
visible MENU_TRUE

//horizontal line
itemDef {
rect 0 5 10 .5
visible 1
ownerdraw CG_PLAYER_HEALTH
background "ui/assets/score/statsfillm.png"
addColorRange 0 50 1 0 0 1
addColorRange 51 100 1 1 0 1
addColorRange 101 200 0 1 0 1
}

//vertical line
itemDef {
rect 5 0 .5 10
visible 1
ownerdraw CG_PLAYER_HEALTH
background "ui/assets/score/statsfillm.png"
addColorRange 0 50 1 0 0 1
addColorRange 51 100 1 1 0 1
addColorRange 101 200 0 1 0 1
}

}

Another example (rather ugly):

(click on the image to see a large version)

In this case, I used the letter "x" and a dark background to improve contrast.
This is the code:

//--------------CUSTOM CROSSHAIR 2

menuDef {
rect 314.5 235 11 9
fullScreen MENU_FALSE
visible MENU_TRUE
//following two lines draw the dark background
style WINDOW_STYLE_FILLED
backcolor 0 0 0 .6

//letter x
itemDef {
rect 0 11 10 10
visible 1
textscale .4
text "x"
}
}

Animated crosshair that changes color (read & blue for team games, yellow for non-team games).

(click on the image to see a large version)

This is the code:

//--------------CUSTOM CROSSHAIR 3

menuDef {
rect 315 235 40 40
fullScreen MENU_FALSE
visible MENU_TRUE

itemDef {
rect 0 0 10 10
visible 1
style WINDOW_STYLE_FILLED
backcolor 1 1 0 .5
//this is the command that auto-changes color
ownerdraw CG_TEAM_COLORIZED

//this is the animated fan
background "textures/sfx/fan.png"
}
}

As you can see you can get creative and customize your crosshair.

2009-05-01T12:51:00.001-07:00

file.menu Explained

The HUD is defined by the file

any_name.menu

This file has to start with the line

#include "ui/menudef.h"

The default files I found start with the following lines:

assetGlobalDef {
cursor "ui/assets/3_cursor2" // cursor
gradientBar "ui/assets/gradientbar2.tga" // gradient bar
fadeClamp 1.0 // sets the fadeup alpha
fadeCycle 1 // how often fade happens in milliseconds
fadeAmount 0.1 // amount to adjust alpha per cycle

shadowX 5 // x amount for shadow offset
shadowY 5 // y amount for shadow offset
shadowColor 0.1 0.1 0.1 0.25 // shadow color

font "fonts/font" 24 // font
smallFont "fonts/smallfont" 16 // font
bigFont "fonts/bigfont" 48 // font
}

I erased them from the file and everything works just the same.
(I will keep experimenting)

menuDef and itemDef

As you can read in the Position section the .menu file defines areas of the screen where information is displayed.

Such areas are defined in the menuDef sections.

menuDef{

}

Contained by the menuDef you can find one or more itemDef sections.

menuDef {

itemDef{
}

itemDef{
}

}

The itemDef sections contain the elements to display (ammo and health value, icons, bars, timer, etc.)

menuDef lines

Let's look at an example:

menuDef{

ownerdrawflag CG_SHOW_IF_PLAYER_HAS_FLAG
name "Whatever_you_want"
fullScreen MENU_FALSE
visible MENU_TRUE
style WINDOW_STYLE_FILLED
backcolor 0 0 0 .5
rect 280 300 82 62

What do these lines mean?

onwerdrawflag
Optional.
The elements will be displayed only if the condition is true.
Later, I'll post a list of the possible values for ownerdrawflag.

name
Optional.
It can be whatever you want.

fullScreen MENU_FALSE
Appears to be optional.
Not sure what it does. Put it there just in case.
MENU_FALSE = 0

visible MENU_TRUE
Makes the element visible.
MENU_TRUE = 1

style WINDOW_STYLE_FILLED
backcolor 0 0 0 .5
background "ui/assets/hud/scoreboxm.tga"
Optional.
backcolor indicates the background color.
background indicates an image.
style WINDOW_STYLE_FILLED is necessary if you want a color or image background.
The image will be drawn with the color defined by backcolor.
1st number: red (0-1)
2nd number: green (0-1)
3rd number: blue (0-1)
4th number: transparency (0-1)
If you want to display the image using its original colors use WINDOW_STYLE_SHADER
You can use WINDOW_STYLE_GRADIENT too.
0 = WINDOW_STYLE_EMPTY
1 = WINDOW_STYLE_FILLED
2 = WINDOW_STYLE_GRADIENT
3 = WINDOW_STYLE_SHADER

rect 280 300 82 62
Defines an the position and size of the area to display the info.
(It doesn't seem to be a problem if the area is too small for the elements to display)
1st number: position x (left to right, 0-640)
2nd number: position y (top to bottom, 0-480)
3rd number: size x (horizontal)
4th number: size y (vertical)

itemDef lines

name "whatever_you_want"
Optional

rect 29 6 32 32
Defines the position relative to the upper-left corner of the area defined in the menuDef section.
It defines the size of icons and background images.
Text is not affected by the size of the area.
Text is displayed center-aligned at the bottom of the defined area.
1st number: position x (left to right)
2nd number: position y (top to bottom)
3rd number: size x (horizontal)
4th number: size y (vertical)

style WINDOW_STYLE_FILLED
backcolor 1 1 1 1
background "icons/Icona_plasma.tga"
Optional.
backcolor indicates the background color.
background indicates an image.
style WINDOW_STYLE_FILLED is necessary if you want a color or image background.
The image will be drawn with the color defined by backcolor.
1st number: red (0-1)
2nd number: green (0-1)
3rd number: blue (0-1)
4th number: transparency (0-1)
If you want to display the image using its original colors use WINDOW_STYLE_SHADER
You can use WINDOW_STYLE_GRADIENT too.
0 = WINDOW_STYLE_EMPTY
1 = WINDOW_STYLE_FILLED
2 = WINDOW_STYLE_GRADIENT
3 = WINDOW_STYLE_SHADER

visible 1
Makes the element visible

decoration
It appears to be optional with most items.
But it seems necessary for
CG_RED_CLAN_PLYRS
CG_BLUE_CLAN_PLYRS
CG_1ST_PLACE_SCORE
CG_2ND_PLACE_SCORE
and, sometimes, images.
If you don't put it there, some items might not be displayed sometimes.

forecolor 1 0 .57 .8
Optional.
Color of the text.
The values (left to right) mean:
RED 0-1
GREEN 0-1
BLUE 0-1
TRANSPARENCY 0-1 (0 means invisible, 1 is solid color)

text "Any text you want"
display text.

textscale .6
Optional.
Defines the size of the text.

textstyle 3
Optional.
1 = blinking text
2 = text without shadow
3 = text with shadow

textalign
textalignx
textaligny
These don't seem to work. You don't need them anyway.

background "ui/assets/hud/chatl.tga"
ownerdraw CG_TEAM_COLORIZED
Used by some elements (health and ammo bars, score displays).
background defines a background image.
(Later, I'll post a list of the possible values for background)
ownerdraw CG_TEAM_COLORIZED makes that image red or blue for team games and yellow for non team games.
It is NOT possible to use your own images.
Important:
First, use one itemDef to define the background.
Then, use another itemDef to display a value or an icon.

ownerdraw CG_PLAYER_AMMO_ICON2D
ownerdraw indicates the element to be displayed (ammo and health values, icons, bars, etc.).
(CG_PLAYER_AMMO_ICON displays a 3D icon)
Later, I'll post a list of the possible values for ownerdraw.

addColorRange 0 50 1 .7 0 .5
Optional.
Numbers can be displayed with a different color depending of the value.
1st number: lowest value of the range.
2nd number: highest value of the range.
3rd number: red (0-1)
4th number: green (0-1)
5th number: blue (0-1)
6th number: transparency (0-1)
(for example: you could use this to display your health
yellow for values 101-200
orange 51-100
red 0-50
or any color and value ranges you want)

I hope it helps. If anything is not clear, leave a post with your questions.

2009-05-01T12:50:00.003-07:00

Icons

code:

menuDef {
visible 1
rect 100 240 200 50

// weapon icon

itemDef {
rect 0 0 24 24
visible 1
ownerdraw CG_PLAYER_AMMO_ICON2D
}

// weapon icon 3D
itemDef {
rect 0 50 24 24
visible 1
ownerdraw CG_PLAYER_AMMO_ICON
}

// health icon shadow
itemDef {
backcolor 0 0 0 .8
rect 51 1 22 22
visible 1
style WINDOW_STYLE_FILLED
background "ui/assets/hud/health.tga"
}

// health icon
itemDef {
rect 50 0 22 22
// this command makes it red, blue or yellow depending
// on the game type
ownerdraw CG_TEAM_COLORIZED
visible 1
style WINDOW_STYLE_FILLED
background "ui/assets/hud/health.tga"
}

// armor icon shadow
itemDef {
backcolor 0 0 0 .8
rect 101 1 22 22
visible 1
style WINDOW_STYLE_FILLED
background "ui/assets/hud/armor.tga"
}

//armor icon
itemDef {
ownerdraw CG_TEAM_COLORIZED
rect 100 0 22 22
visible 1
style WINDOW_STYLE_FILLED
background "ui/assets/hud/armor.tga"
}

//armor icon 3D
itemDef {
rect 150 0 22 22
visible 1
ownerdraw CG_PLAYER_ARMOR_ICON
}

//simple yellow armor icon
itemDef {
rect 200 -15 22 22
visible 1
ownerdraw CG_PLAYER_ARMOR_ICON2D
}

// game type icon
itemDef {
rect 250 0 22 22
visible 1
ownerdraw CG_GAME_TYPE_ICON
}

// captured flag
itemDef {
rect 300 0 22 22
visible 1
ownerdraw CG_PLAYER_HASFLAG
}

// captured flag 2D
itemDef {
rect 350 0 22 22
visible 1
ownerdraw CG_PLAYER_HASFLAG2D
}
// player head
itemDef {
rect 400 0 22 22
visible 1
ownerdraw CG_PLAYER_HEAD
}

}

Powerups
quad-damage, regeneration, etc.

ownerdraw CG_AREA_POWERUP

Capture the Flag Powerups
scout, guard, etc.

ownerdraw CG_CTF_POWERUP

Useable Pickups
kamikaze, Invulnerability, etc.

ownerdraw CG_PLAYER_ITEM

2009-05-01T12:50:00.001-07:00

Backgrounds

If you want to add a background color to the display areas add the following lines to the menuDef or itemDef sections

style WINDOW_STYLE_FILLED
backcolor 0 .85 .62 .5

The values of backcolor (left to right) mean

RED 0-1
GREEN 0-1
BLUE 0-1

TRANSPARENCY 0-1 (0 means invisible, 1 is solid color)
use values like 0.5 - 0.6 - 0.7, to get transparent backgrounds

If you want a gradient effect substitute

style WINDOW_STYLE_FILLED

with

style WINDOW_STYLE_GRADIENT

if you want to use an image as a background:

style WINDOW_STYLE_FILLED
backcolor .7 .7 .7 .7
background "icons/icon_time.tga"

The image will be displayed using the color indicated by backcolor
(you can't change the color of some images)

style WINDOW_STYLE_SHADER
background "icons/icon_time.tga"

The image will be displayed using its original colors.

Team color background

style WINDOW_STYLE_TEAMCOLOR

red and blue for team games
green for non-team games

or

style WINDOW_STYLE_TEAMCOLOR
ownerdraw CG_TEAM_COLOR

trasparent red and blue for team games
no background for non-team games

Background image that changes color depending on health, armor or ammo value
This example is a quake logo

menuDef {
visible 1
rect 305 400 30 30

itemDef {
visible 1
rect 0 0 30 30
style WINDOW_STYLE_FILLED
ownerdraw CG_PLAYER_HEALTH //you can change this for armor or ammo
background "textures/sfx/Blocks17final_pent.jpg"
addColorRange 151 200 0 1 0 .5
addColorRange 100 150 1 1 0 .5
addColorRange 51 99 1 .5 0 1
addColorRange 0 50 1 0 0 .5
}

}

background examples:

menuDef {
visible 1
rect 100 200 100 100

itemDef {
visible 1
rect 0 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 1
}

itemDef {
visible 1
rect 100 0 50 50
style WINDOW_STYLE_GRADIENT
backcolor 1 .5 .2 1
}

itemDef {
visible 1
rect 200 0 50 50
style WINDOW_STYLE_TEAMCOLOR
}

itemDef {
visible 1
rect 300 0 50 50
style WINDOW_STYLE_FILLED
background "textures/sfx/Blocks17final_pent.jpg"
backcolor 0 1 0 .01
}

itemDef {
visible 1
rect 400 0 50 50
style WINDOW_STYLE_SHADER
background "textures/sfx/Blocks17final_pent.jpg"
}

}

menuDef {
visible 1
rect 100 200 100 100

itemDef {
visible 1
rect 100 0 50 50
style WINDOW_STYLE_FILLED
ownerdraw CG_TEAM_COLOR
}

itemDef {
visible 1
rect 200 0 50 50
style WINDOW_STYLE_FILLED
background "textures/sfx/Blocks17final_pent.jpg"
ownerdraw CG_TEAM_COLORIZED
}

itemDef {
visible 1
rect 300 0 50 50
style WINDOW_STYLE_SHADER
background "textures/sfx/Blocks17final_pent.jpg"
ownerdraw CG_TEAM_COLORIZED
}

}

2009-05-01T12:49:00.003-07:00

Text Style

To alter the text style
look for lines like this one:

textstyle 3

textstyle TEM_TEXTSTYLE_SHADOWED

1 = ITEM_TEXTSTYLE_BLINK
blinking text

3 = ITEM_TEXTSTYLE_SHADOWED
text with shadow

6 = ITEM_TEXTSTYLE_SHADOWEDMORE
double shadow

If the line is not there, you can add it.
(You cannot change the textstyle of some items)

Default style is text without shadow.

To write your own text use this command.

text "your_text_here"

2009-05-01T12:49:00.001-07:00

Color

Text elements and areas defined by rect can be any color you want

Text:

forecolor 1 1 1 1

Areas:

backcolor 0 0 0 1

The values (left to right) mean

RED 0-1
GREEN 0-1
BLUE 0-1

TRANSPARENCY 0-1 (0 means invisible, 1 is solid color)
use values like .5 - .6 -.7 to get transparent text.

alter the values
for example:

forecolor .85 .85 0 .5

you get yellow text and 50% transparency.

(0 0 0 is black, 1 1 1 is white)
Find the right color. Check this site http://linaker-wall.net/Colour/Dynamic_Fmt/Swatch_rgb_percent.htm
(remember: 1 = 100%, .47 = 47%)

addColorRange allows you to display numbers with different
colors depending of the value.

addColorRange 0 50 1 0 0 1

1st number: lowest value of the range.
2nd number: highest value of the range.
3rd number: red (0-1)
4th number: green (0-1)
5th number: blue (0-1)
6th number: transparency (0-1)

example: the following code displays the health value
white 101 or higher
yellow 71 - 100
orange 41 - 70
red 40 or lower

menuDef {
visible 1
rect 300 200 100 100

itemDef {
visible 1
rect 0 0 50 50
ownerdraw CG_PLAYER_HEALTH
// white
forecolor 1 1 1 1
// yellow 71 - 100
addColorRange 71 100 1 1 0 1
// orange 41 - 70
addColorRange 41 70 1 .5 0 1
// red 0 - 40
addColorRange 0 40 1 0 0 1
}

}

color examples:

menuDef {
visible 1
rect 150 200 100 100

itemDef {
visible 1
rect 0 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 1
}

itemDef {
visible 1
rect 100 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .8
}

itemDef {
visible 1
rect 200 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .5
}

itemDef {
visible 1
rect 300 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .3
}

}

menuDef {
visible 1
rect 100 200 100 100

itemDef {
visible 1
rect 0 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 0 1
}

itemDef {
visible 1
rect 100 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 .5 .2 1
}

itemDef {
visible 1
rect 200 0 50 50
style WINDOW_STYLE_FILLED
backcolor .5 .5 .5 1
}

itemDef {
visible 1
rect 300 0 50 50
style WINDOW_STYLE_FILLED
backcolor .2 .5 1 1
}

itemDef {
visible 1
rect 400 0 50 50
style WINDOW_STYLE_FILLED
backcolor .3 .7 .1 1
}

}

menuDef {
visible 1
rect 270 190 100 100

itemDef {
visible 1
rect 0 0 100 50
ownerdraw CG_PLAYER_HEALTH
forecolor 1 1 0 1
}

itemDef {
visible 1
rect 150 0 100 50
ownerdraw CG_PLAYER_ARMOR_VALUE
forecolor 0 1 0 .5
}

itemDef {
visible 1
rect 0 150 100 50
ownerdraw CG_PLAYER_AMMO_VALUE
forecolor 1 1 1 .2
}

}

2009-05-01T12:48:00.000-07:00

Size

A) To alter the size of text elements (health and armor numbers, etc.)

look for lines like this:

textscale .62

Alter the value to change the text size.

Changing .62 to 1.24 would double the size.
Changing .62 to .31 would reduce the size by 50%.

B) To change the size of icons

itemDef {
name "health"
rect 68 1 22 22

change the values that indicate the size of the container.
The first value is x.
The second value is y.

If you wanted your health icon to be twice as big, you would change "22 22" to "44 44"

Modify the values until you are satisfied.

examples:

menuDef {
visible 1
rect 270 190 100 100

itemDef {
visible 1
rect 0 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .3
}

itemDef {
visible 1
rect 0 0 100 100
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .3
}

itemDef {
visible 1
rect 0 0 150 150
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .3
}

}

menuDef {
visible 1
rect 270 190 100 100

itemDef {
visible 1
rect 0 0 100 50
textscale .15
ownerdraw CG_PLAYER_HEALTH
}

itemDef {
visible 1
rect 0 50 100 50
textscale .55
ownerdraw CG_PLAYER_HEALTH
}

itemDef {
visible 1
rect 0 100 100 50
textscale .95
ownerdraw CG_PLAYER_HEALTH
}

itemDef {
visible 1
rect 0 200 100 50
textscale 1.22
ownerdraw CG_PLAYER_HEALTH
}

}

menuDef {
visible 1
rect 150 200 100 100

itemDef {
visible 1
rect 0 0 20 20
ownerdraw CG_PLAYER_AMMO_ICON2D
}

itemDef {
visible 1
rect 100 0 40 40
ownerdraw CG_PLAYER_AMMO_ICON2D
}

itemDef {
visible 1
rect 200 0 70 70
ownerdraw CG_PLAYER_AMMO_ICON2D
}

itemDef {
visible 1
rect 300 0 100 100
ownerdraw CG_PLAYER_AMMO_ICON2D
}

}

2009-05-01T12:47:00.002-07:00

Position

For the purpose of setting the position of elements on the screen these are the dimensions of your screen.
(640 horizontal, left to right
480 vertical, top to bottom)
This is independent from the resolution you use.

A) In the .menu file you can find lines like the following:

menuDef {
name "playerRect"
rect 10 30 40 28

In this case (menuDef),
the highlighted line indicates the position of the rectangular area (rect) where the info is displayed.

1st number: position x (left to right, 0-640)
2nd number: position y (top to bottom, 0-480)
3rd number: size x (horizontal)
4th number: size y (vertical)

B) you can also find lines like the following:

itemDef {
name "playerRect"
rect 10 -3 40 28

In this case (itemDef),
rect defines the position relative to the upper-left corner of the area defined in the menuDef section.

It defines the size of icons and background images.

Text is not affected by the size of the area.
Text is displayed left-aligned on top of the defined area.

1st number: position x (left to right)
2nd number: position y (top to bottom)
3rd number: size x (horizontal)
4th number: size y (vertical)

To move things around simply adjust the numbers until you are satisfied.

examples:

code:

menuDef {
visible 1
rect 0 0 100 100
style WINDOW_STYLE_FILLED
backcolor 0 1 0 .4
}

menuDef {
visible 1
rect 270 190 100 100
style WINDOW_STYLE_FILLED
backcolor 0 1 0 .4
}

menuDef {
visible 1
rect 535 375 100 100
style WINDOW_STYLE_FILLED
backcolor 0 1 0 .6
}

code:

menuDef {
visible 1
rect 270 190 100 100
style WINDOW_STYLE_FILLED
backcolor 0 1 0 .4

itemDef {
visible 1
rect 0 0 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .5
}

itemDef {
visible 1
rect -100 -100 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .5
}

itemDef {
visible 1
rect 100 100 50 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .5
}

}

code:

menuDef {
visible 1
rect 270 190 100 100

itemDef {
visible 1
rect 0 0 100 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .4
ownerdraw CG_PLAYER_HEALTH
}

itemDef {
visible 1
rect 150 0 100 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .4
ownerdraw CG_PLAYER_ARMOR_VALUE
}

itemDef {
visible 1
rect 0 150 100 50
style WINDOW_STYLE_FILLED
backcolor 1 1 1 .4
ownerdraw CG_PLAYER_AMMO_VALUE
}

}

2009-05-01T12:47:00.001-07:00

Eliminate Elements

To eliminate elements simply erase the information from the .menu file.
I recommend changing the lines to comments so that you can have them back later.

You can do that by using typing "/*" and "*/"

/*
anything between these is a comment
this means that these lines will be ignored by the program
*/

If you want to eliminate single lines just type "//" at the beginning of the comment.

// this is a comment line

This way you can get rid of any element of your HUD.
You could have no HUD at all if you wanted.
(It is possible to have an empty .menu file)

Let's imagine that you don't want to see the health bar.
You have to locate and turn the following lines into a comment.

//*****PLAYER HEALTH*****//
/*
menuDef {
name "HealthFrame"
fullScreen MENU_FALSE
visible MENU_TRUE
rect 130 435 142 32//130 421 142 32//

itemDef {
name "healthshadow"
rect 1 8 142 33
visible 1
decoration
backcolor 0 0 0 0.4
style 1
background "ui/assets/hud/shadowl.tga"
}

//BARS SCALE TO HEALTH
itemDef {
name "healthFill200"
rect 85 0 64 32
visible 1
decoration
// backcolor 0.0 0.0 0.0 0.4
ownerdraw CG_PLAYER_HEALTH_BAR_200
style 1
background "ui/assets/hud/h200.tga"
}

itemDef {
name "healthFill100"
rect 0 27 128 16
visible 1
decoration
//backcolor 0.0 0.0 0.0 0.4
ownerdraw CG_PLAYER_HEALTH_BAR_100
style 1
background "ui/assets/hud/h100.tga"
}

//LINE OVERLAYS
itemDef {
name "healthLine200"
rect 85 0 64 32
visible 1
decoration
backcolor 0.0 0.0 0.0 1.0
ownerdraw CG_TEAM_COLORIZED
style 1
background "ui/assets/hud/h200line.tga"
}

itemDef {
name "healthLine100"
rect 0 27 128 16
visible 1
decoration
backcolor 0.0 0.0 0.0 1.0
ownerdraw CG_TEAM_COLORIZED
style 1
background "ui/assets/hud/h100line.tga"
}
//highlight
itemDef {
name "healthLine200hi"
rect 85 0 64 32
visible 1
decoration
backcolor 1 1 1 0.5
style 1
background "ui/assets/hud/h200line.tga"
}

itemDef {
name "healthLine100hi"
rect 0 27 128 16
visible 1
decoration
backcolor 1 1 1 0.5
style 1
background "ui/assets/hud/h100line.tga"
}
}

*/

2009-05-01T11:15:00.000-07:00

Install the HUD
(want to uninstall? instructions right after the install section)

1) Go to

Vista
%userprofile%\AppData\LocalLow\id Software\quakelive\home\baseq3\ui

XP
%appdata%\id Software\quakelive\home\baseq3\ui

(these folders are hidden)
The folder ui is not there you have to create it.

2) Copy hud.cfg and hud.menu there

(keep a backup copy, just in case you ruin the files when modifying them)

3)Rename your files anything you want (both files must have the same name)

4)Modify the file .cfg file.

Modify the highlighted line

loadMenu { "ui/intro.menu" }
loadMenu { "ui/your_new_name.menu" }
loadMenu { "ui/ingamescoreteam.menu" }

5) Open the .menu file in a text editor

Modify the higlighted numbers

//*****AMMO*****//

menuDef {
name "Ammo"
fullScreen MENU_FALSE
visible MENU_TRUE
rect 300 242 99 36 //266 428 99 36 // - bump up value for bottom weapon bar

6) Start a practice game.

Open the console (Ctrl + Alt + ~)
(easier way to open the console: see bottom of this post)

type

cg_hudfiles ui/your_file_name.cfg

type

vid_restart

If it worked you should see the ammo info in the center of your screen

To make the change permanent you have to add this line to your autoexec.cfg file

seta cg_hudFiles "ui/name_of_your_hud.cfg"

or open the console again and type

writeconfig autoexec

if you don't know about the autoexec.cfg file go here

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Uninstall your custom HUD

The easy way to back to normal:
in your config file (autoexec.cfg), change the line

seta cg_hudfiles "ui/your_custom_hud.txt"

seta cg_hudfiles "ui/hud.txt"

The other way
1. In your config file (autoexec.cfg) erase the line

seta cg_hudfiles "ui/your_custom_hud.cfg"

2. Go to the folder quakelive/home/baseq3
there, you will find the file qzconfig.cfg

3. In qzconfig.cfg erase the line

seta cg_hudFiles "ui/your_custom_hud.cfg"

4. Open a match. Back to the default hud.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opening the console with one key

To open the console, just press this key.

2009-05-01T10:58:00.000-07:00

Default HUD Files

A basic HUD consists of two files anyname.cfg and anyname.menu
(both files must have the same name)

Use a text editor to edit them.

Here you have the default files.
The hud file is formatted, cleaned up and labeled.
It should be easier to work with
Default_HUD-Edited_Version.zip

if the link doesn't work try http://qlhud.core.ws/id/RQcpcP

Here you have the "raw" original version.
hud files.zip

2009-05-01T10:37:00.000-07:00

Intro

(click on the image to see a large version)

What is the HUD? (Heads-up Display)

The information on your screen: health, armor, ammo, weapon, timer, etc.

You can change the size, position or color of these items.

I can tell you how to do some changes to the info you see on your screen:

position
size
color
background

Do you want to see a different HUD without installing anything?
(no permanent changes, you won't ruin any files or configuration)

1. Open a match.
2. Press "Esc"
3. Go to Game Settings / Intermediate
4. Choose Hud Style: small

Your hud changed!
You can go back and choose HUD style: normal if you want.

Multiple huds

It is easy to have multiple huds.
All you need is some binds:

bind 1 "seta cg_hudfiles ui/hud_01.cfg; loadhud"
bind 2 "seta cg_hudfiles ui/hud_02.cfg; loadhud"
bind 3 "seta cg_hudfiles ui/hud_03.cfg; loadhud"
bind 4 "seta cg_hudfiles ui/hud_04.cfg; loadhud"
bind 5 "seta cg_hudfiles ui/hud_05.cfg; loadhud"

Hud changes instantly.
No need to vid_restart.
(next time you play, you will start with the last hud you used)

If you have any comments or questions
theenglishclass@hotmail.com

See what others have done:

http://www.quakelive.com/forum/showthread.php?t=11523

http://qlhud.core.ws/

Share your creations and your knowledge.
Add comments and explanations to your HUD files.

[BORGONDIO]