Changing the HUD Colour, Layout, Fonts & Effects tutorial - Half-Life 2

[page=Introduction]
This is a pretty basic tutorial intended to show how to edit the colour and layout of the HL2 HUD for their own mod, how to change the appearance of the fonts and also how to change the fonts themselves to make a more unique feel to your mod - rather than the normal HL2 yellows and fonts.

This is my first tutorial so please let me know if i've missed anything that should have been covered on the tutorial, thank you.

I'd just like to point out before we begin that you should not take fonts that aren't made by yourself to be used in your mod without the consent of the person who made it - they have the ownership and possibly copyright of them so please take this into consideration. If you have found a font that you would like to use - contact the person who made it and ask them if you can include it in your mod first. It will keep you from getting into trouble and keep the typographer happy too.

[page=Getting Started]
First of all go to your mod's resource directory:

...\Valve\Steam\SteamApps\SourceMods\YOURMOD\resource

where: 'YOURMOD' is the name of your modification.

Now, open up the file: ClientScheme.RES
- notepad is fine to open it up with.

Now that you've got it open, browse a short way down the page til you see this:

///////////////////// BASE SETTINGS ////////////////////////
//
// default settings for all panels
// controls use these to determine their settings

Underneath this is where we will be editing.

[page=Editing the HUD Colours]
Here we will begin to edit the colours of the Heads Up Display:

BaseSettings
{
"FgColor" "255 220 0 100"
"BgColor" "0 0 0 76"

"Panel.FgColor" "255 220 0 100"
"Panel.BgColor" "0 0 0 76"

"BrightFg" "255 220 0 255"

Now, these are simply the the foreground and background colours of the HUD and its panels (the panels are what the health / ammo are shown on - like little rounded box shapes).

I will now explain what all the numbers mean:

"FgColor" "255 220 0 100"

The first 3 numbers are for the colours: Red (225), Green (220), Blue (0).
The last number "100" is the alpha. - a kind of transparency setting.

So to make the the HUD have a white colour appearace you could try editing it to something like this:

"FgColor" "255 225 225 100"
"BgColor" "0 0 0 76"

"Panel.FgColor" "255 225 225 100"
"Panel.BgColor" "0 0 0 76"

"BrightFg" "255 225 255 255"

Damage Colour
Now when you take damage in the game - the health turns red to show you've taken damage. You can also edit the following exactly the same way as before to change the colour when you take damage:

"DamagedBg" "180 0 0 200"
"DamagedFg" "180 0 0 230"
"BrightDamagedFg" "255 0 0 255"

Weapon Selection Colours
Here you can change the colour of the weapon selection text, weapons in the HUD drop down menu, and also the background of the weapons in the following code:

// weapon selection colors
"SelectionNumberFg" "255 220 0 255"
"SelectionTextFg" "255 220 0 255"
"SelectionEmptyBoxBg" "0 0 0 80"
"SelectionBoxBg" "0 0 0 80"
"SelectionSelectedBoxBg" "0 0 0 80"

Zoom Colour
Here we can change the colour of the zoom reticle (when you press 'z' it zooms in with a reticle):

"ZoomReticleColor" "255 220 0 255"

Half-Life 1 Style HUD Colouring
OK this part is how to change the colouring from when you take on damage. In HL1 the health would be the normal colour when not injured, but would turn yellowish when you'd taken quite a bit of damage, then eventually turning red as a caution when you had about 25% of health left. The same works in HL2 and you can change the colour of these here - same way as throughout this tutorial:

// HL1-style HUD colors
"Yellowish" "255 160 0 255"

This is the 'yellowish' colour when you've taken some damage but not enough to turn red (caution).

"Normal" "255 208 64 255"

As you can probably see already - this is the colour of your health at its normal state i.e. no damage has been taken.

"Caution" "255 48 0 255"

This is the 'caution' colouring when your health is extremely low - its default is red.

That's all i will be covering for now with the colouring of the HUD - hopefully this should at least get you started with editing your HUD. Next we will be changing the colour of the main menu title(s)...

[page=Colouring the Main Menu Title(s)]
Now that we have changed the colour of the HUD and still have the ClientScheme.RES file open. We can now change the colour of the main menu title(s). The code is found directly underneath the 'HL1-style HUD Colors' section:

// Top-left corner of the "Half-Life 2" on the main screen
"Main.Title1.X" "76"
"Main.Title1.Y" "184"
"Main.Title1.Color" "255 255 255 255"

Here if you wish you can also change the 'X' and 'Y' levels of the title, but im not going to be going into detail on that - you can try these out yourself. But if you want to change the colour of your mod's title on the main menu screen; you need to be changing the "Main.Title1.Color".

Moving on, next we can change the colour of the secondary title of your mod (if it has one) - half-life 2 deathmatch has one, they use 'Half-Life 2' as the first (primary) title and put 'deathmatch' under the secondary title:

// Top-left corner of the "DEATHMATCH" on the main screen
"Main.Title2.X" "315"
"Main.Title2.Y" "222"
"Main.Title2.Color" "255 255 255 180"

Once again its exactly the same as above - just change the "Main.Title2.Color".

[page=Changing the HUD Fonts & Appearance]
Here we will be changing some of the HUD's fonts, and also changing the appearance of the animations that can be made within the HUD fonts. NOTE: make sure that you are using True Type Font's (.ttf) when changing the fonts. Once again scroll down from where we left off in the ClientScheme.RES file and you want to find this piece of code in the 'FONTS' section:

HUD Numbers

HudNumbers
{
"1"
{
"name" "HalfLife2"
"tall" "32"
"weight" "0"
"antialias" "1"
"additive" "1"
"custom" "1"
}
}

Now to change the font simply type your font name replacing the "HalfLife2" font. This changes the font for the numbers in the HUD - health, ammo, etc.

HUD Numbers Glow
The next part underneath the 'HudNumbers' is 'HudNumbersGlow' - this is where we can change the animation effects in the numbers and also change the font used for this to the same one as you used above. Doing this simply keeps the scheme, flow and feel of your HUD the same rather than everytime you change weapon, or shoot the weapon and the numbers change it won't change into a different font than the normal 'HudNumbers'.

HudNumbersGlow
{
"1"
{
"name" "HalfLife2"
"tall" "32"
"weight" "0"
"blur" "4"
"scanlines" "2"
"antialias" "1"
"additive" "1"
"custom" "1"
}

Now change the 'HalfLife2" font once again to the same font you used before. Now we will change the effects of the font when in animation in the 'HudNumbersGlow':

Changing Font Animation Effects

"blur" "4"

Blur is what happens when you change weapons or shoot a weapon - it blurs out. Now this is not the amount of blur, but the amount of times to blur the font - you can play around with it as you wish until you find whats best for your HUD.

"scanlines" "2"

Scanlines are also in the animation sequences - it is a set of lines that run through the font when animated (change weapons, shoot). These are the thickness of the scanlines. So you can change the number higher for more thickness or lower for less... you can even delete the 'blur' and 'scanlines' if you wish not to include them into your HUD.

Changing More Numbers

HudNumbersSmall
{
"1"
{
"name" "HalfLife2"
"tall" "16"
"weight" "1000"
"additive" "1"
"antialias" "1"
"custom" "1"
}
}

Here we can change the font of the small numbers that are displayed in the HUD - you can mess around changing the fonts, but you can also keep it the same font you changed it to as before if you wish to keep a certain scheme running throughout your HUD. Change the font in the exact same way as before.

HudSelectionNumbers
{
"1"
{
"name" "Verdana"
"tall" "11"
"weight" "700"
"antialias" "1"
"additive" "1"
}
}

Here we can change the HUD selection numbers for the weapons etc. You can change the font in the same way as before by just changing the name "Verdana" to the name of the font you wish to use.

Now there is more fonts that you can edit for the HUD underneath here that i won't go into - BUT i suggest that you try them out and find out for yourself what each of them does - you can easily change them back if you are not happy with the results when you run it in game.

[page=Linking Fonts]
OK so we've changed the fonts and their appearance. But if you have used a custom font it won't show up in game. Now we will need to link the fonts:

Start off by opening your fonts directory on your computer - finding all the fonts you've used in your HUD and copying them to your resource file in your mod's directory:

...\Valve\Steam\SteamApps\SourceMods\YOURMOD\resource

Once again, replacing 'YOURMOD' with the name of your modification.

Now that we have the fonts installed in your resource directory we need to link them. So open your ClientScheme.RES file again. We need to browse down to the very bottom of the file where you can see something similar to this:

//////////////////////// CUSTOM FONT FILES /////////////////////////////
//
// specifies all the custom (non-system) font files that need to be loaded to service the above described fonts
CustomFontFiles
{
"1" "resource/HALFLIFE2.ttf"
"2" "resource/HL2crosshairs.ttf"
}

Now all you need to do is to add the links of your font files that you have used. Make sure you open the .ttf files to check the actual Typeface name because when changing the fonts in the last section you just had to use the name used on the font's file name. But sometimes they are not the same. So double check always.

Simply add a new line for each font like so:

{
"1" "resource/HALFLIFE2.ttf"
"2" "resource/HL2crosshairs.ttf"
"3" "resource/YourFont.ttf"
"4" "resource/YourFont2.ttf"
}

You may only be using 1 font of your own but you can list as many fonts as your using here. Make sure to keep them all in line and number them down ascending on the left.

[page=The Rest of The HUD pt.1]
OK i got asked about the rest of the HUD - e.g. changing the colour of the flashlight text, power aux bars, left and right damage indicators and the overall layout, i will now explain how to go by changing all of this.

Getting Started
Grab a copy of this file HERE
- copy all the text and paste them into a new text file with notepad.

Now save it with the file name= HudLayout.res in your mod's scripts directory:
......\Valve\Steam\SteamApps\SourceMods\YOURMOD\scripts
Where 'YOURMOD' is the name of your modification.

Now that we have the file and code we need to be editing, open up HudLayout.res in notepad.

Moving Elements
OK in this file we can move all the elements that make up the HUD - the health panel, the ammo panel, virtually anything. We can do this by changing the X and Y positions of each element to change its position on the screen:

HUD Health

HudHealth
{
"fieldName" "HudHealth"
"xpos" "16"
"ypos" "432"
"wide" "102"
"tall" "36"
"visible" "1"
"enabled" "1"

This is the first thing you will see at the very top of the file. Do not change the "fieldName" leave it as it is. The only things you may want to change are as follows:

"xpos" - change the number from "16" to something higher to bring it further into the center of the screen or move it to the right of the screen. 'X' is the horizontal position, if set to "0" then it will be touching the very left of the screen.

"ypos" - change the number from "432" to something lower to raise it higher on the screen. 'Y' is the vertical position, if set to "0" it will be at the very top of the screen. So if you have the 'X' and 'Y' positions both set to "0" then you will find the health panel at the very top left of the HUD.

"wide" - change the number higher or lower to change the width of the panel higher or lower.

"tall" - change the number higher or lower to changet the height of the panel higher or lower.

"visible" - if set to "1" then your health will be visible to see, if set to "0" it will be invisible.

"enabled" - if set to "1" then your health panel is enabled, if set to "0" it will disable the panel. - use this if you do not want to include a health panel in your modification.

Now using the same method as above you can edit all the positions and sizes of the elements in the HUD. Just make sure you leave the "fieldName" exactly as it is.

[page=The Rest of The HUD pt.2]
In this part i will be showing you how to change the colour of the flashlight text and the suit's aux power bars. Also, how to change the colours of the damage indicators. From this file you can also change a lot more - its all basically self explanitory but i shall explain how to get you started. So lets begin:

HUD Flashlight
To change the colour of the text for the flashlight when it is in use then scroll down to where you see this piece of code:

HudFlashlight
{
"fieldName" "HudFlashlight"
"visible" "1"
"enabled" "1"
"xpos" "16"
"ypos" "370"
"wide" "102"
"tall" "20"

"text_xpos" "8"
"text_ypos" "6"
"TextColor" "255 170 0 220"

"PaintBackgroundType" "2"
}

You can change the position of the text using "text_xpos" and "text_ypos" in exactly the same way as you change the "xpos" and "ypos" as we did before if you wish to do so. Now, to change the text colour you need to edit this:

"TextColor" "255 170 0 220"

Changing the colours exactly as we did before using RED, BLUE, GREEN, ALPHA.

Damage Indicator
Now, when playing in game and your getting shot at. If you are hit, then red indicators display on the HUD showing you the direction your taking the hit from. We will now be changing the colour of these. Directly underneath the flashlight code is the code we want:

HudDamageIndicator
{
"fieldName" "HudDamageIndicator"
"visible" "1"
"enabled" "1"
"DmgColorLeft" "255 0 0 0"
"DmgColorRight" "255 0 0 0"

"dmg_xpos" "30"
"dmg_ypos" "100"
"dmg_wide" "36"
"dmg_tall1" "240"
"dmg_tall2" "200"
}

Once again you can change the 'X' and 'Y' positions of the indicators using "dmg_xpos" and "dmg_ypos" also changing the width and height underneath the position code = "dmg_wide" "dmg_tall1" "dmg_tall2" etc. To change the colour of the left indicator change this part of the code:

"DmgColorLeft" "255 0 0 0"

To change the colour of the right indicator change this part of the code:

"DmgColorRight" "255 0 0 0"

I hope i've explained everything to you ok, but its pretty easy to understand what all the tags mean.

Suit Aux / Power
Now we will look at how to change the colour of the suit power system - this is when you use the suits sprint / flashlight - the power drains in the form of bars. This is what we will be changing. Now scroll back up to the HudSuitPower that is just above where we edited the FlashLight:

HudSuitPower
{
"fieldName" "HudSuitPower"
"visible" "1"
"enabled" "1"
"xpos" "16"
"ypos" "396"
"wide" "102"
"tall" "26"

"AuxPowerLowColor" "255 0 0 220"
"AuxPowerHighColor" "255 220 0 220"
"AuxPowerDisabledAlpha" "70"

"BarInsetX" "8"
"BarInsetY" "15"
"BarWidth" "92"
"BarHeight" "4"
"BarChunkWidth" "6"
"BarChunkGap" "3"

"text_xpos" "8"
"text_ypos" "4"
"text2_xpos" "8"
"text2_ypos" "22"
"text2_gap" "10"

"PaintBackgroundType" "2"
}

Here you can also change the width and height of the element using the same methods as before. Also you can change the power bars' width(s), height(s) and positions - experiment with these as you wish. You can also change the text's position along with the power bars using the same method as we have used before. Now onto changing the colours:

"AuxPowerLowColor" "255 0 0 220"

This colour is when the suit's Aux Power is at its lowest - turning red. Change to a colour that suits your HUD or keep it the same its up to you.

"AuxPowerHighColor" "255 220 0 220"

Now this is what most people will want to change. This is the colour of the Aux Power when the power is high - the HL2 Yellowish colour is the default so change to the colour you wish.

Note: You can change a lot more of the HUD appearance in this file including the zoom mode - you can change the appearance of the zoom reticle and a lot more. While i only show you the ropes of how to edit part of this file, go ahead and experiment with the other parts of the code!

[page=Conclusion]
Well that's it! - We've managed to edit the HUD Colours, Layout, Fonts and Effects. Also the Main Menu Title Colours. You can take things further from this tutorial by trying out other parts of the code yourself inside the ClientScheme.res file and also the HudLayout.res file.

I've also added more onto this tutorial from the demand of the community, as i have only shown you the ropes to get you started with editing the HUD's appearance - explore and experiment with other parts of the code yourself and find out just how much can be accomplished. I hope you have fun with it all!

My next tutorial will explain how to change the the colour of the steam menu's in the main menu of your mod. I hope i managed to explain things clearly for you as it's my first tutorial.

If you have any questions or problems please PM me and i'll be glad to help.