TF2 HUD Editing Guide

The Basics

This section of the guide details what resource files are, their structure and how to edit them.

How to Edit

This section might seem short. It outlines concepts which are detailed elsewhere in this guide. Its a basic outline to give you an idea of what to do.

1. Setup up the Resource Files in your TF2 Installation - this step here
2. Decide what on the HUD you want to edit, and open the corresponding HUD file - resource list
3. Edit the Resource File
• Add Controls
• Remove Controls
• Change Properties
4. Save the Resource File
5. Relaunch TF2 or use the hud_reloadscheme console command

This is the basic process involved in editing the HUD. You will need to edit files and check their results over and over until its to your liking.

Resource Files (.res)

Resource files are the files the define the HUD's appearance. These are what we want to edit. They are plain text files with the .res extension. They use a simple scripting language in which controls with properties are defined in a braced structure.

Controls

Control is a computer programming term meaning an element of a graphical user interface (more info on that here). Basically controls are things on the HUD. Such as your health and ammo numbers. The basic control types are:

• Label (Label, CExLabel): A piece of text.
• Button (Button, ImageButton, CExButton, CExImageButton): Objects that execute functions when clicked.
• Panel (ImagePanel, EditablePanel): Pictures and blocks of color.

Each control is encased by braces, containing a list of properties (with their values) and sometimes sub-controls. Here is an example of one:

"DoodleHUDLabel"
{
    "ControlName"	"CExLabel"
    "fieldName"		"DoodleHUDLabel"
    "font"		"DefaultLarge"
    "labelText"		"DoodleHUD"
    "textAlignment"	"center"
    "xpos"		"c-128"
    "ypos"		"c-40"
    "zpos"		"-2"
    "wide"		"256"
    "tall"		"64"
    "visible"		"1"
    "enabled"		"1"
    "fgcolor_override"	"0 153 0 255"
}

The Control's name, opening brace, list of properties and then the closing brace.

The Box Model

For the HUD, the TF2 screen size is divided up into units. It is always 480 units tall and the width varies based on the resolution TF2 is running at.

• 16:9 ratio resolutions (such as 1920x1080) are 853 units wide
• 4:3 ratio resolutions (such as 1440x1080) are 640 units wide
• 5:4 ratio resolutions (such as 1024x819) are 600 units wide

Every Control on the HUD has an X and Y coordinate that positions it on this grid. Some controls are inside another control, and are limited to the area of that control.

Each Control has a width and height (wide and tall properties) that define their display area. Any sub-controls must stay within this area.

In this example: Blue is the full screen size, yellow is a control, and green is a sub-control to yellow.

xpos, ypos, wide and tall are all properties of controls, and they are what makes up the box model. All their values are in the HUD units. A control that has a value of 48 on its tall property will always be 1 tenth (48 / 480) of the screens height, no matter TF2s resolution.

xpos and ypos

xpos and ypos are properties. Their value is the distance from the top left corner of their parent. They can also be positioned relative to different points using modifiers in the value.

• Values preceded with an r are positioned from the right (xpos) and bottom (ypos) of the screen.
• Values preceded with a c are positioned from the center of the screen.

In this example demonstrates different modifiers to xpos values. Blue is the screen. Yellow is the controls.

Note: Positive and negative values with the r modifier are reversed compared to no modifier and the c modifier.

wide and tall

wide and tall are properties. They are the width and height of the control. All controls have wide and tall properties.

f0 is a special value for both wide and tall, which will make the control the full width and height of the screen. However this is only useful for width, since screens height is always 480.

Properties

A property is a piece of data that defines a specific aspect of a control. There are a few properties that apply to all controls, and there are properties that only apply to certain controls types. The property is defined on the left and the value of the property on the right. Like this:

"xpos"		"c-128"
"ypos"		"c-40"
"wide"		"256"
"tall"		"64"

Below is a list of the main properties: