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 theControlName
) 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.