Element Notation#

Elements are notated as VDF

UI elements are created when a menu is initialized. References to the elements will stay the same, regardless if the menu is open or not.

It is not possible to create elements at runtime so you have to define all elements a menu or panel contains beforehand in appropriate files.

An Element is declared in the following way:

// please follow this structure
ElementName
{
    ControlName name
    // optional: classname, inheritance, ids ...

    // optional: other properties

    // optional: pinning
}

If you’re working on a menu, you need a menu object that contains all elements, for example like this:

resource/ui/menus/profiles_menu.menu
{
    menu
    {
        ControlName Frame
        xpos 0
        ypos 0
        zpos 3
        wide f0
        tall f0
        autoResize 0
        visible 1
        enabled 1
        pinCorner 0
        PaintBackgroundType 0
        infocus_bgcolor_override "0 0 0 0"
        outoffocus_bgcolor_override "0 0 0 0"

        // elements
    }
}

It usually doesn’t matter if you use quotation marks to assign string values to parameters.

HUD & Panel files#

The first line of a .menu or .res file needs to be the resource path to itself, starting from the resource folder.

It’s not possible to load other files as menus or panels. A .menu represents an independant menu of the game, while .res files are “Panels” that can be loaded from other elements.

The rest of the file needs to be wrapped in curly brackets.

resource/ui/menus/more/folders/my_menu.menu
{
    MyObject
    {
        // object properties go here
    }

    // more objects ...
}

Properties#

Capitalization of the properties shouldn’t matter.

(ElementName)

This isn’t a regular property and comes before the opening bracket

Unique string identifier used in scripts to look up an element. Every element is required to have a name.

Inheritance / Parenting#

ControlName

Controls what type of Component the element is and what parameters have an effect. Every element is required to have control name.

InheritProperties
controlSettingsFile

Load a .res file. All elements in the settings file are instantiated and set as children of the element.

Hud_GetChild only works if the parent element is (has the ControlName) a CNestedPanel!

Identifying#

classname

Classname used for identifying groups of elements

scriptID

Set an unique integer id for this element that’s retrievable in script.

Position#

xpos

Set the base x position relative to the element’s sibling position.

inverted when attached to the left corner or smth

ypos

Set the base y position relative to the element’s sibling position.

inverted when attached to the top corner or smth

zpos

The layer this element sits in. Elements with a higher z will be prioritized to be selected / focused. They are also drawn on top of elements with a lower z position.

Dimensions#

wide

Set the base width of this element.

tall

Set the base height of this element.

scale

Float that scales the element.

Text#

labelText

Set the label text of this element, if it is a Label.

textAlignment

Controls the element boundary point the element’s text gets aligned with. east -> Left, north -> Top, west -> Right, south Bottom.

You can also combine the directions like this: north-west.

allcaps

Controls if the text of this element is rendered in all caps. Defaults to 0.

font

Set the text font of this element.

textinsetx
textinsety
dulltext
brighttext
textalign
NoWrap

don’t wrape text

wrap

wrap text from east

centerwrap

wrap text from center

keyboardTitle
keyboardDescription
selectedFont
text
multiline

Set if the text input supports multiline input.

use_proportional_insets

Pinning#

pin_to_sibling

Controls the sibling this element will be pinned to. Takes an element’s name as a parameter.

pin_corner_to_sibling

Sets which corner of this element is pinned to the sibling.

pin_to_sibling_corner

Set to which corner of the sibling this element is pinned to.

pinCorner

Rui#

rui

Images#

image

vgui asset to render

scaleImage
fg_image
drawColor

apply this color on top. Format is “r g b a”.

fillcolor

Fill transparent pixels with this color. Format is “r g b a”

Slider#

stepSize
isValueClampedToStepSize

Other#

visible

Controls if this element is rendered. Defaults to 1.

enable

Controls if this element starts enabled. Defaults to 1.

auto_wide_to_contents
auto_wide_tocontents
auto_tall_tocontents
enabled

Controls if this element is enabled. Only enabled elements can be focused / selected. Defaults to 1.

destination
frame
fieldName
autoResize
barCount
barSpacing
dialogstyle
style
command
ActivationType
paintbackground
tabposition
activeInputExclusivePaint
paintborder
CircularEnabled
CircularClockwise
consoleStyle
unicode
Default
selected
maxchars
listName
arrowsVisible
verifiedColumnWidth
nameColumnWidth
totalMembersColumnWidth
chatBorderThickness
messageModeAlwaysOn
interactive
rowHeight
nameSpaceX
nameSpaceY
micWide
micTall
micSpaceX
micOffsetY
textHidden
editable
NumericInputOnly
allowRightClickMenu
allowSpecialCharacters
SelectedTextColor
SelectedBgColor
clip
teamRelationshipFilter
activeColumnWidth
happyHourColumnWidth
onlinePlayersColumnWidth
PaintBackgroundType

// 0 for normal(opaque), 1 for single texture from Texture1, and 2 for rounded box w/ four corner textures

ConVar
alpha
conCommand
minValue
maxValue
inverseFill
syncedConVar
showConVarAsFloat
modal
headerHeight
panelBorder
linespacing
rightClickEvents
conCommandDefault

Conditional Properties#

You can declare properties for specific conditions by adding [CONDITION] after the property value.

When putting a condition after an element’s name, the element will only be created if the condition evaluates to true.

Usable conditions are:

$WIN32

game is running on 32 bit windows

$WINDOWS

game is running on windows

$DURANGO

game is running on xbox

$PS4

game is running on a PS4

$GAMECONSOLE
$WIDESCREEN_16_9

game resolution is 16/9

$LANGUAGE

the game’s language.

// use allcaps only in russian
    allCaps                                 0       [!$RUSSIAN]
        allCaps                             1       [$RUSSIAN]

On top of that, logical operators like !, && and || are available as well.

Example:#

// This element only shows on pc
    IngameTextChat [$WINDOWS]
    {
            ControlName                             CBaseHudChat
            InheritProperties               ChatBox

            destination                             "match"

            visible                                 0

            pin_to_sibling                  Screen
            pin_corner_to_sibling   TOP_LEFT
            pin_to_sibling_corner   TOP_LEFT
            xpos                                    -45
            ypos                                    -616
    }

// This element has different widths depending on the game resolution
LoadingTip
{
    ControlName                             Label
    ypos                                    10
    wide                                    1630 [$WIDESCREEN_16_9]
    wide                                    1441 [!$WIDESCREEN_16_9]
    auto_tall_tocontents    1
    labelText                               ""
    textalign                               "north-west"
    font                                    Default_28
    wrap                                    1
    fgcolor_override                "217 170 75 255"
    visible                                 0

    pin_to_sibling                  LoadingGameMode
    pin_corner_to_sibling   TOP_LEFT
    pin_to_sibling_corner   BOTTOM_LEFT
}

Pinning#

CENTER

The calculated center of the element

TOP

Element’s top y bounds, x axis center.

BOTTOM

Element’s lowest y bounds, x axis center.

LEFT

Element’s lowest x bounds, y axis center.

RIGHT

Element’s highest x bounds, y axis center.

TOP_LEFT

Top left corner

TOP_RIGHT

Top right corner

BOTTOM_LEFT

Bottom left corner

BOTTOM_RIGHT

Bottom right corner

Units#

You can calculate the position or dimensions etc. with different units. If you provide no extra unit, the game uses pixels.

%x

x percent of the screen.

fx

use 100%

c+/-x

something with the screen edges not exactly sure how positions get calculated

Including KeyValues#

To include another KeyValue file, use #base "filepath" at the top of a VDF file.