Creating a custom TF2 HUD
Who even plays TF2 in 2025?
I do.
Where do I start?
Firstly, you need to extract the HUD resource files, so that you can edit them to get your custom look.
To do this, there are a few resources to look into:
- The Valve Developer Community has a guide on extracting .vpk files.
- I couldn’t get this to work properly, it was extracting the file structure but not the actual files.
- A community made tool, that I found to work perfectly is VPKEdit.
Once you have the tools prepared, you need to navigate to your TF2 program files.
- On Windows, by default, they are located at
C:\Program Files (x86)\Steam\steamapps\common\Team Fortress 2 - On Linux, by default, they are located at
~/.local/share/Steam/steamapps/common/Team Fortress 2
If are you unsure of where to find them, go to Steam, right click on Team Fortress 2, and go to Manage > Browse Local Files.
Once you are here, navigate to Team Fortress 2/tf/tf2_misc_dir.vpk and extract this file using the previously mentioned tools.
- For basic HUD customization you only need the
scriptsandresourcesfolders out of this, but feel free to extract the entire thing if you’d like.
Move a folder containing these extracted files to Team Fortress 2/tf/custom/<name of your HUD>.
Before editing, create a file named info.vdf in the root of your theme folder containing:
|
|
What now?
Basic Customization
There are a few fields to remember here:
"xpos","ypos"- This is the position of the field on the screen in normal HUD mode.
- This can be done absolutely, or relatively.
- To do absolute simply provide a number in quotes, i.e. “100”.
- To do relative, do “c” and a number to make this relative to the center of the screen, i.e. “c120”
- Positive will make the “y” go below the center, and “x” to the left.
- Negative will make the “y” go above hte center, and “x” to the right.
"xpos_minmode","ypos_minmode"- This is the position of the field on the screen in min HUD mode.
- Same absolute and relative positioning as above.
"font","font_minmode"- The font to display the text of this field in.
"enabled"- Whether to display this field or not, “1” for show, “0” for hide.
"visible"- Same as above.
"wide","wide_minmode"- Width of the field.
"tall","tall_minmode"- Height of the field.
"MeterFG","MeterBG"- Lets you change the foreground and background colours, respectively, of meters.
To move your weapon ammo around, in your custom HUD’s folder, go to scripts/ and open hudlayout.res in your favourite editor.
In scripts/hudlayout.res, under "HudWeaponAmmo", you can move your weapon’s ammo around.
In resources/ui/hudplayerhealth.res, under "HudPlayerHealth", you can move around the player’s health bar.
"HealthBonusPosAdj"lets you determine how big the field grows on health boost."HealthDeathWarning"lets you adjust the threshold of when your health is low."HealthDeathWarningColor"is an RGBA value setting the colour of your health bar when it meets the above threshold.
In resources/ui/huditemeffectmeter.res, under "HudItemEffectMeter", you can move around the item recharge bar (Heavy’s sandvich, etc) using the same position values as before.
In resources/ui/huditemeffectmeter_demoman.res, under "HudItemEffectMeter", you can move around secondary counters (Spy crits, Demoman heads, etc).
In resources/ui/huditemeffectmeter_killstreak.res, under "HudItemEffectMeter", you can move around the killstreak counter (provided by Killstreak weapons).
In resources/ui/hudmediccharge.res, under "ChargeLabel", you can move around the Medic’s uber charge bar and percentage text.
Advanced Customization
These are just simple changes, and all I’ve done personally. I will expand this guide as I explore and edit more of the HUD. Don’t forget to explore yourself to edit and change the HUD to be your ideal layout.
How do I see these changes?
Either restart your game, or run hud_reloadscheme in the developer console.