VGUI: Difference between revisions

From Empires Wiki
Jump to navigation Jump to search
 
(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==


<code>
<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:
}
}
}
}
</code>
</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

  1. Create a new folder structure extension in the Empires/empires folder named custom/
  2. Add hudlayout.res inside the folder
  3. Open hudlayout.res
  4. 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
}
  1. Make a copy of the res and src files and edit them. For more information, look at the CVguiJavascriptContext documentation.
  2. 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