VGUI: Difference between revisions
(→VGUI) |
|||
(18 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
==VGUI== | ==VGUI== | ||
GUI elements in Empires are made using [https://developer.valvesoftware.com/wiki/VGUI2 VGUI2]. The layout of windows can be edited using the .res files in the resource folder. | |||
==HUD== | |||
HUD elements in Empires are either made using C++ for performance or by using a combination of VGUI and Javascript. The positioning and layout of HUD elements is controlled by the hudlayout.res file in the scripts folder. | |||
Hud elements are updated using [[Data Bindings]] | |||
=== Adding a new HUD element === | |||
# Create a new folder structure extension in the Empires/empires folder named custom/ | |||
# Add hudlayout.res inside the folder | |||
# Open hudlayout.res | |||
# Add an entry for your new element:<br> | |||
<pre> | |||
MyCustomCrosshair // The name of your element | |||
{ | |||
"fieldName" "MyCustomCrosshair" // This should be the same as the previous name. (required) | |||
"type" "javascript" // Indicates that this is a javascript hud element (required) | |||
"res" "resource/ui/emp_hud_vehicle_crosshair.res" // The location of your res file (required) | |||
"src" "resource/ui/emp_hud_vehicle_crosshair.js" // The location of your javascript file (required) | |||
"paintbackground" 0 //Disables the default background | |||
"paintborder" 0 // Disables the default border | |||
"xpos" "50" // Sets the x position. Position is relative to a 640x480 screen. | |||
"ypos" "50" // Sets the y position | |||
"wide" "100" // Sets the width | |||
"tall" "100" // Sets the height | |||
"autoResize" "0" // Disables resizing by the user | |||
// debug border, enable these two to help with positioning | |||
//"border" "DebugBorder" | |||
//"paintborder" 1 | |||
} | |||
</pre> | |||
# Make a copy of the res and src files and edit them. For more information, look at the [[CVguiJavascriptContext]] documentation. | |||
# For more information about the position, look at the [[HUD pos]] documention. | |||
===HUD Hide flags=== | |||
The player has a variable <code>m_iHideHUD</code> that defines which hud elements should be hidden. | |||
https://github.com/ValveSoftware/source-sdk-2013/blob/0d8dceea4310fde5706b3ce1c70609d72a38efdf/mp/src/game/client/hud.cpp#L948 | |||
Each hud element can assign its self to a [https://pages.docs.empiresmod.com/empires_stdlib/vgui/variable/index.html#static-variable-HideType hide group] using [https://pages.docs.empiresmod.com/empires_stdlib/vgui/class/vgui/50-hud.js~Hud.html#static-method-setHideType <code>SetHiddenBits(int group)</code>]. | |||
There are 3 special hide flags. | |||
* HIDEHUD_ALL is special because it is always asigned to every element. So calling SetHiddenBits(HIDEHUD_ALL) is pointless. | |||
* HIDEHUD_PLAYERDEAD & HIDEHUD_NEEDSUIT are special because it does not use <code>m_iHideHUD</code>. Seem to be a bit of a hack by valve. | |||
== VGUI Elements == | |||
Some frequently used [[:Category:VGUI_Elements | vgui elements]] are: | |||
* [[Panel]] | |||
* [[Label]] | |||
* [[ImagePanel]] | |||
* [[CVguiJavascriptContext]] | |||
==Borders== | ==Borders== | ||
< | <pre> | ||
DebugBorder2 | DebugBorder2 | ||
{ | { | ||
"inset" "0 0 0 0" // margin | "inset" "0 0 0 0" // margin | ||
Left // the | "backgroundType" "1" // is of type backgroundtype_e (BACKGROUND_FILLED = 0, BACKGROUND_TEXTURED = 1, BACKGROUND_ROUNDEDCORNERS = 2) | ||
Left // the side | |||
{ | { | ||
"1" // a border can have more then 1 line. | "1" // a border can have more then 1 line. | ||
Line 42: | Line 94: | ||
} | } | ||
} | } | ||
</ | </pre> | ||
==Testing== | |||
To speed up testing, set the following launch options in Steam under the game's properties: | |||
-dev +map con_urb +exec testing | |||
[[Category:VGUI]] |
Latest revision as of 00:26, 21 September 2018
VGUI
GUI elements in Empires are made using VGUI2. The layout of windows can be edited using the .res files in the resource folder.
HUD
HUD elements in Empires are either made using C++ for performance or by using a combination of VGUI and Javascript. The positioning and layout of HUD elements is controlled by the hudlayout.res file in the scripts folder.
Hud elements are updated using Data Bindings
Adding a new HUD element
- Create a new folder structure extension in the Empires/empires folder named custom/
- Add hudlayout.res inside the folder
- Open hudlayout.res
- Add an entry for your new element:
MyCustomCrosshair // The name of your element { "fieldName" "MyCustomCrosshair" // This should be the same as the previous name. (required) "type" "javascript" // Indicates that this is a javascript hud element (required) "res" "resource/ui/emp_hud_vehicle_crosshair.res" // The location of your res file (required) "src" "resource/ui/emp_hud_vehicle_crosshair.js" // The location of your javascript file (required) "paintbackground" 0 //Disables the default background "paintborder" 0 // Disables the default border "xpos" "50" // Sets the x position. Position is relative to a 640x480 screen. "ypos" "50" // Sets the y position "wide" "100" // Sets the width "tall" "100" // Sets the height "autoResize" "0" // Disables resizing by the user // debug border, enable these two to help with positioning //"border" "DebugBorder" //"paintborder" 1 }
- Make a copy of the res and src files and edit them. For more information, look at the CVguiJavascriptContext documentation.
- For more information about the position, look at the HUD pos documention.
HUD Hide flags
The player has a variable m_iHideHUD
that defines which hud elements should be hidden.
https://github.com/ValveSoftware/source-sdk-2013/blob/0d8dceea4310fde5706b3ce1c70609d72a38efdf/mp/src/game/client/hud.cpp#L948
Each hud element can assign its self to a hide group using SetHiddenBits(int group)
.
There are 3 special hide flags.
- HIDEHUD_ALL is special because it is always asigned to every element. So calling SetHiddenBits(HIDEHUD_ALL) is pointless.
- HIDEHUD_PLAYERDEAD & HIDEHUD_NEEDSUIT are special because it does not use
m_iHideHUD
. Seem to be a bit of a hack by valve.
VGUI Elements
Some frequently used vgui elements are:
Borders
DebugBorder2 { "inset" "0 0 0 0" // margin "backgroundType" "1" // is of type backgroundtype_e (BACKGROUND_FILLED = 0, BACKGROUND_TEXTURED = 1, BACKGROUND_ROUNDEDCORNERS = 2) Left // the side { "1" // a border can have more then 1 line. { "color" "0 255 0 255" // color of the border "offset" "2 1" // start and end offset. skip the first 2 pixels and skip the last 1 pixel } } Right { "1" { "color" "0 255 0 255" "offset" "1 0" } } Top { "1" { "color" "0 255 0 255" "offset" "0 0" } } Bottom { "1" { "color" "0 255 0 255" "offset" "0 0" } } }
Testing
To speed up testing, set the following launch options in Steam under the game's properties: -dev +map con_urb +exec testing