Skip to main content

Background

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"
  }
caution

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"
      }
    ]
  }