Skip to content

Custom Backgrounds

There are 3 special commands that control the management of backgrounds

  • StockBackgrounds
  • HUDBackground
  • CustomBackground

To switch to or inbetween different backgrounds included in your hud, use the special HUDBackground property on a control and pass the name of the background you want to enable in the SpecialParameters array, excluding the '_widescreen' suffix and .vtf file extension.

TF2HUD.Editor will always copy the accompanying _widescreen.vtf file when handling backgrounds.

  {
    "Special": "HUDBackground",
    "SpecialParameters": [
      "background_upward" // Will enable background_upward.vtf and background_upward_widescreen.vtf
    ]
  }

Custom Backgrounds

To allow the user to set a custom background from a jpg or png, use the CustomBackground control, along with the CustomBackground special property

  {
    "Type": "CustomBackground",
    "Special": "CustomBackground"
  }

Warning

You must use the CustomBackground type AND the CustomBackground Special property for custom backgrounds to work properly

Priority

If the HUD JSON schema includes a CustomBackground control, the editor will use the background selected by the user, if the user does not have a custom background selected, it will use the HUD Background defined by the HUDBackground or StockBackgrounds special commands

Example Code

CheckBox

This control will toggle between using stock TF2 backgrounds and the default state of your HUD's materials/console folder.

  {
    "Name": "my_hud_use_stock_backgrounds", // Change this to the name of your hud and provide a name for the control
    "Label": "Use Stock Backgrounds",
    "Type": "CheckBox",
    "Value": "false", // Default to default state of materials/console folder
    "Special:": "StockBackgrounds",
  }

ComboBox

This sample creates a ComboBox control where the first two options enable a different custom background image, as well as an option to set default TF2 backgrounds.

  {
    "Name": "my_hud_background_selector_control", // Change this to the name of your hud and provide a name for the control
    "Label": "Menu Background",
    "Type": "ComboBox",
    "ToolTip": "Change the style of background image shown on the main menu.",
    "Value": "0", // The Default selected item
    "Restart": true, // Tell TF2HUD.Editor that applying this customization requires restarting TF2
    "Options": [
      {
        "Label": "Modern Background",
        "Value": "0",
        "Special":"HUDBackground",
        "SpecialParameters": [
          "background_modern"
        ]
      },
      {
        "Label": "Classic Background",
        "Value": "1",
        "Special": "HUDBackground",
        "SpecialParameters": [
        "background_classic"
        ]
      },
      {
        "Label": "Default Backgrounds",
        "Value": "2",
        "Special": "StockBackgrounds"
      }
    ]
  }

Last update: September 24, 2022