TF2 HUD Editing Guide

Sections on this Page:
1. hudlayout.res
2. clientscheme.res
3. hudanimations_tf.txt
4. sourcescheme.res

Core Files

Most resource files define 1 or 2 things on the HUD. There are a few files that contribute over all things. It's important to go over these files. There are two in the resource folder, clientscheme.res and sourcescheme.res. And there are two in the scripts folder, hudanimations_tf.txt and hudlayout.res. These are the core files.

top

hudlayout.res

This file defines the layout of the in-game HUD. Most things on the in-game HUD can be found in this file. Mostly only their layout properties (size, position) are defined.

There is a lot to go over for this file, so all that has been put here.

top

clientscheme.res

clientscheme.res contains things that a used throughout the HUD; colors, borders and fonts. These things are named and defined in the client scheme and referenced in other resource files.

clientscheme.res contains five sections: Colors, Base, Fonts, Borders and Custom Fonts.

Colors

This is a list of defined colors. The color name on the left and the color code on the right. Colors defined here can be used in any other resource files, you enter the name of the color into the FgColor or BgColor property of any control.

"CustomColorOne"   	"255 128 0 255"
"CustomColorTwo"      	"128 128 128 255"
"CustomColorThree"     	"74 99 117 255"
"CustomColorFour"   	"100 120 179 255"
"CustomColorFive"   	"66 56 78 255"
"CustomColorSix"   	"0 255 227 255"
 
"DoodleHUDLabel"
{
    "ControlName"	"CExLabel"
    "fieldName"		"DoodleHUDLabel"
    "fgcolor_override"	"CustomColorThree"
}

The code on the left would be in the Colors section of clientscheme.res and the code on the right could be in any resource file.

The color code used is RGBA format. It is four 8-bit (8-bit means the value can be from 0 to 255) numbers separated by a space. The first number is the amount of red, second is green, third is blue and the forth number is the alpha transparency (255 is visible, 0 is transparent).

Base

A list of default property values for UI controls types. Mostly default colors for things. This section can be ignored as it doesn't apply to most of the HUD.

Fonts

This is a list of font instances usable by any font property. The structure is slightly more complicated than a control. You have the font instances name, then enclosed in braces a list of numbered braces, and inside each of those braces a font instance is defined, with all of its properties. Here is an example:

"Default"
{
    "1"
    {
        "name"		"Verdana"
        "tall"		"12"
        "weight"	"900"
        "range"		"0x0000 0x017F" 
        "yres"	"480 599"
    }
    "2"
    {
        "name"		"Verdana"
        "tall"		"13"	[$WIN32]
        "tall"		"20"	[$X360]
        "weight"	"900"
        "range"		"0x0000 0x017F"
        "yres"	"600 767"
    }
    "3"
    {
        "name"		"Verdana"
        "tall"		"14"
        "weight"	"900"
        "range"		"0x0000 0x017F" 
        "yres"	"768 1023"
        "antialias"	"1"
    }
}

The font instance is named Default and has three numbered braces in it. The reason there is three and not just one is because 2 and 3 are fall-through settings for Default. TF2 attempts to load the settings from 1, if they fail to display properly (low screen resolution or other problems) then 2 will be tried. If 2 fails then 3. If a font has only 1 then is will display that regardless.

Font properties define how the font is displayed, here is how they work:

  • name: the name of the font used in the font instance. This must be the name of a font installed on your operating system (Windows, Linux or Mac) or a custom font listed under custom fonts.
  • tall: how tall the text is. This is basically the font size.
  • weight: the thickness of the font. This can be one of; 0, 100, 200, 300, 400, 500, 600, 700, 800 or 900. Some fonts are limited in how thin or thick they can be.
  • range: this is a hexadecimal range for defined for the range of characters we want to use. If you don't know much about font files, don't worry about this, just leave it for existing fonts and don't bother adding it for custom fonts.
  • yres: I don't know what this does. Ive never put it on any custom font instances and they look fine.
  • antialias: Setting this property to 1 will make the make sure the text has smooth edges. See font rasterization.
  • outline: setting this to 1 will give the text a black outline. The outline looks a bit ugly in certain font sizes.

Borders

This is a list of all the borders usable by any property that requires a border as a value. There are two types of borders: image and line. For image borders an image is defined which is sliced and tiled. For line borders you define the lines around the border individually.

Image Borders are a border and a background too. They are made by slicing it and tiling an image. They look like this:

BackpackItemBorder_Unique
{
    "bordertype"		"scalable_image"
    "backgroundtype"		"2"
    "color"			"QualityColorUnique"
    "image"			"backpack_rect_color"
    "src_corner_height"		"24"
    "src_corner_width"		"24"
    "draw_corner_width"		"5"
    "draw_corner_height" 	"5"	
}

the name of the border, opening brace, properties of the border, closing brace

  • bordertype and backgroundtype: these two properties define the type of border, in this case image border, leave them how they are.
  • color: some images allow a color filter. The backpack rectangle is used many times, for different quality items, and is colored differently for each. Some images do not work with coloring however.
  • image: the image used. This path is relative to the tf/materials/vgui directory.
  • src_corner_height and src_corner_width: the sample size for the corners of the image.
  • draw_corner_width and draw_corner_height: the size of the corner on the control that uses this border.

Line Borders are just lines around the edge of the control. The border is made by defining each of the lines. They look like this:

StoreItemBorder
{
    "inset" "0 0 1 1"
    "backgroundtype"		"2"
    Left
    {
        "1"
        {
            "color" "TanDarker"
            "offset" "0 1"
        }
    }
    Right
    {
        "1"
        {
            "color" "TanDarker"
            "offset" "1 0"
        }
    }
    Top
    {
        "1"
        {
            "color" "TanDarker"
            "offset" "0 0"
        }
    }
    Bottom
    {
        "1"
        {
            "color" "TanDarker"
            "offset" "0 0"
        }
    }
}

inset defines the distance from each edge each border is. Its best to use the default inset (used in the example). The left, right, top and bottom borders are defined in their own braces. Use the offset used in the example. The color is the color of each line. Each border will be 1 unit thick, but you can make borders thicker by adding more lines within the sides braces like this:

Left
{
    "1"
    {
        "color" "TanDarker"
        "offset" "0 1"
    }
    "2"
    {
        "color" "TanDarker"
        "offset" "1 1"
    }
}

notice the second brace is numbered 1 more and the x offset is 1 more - two unit thick border

Custom Fonts

Custom fonts are extra fonts you want to use in your HUD. This section is telling the game that the font file exists. Here is an example:

"4" 
{
    "font" "resource/COUTURE-Bold.ttf"
    "name" "COUTURE"
}

The number in front of the braces does not matter, as long as the list of custom fonts is numbered in ascending integers. The font property is the font file, and path, which is relative to the tf directory. Any custom font you use must be of the True Type Font (.ttf) type, and I recommend you put it in the resource folder. The name property must font's actual name.

Click here for a detailed guide on using a custom font.

top

hudanimations_tf.txt

This file defines the animations of certain HUD entities during certain events in-game. For example; the animation of your health cross when you are overhealed.

The animations capable are rather simple. You can change the value of properties of controls/entities over a defined time period.

The file itself contains a brief guide on how to edit it.

top

sourcescheme.res

TF2 is built on the Source Engine. Source Engine games come with a default user interface. TF2 has its own UI built on top, but still has several dialogs in the default source UI (such as: server browser, create server, options, achievements). sourcescheme.res defines the default source UI. clientscheme.res defines all the TF2 dialogs and the entire in-game HUD.

The structure to sourcescheme.res is the same as clientscheme.res, but colors, font and borders defined in sourcescheme.res are not reference-able in TF2 HUD files.