TF2 HUD Editing Guide

Sections on this Page:

1. Image Property
2. Custom Images
3. Team specific Images

In-Depth: Images

Some info on the image property of controls.

Image Property

Image based controls such as ImagePanel, CExImagePanel and CTFImagePanel have a property that determines their image, which is image.

"PlayerStatusSpyOutlineImage"
{
   "ControlName"  "CTFImagePanel"
   "fieldName"    "PlayerStatusSpyOutlineImage"
   "xpos"         "3"
   "ypos"         "r67"
   "zpos"         "7"
   "wide"         "55"
   "tall"         "55"
   "visible"      "0"
   "enabled"      "1"
   "image"        "../hud/class_spy_outline"
   "scaleImage"   "1"	
}

This property takes the name of a VTF file (without the .vtf extension) and is relative to the tf/materials/vgui folder.

To see all the images in the default TF2 files, you'll need to open tf2_textures_dir.vpk with GCFScape.

top

Custom Images

There are exploits that involve the use of custom content to give and advantage. Because of this, there is a server side variable (sv_pure), that when set to specific values will disable custom content.

When sv_pure is on, any custom images you have added to your HUD will not be shown. This even includes custom images used on the main menu (such as main menu backgrounds).

When using custom images, its necessary to plan around this. For example, its not THAT big of a deal if your custom main menu background is not visible when you're playing on a server.

That being said, I strongly advise you not to use custom images on the in-game HUD.

top

Team specific Images

Some controls, and control types allow for different images to be seen, based on what class you are. These are additional properties.

Image Properties - Full

image	Basic image property. If team specific images are not set, this will be used.
teambg_1	No Team image property. The image that will be shown when you are not on a team or in spectate.
teambg_2	Red Team image property. The image that will be shown when you are on red team.
teambg_3	Blue Team image property. The image that will be shown when you are on blue team.

Example of these image properties:

"DisguiseStatusBG"
{
	"ControlName"		"CTFImagePanel"
	"fieldName"		"DisguiseStatusBG"
	"xpos"			"10"
	"ypos"			"30"
	"zpos"			"-1"
	"wide"			"200"
	"tall"	 		"32"
	"autoResize"		"0"
	"pinCorner"		"0"
	"visible"		"1"
	"enabled"		"1"
	"image"			"../hud/color_panel_brown"
	"scaleImage"		"1"
	"teambg_1"		"../hud/color_panel_brown"
	"teambg_2"		"../hud/color_panel_red"
	"teambg_3"		"../hud/color_panel_blu"
	"src_corner_height"		"23"
	"src_corner_width"		"23"
	"draw_corner_width"		"5"
	"draw_corner_height" 	"5"	
}