VGUI: Making GameUI Panels

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"
	}
}

To start off, add these defines into vgui_helpers.h:

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)

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 

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 
} 

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

Now that we have the framework for the panel... Go to the includes in vgui_int.cpp and add testpanel.h 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(); 

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: