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
}
}
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"
Navigation¶
navUp
navDown
navLeft
navRight
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.
.. code-block:: text
// 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.
.. code:block::
// cover the entire screen
width %100
height %100
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.