VGUI: Making GameUI Panels

Resource\UI\TestPanel.res

Here's an example of a panel you want to show when a command is issued at any time:

"Resource/UI/TestPanel.res"
{
	"testpanel"
	{
		"ControlName"	"CTestPanel"
		"fieldName"	"testpanel"
		"title"		"Test Panel"
		"xpos"		"0"
		"ypos"		"0"
		"wide"		"200"
		"tall"		"200"
		"autoResize"	"0"
		"pinCorner"	"0"
		"visible"	"1"
		"enabled"	"1"
		"tabPosition"	"0"
	}
	"Label1"
	{
		"ControlName"	"Label"
		"fieldName"	"Label1"
		"xpos"		"8"
		"ypos"		"32"
		"wide"		"200"
		"tall"		"175"
		"wrap"		"1"
		"autoResize"	"0"
		"pinCorner"	"0"
		"visible"	"1"
		"enabled"	"1"
		"tabPosition"	"0"
		"labelText"	"An example label inside of an example frame"
		"textAlignment"	"north"
		"dulltext"	"0"
		"brighttext"	"0"
	}
	"close"
	{
		"ControlName"	"Button"
		"fieldName"	"close"
		"xpos"		"68"
		"ypos"		"168"
		"wide"		"64"
		"tall"		"24"
		"labelText"	"#GameUI_Close"
		"Command"	"Close"
		"autoResize"	"0"
		"pinCorner"	"0"
		"visible"	"1"
		"enabled"	"1"
		"tabPosition"	"0"
	}
}

cl_dll\vgui_helpers.h

Add the following after the includes:

class IGameUI
{
public:
	virtual void Create( vgui::VPANEL parent ) = 0;
	virtual void Destroy( void ) = 0;
	virtual vgui::Panel *GetPanel(void) = 0;
};
#define DeclarePanel(className,panelClassName,globalPanel)\
	class className : public IGameUI\
	{\
	private:\
		panelClassName *myPanel;\
	public:\
		className(void)\
		{\
			myPanel = NULL;\
		}\
		void Create( vgui::VPANEL parent )\
		{\
			myPanel = new panelClassName( parent );\
		}\
		void Destroy( void )\
		{\
			if(myPanel)\
			{\
				myPanel->SetParent( (vgui::Panel *)NULL );\
				delete myPanel;\
			}\
		}\
		vgui::Panel *GetPanel(void)\
		{\
			return myPanel;\
		}\
	};\
	extern IGameUI *globalPanel
//Doesn't use panelClassName but has it to base code on copy and paste work 
#define PanelGlobals(className,panelClassName,globalPanel)\
	static className g_##className##Panel;\
	IGameUI *globalPanel = (IGameUI *)&g_##className##Panel

#define ToggleVisibility(panel)\
	panel->SetVisible(!panel->IsVisible())

//only the prototype for AlignPanel exists 
#define CenterThisPanelOnScreen()\
	int x,w,h;\
	GetBounds(x,x,w,h);\
	SetPos((ScreenWidth()-w)/2,(ScreenHeight()-h)/2)
#define CenterPanelOnScreen(panel)\
	int x,w,h;\
	panel->GetBounds(x,x,w,h);\
	panel->SetPos((panel->ScreenWidth()-w)/2,(panel->ScreenHeight()-h)/2)

cl_dll\testpanel.h

#ifndef TESTPANEL_H
#define TESTPANEL_H
#ifdef _WIN32
#pragma once
#endif
#include "vgui_helpers.h"
#include <vgui_controls/Frame.h>
using namespace vgui;
class CTestPanel : public Frame
{
	DECLARE_CLASS_SIMPLE(CTestPanel,Frame);
public:
	CTestPanel( vgui::VPANEL parent );
};
DeclarePanel(CTest,CTestPanel,test);
#endif // TESTPANEL_H 

cl_dll\testpanel.cpp

#include "cbase.h"
#include "testpanel.h"
// memdbgon must be the last include file in a .cpp file!!! 
#include "tier0/memdbgon.h"
PanelGlobals(CTest,CTestPanel,test);
CON_COMMAND(ToggleTestPanel,NULL)
{
	ToggleVisibility(test->GetPanel());
}
CTestPanel::CTestPanel( vgui::VPANEL parent ) : BaseClass( NULL, "testpanel" )
{
	SetParent(parent);
	vgui::HScheme scheme = vgui::scheme()->LoadSchemeFromFile("resource/SourceScheme.res", "SourceScheme");
	SetScheme( scheme );
	LoadControlSettings("Resource/UI/TestPanel.res");
	CenterThisPanelOnScreen();//keep in mind, hl2 supports widescreen 
	SetVisible(false);//made visible on command later 

	//Other useful options
	//SetSizeable(false);
	//SetMoveable(false);
} 

See how much the defines reduced the coding for testpanel.cpp and testpanel.h?

cl_dll\vgui_int.cpp

Now that we have the framework for the panel...

First go to the header includes and add your testpanel.h to the list of includes so you can access your newly created panel.

Scroll down to VGui_CreateGlobalPanels and add this after the second line:

	VPANEL uiParent = enginevgui->GetPanel( PANEL_GAMEUIDLL ); 

The GameUI panel is what we're going to be making our panels in

In the same function, add this to the list of Creates:

	test->Create( uiParent ); 

Scroll down a little until you get to VGui_Shutdown and add this to the list of Destroys:

	test->Destroy();

Conclusion

Now we have a panel that's created during startup, destroyed on shutdown, and accessible through a command. Keep these in mind though:

• You don't have to use a frame for the panel
• You can make it so the command to show it can't close it also
• You can make it so the panel is created once the command is issued, and destroyed once it's closed, so it doesn't have to sit in the memory

Here's an example of what can be done based on this code: