VGUI: Making GameUI Panels

Redirect to:

• VGUI2: Creating a panel

This article or section needs to be cleaned up to conform to a higher standard of quality.
For help, see the VDC Editing Help and Wikipedia cleanup process. Also, remember to check for any notes left by the tagger at this article's talk page.

...until then read This Article On Creating a VGUI Panel instead

Command Line Options Template:Otherlang2

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


template <class T>
class GameUI : public IGameUI
{
public:
	GameUI()
	{
		m_pPanel = NULL;
	}

	void Create(vgui::VPANEL parent)
	{
		m_pPanel = new T(parent);
	}

	void Destroy( void )
	{
		if(m_pPanel)
		{
			m_pPanel->SetParent( (vgui::Panel *)NULL );
			delete m_pPanel;
		}

		m_pPanel = NULL;
	}

	T* GetNativePanel()
	{
		return m_pPanel;
	}

	vgui::Panel *GetPanel(void)
	{
		return GetNativePanel();
	}

private:
	T* m_pPanel;
};

#define CenterThisPanelOnScreen() CenterPanelOnScreen(this);

inline void CenterPanelOnScreen(vgui::Panel* panel)
{
	if (!panel)
		return;

	int x,w,h;

	panel->GetBounds(x,x,w,h);
	panel->SetPos((ScreenWidth()-w)/2,(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>


class CTestPanel : public vgui::Frame
{
 	DECLARE_CLASS_SIMPLE(CTestPanel, vgui::Frame);
 public:
 	CTestPanel( vgui::VPANEL parent );
};

IGameUI* GetTestPanel();

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

GameUI<CTestPanel> g_TestPanel;

IGameUI* GetTestPanel()
{
	return &g_TestPanel;
}


CON_COMMAND(ToggleTestPanel,NULL)
{
 	ToggleVisibility(g_TestPanel->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");
 	CenterPanelOnScreen(this);//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:

 	GetTestPanel()->Create( uiParent );

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

 	GetTestPanel()->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:

More

• Quick snippet to use console commands to hide/show high-level vgui panels - User:Psycommando/VGUI_OverrideTest