Adding Your Logo to the Menu

Overview

In this tutorial, you will be taught how to add your own custom logo (or anything you'd like) to the Main Menu in a Half-Life 2 Single Player modification. This should work for any type of mod you chose.

Techniques Used

• Create a custom panel
• Centering a panel
• Making a transparent image show on a panel

Known Bugs

• When viewing a dialog (such as the Options dialog) the image will not fade to black.

Steps

Open the Game_Sdk solution in VS.NET (This tutorial assumes you use Visual Studio .NET 2003).

Under the "Source Files" folder, create a new .cpp file. We'll name this file "vgui_Panel_Top.cpp".

Basically what we will do is create an invisible panel that will show up where we want on the menu screen. Since it is a panel, in theory, you could put whatever you'd like in it.

Here's what your cpp file should look like (the comments should explain it well):

vgui_Panel_Top.cpp

#include "cbase.h"
#include "vgui_Panel_Top.h"
#include "vgui_controls/Frame.h"
#include <vgui/ISurface.h>
#include <vgui/IVGui.h>

using namespace vgui;

// memdbgon must be the last include file in a .cpp file!!!
#include "tier0/memdbgon.h"

//-----------------------------------------------------------------------------
// Purpose: Displays the logo panel
//-----------------------------------------------------------------------------
class CTopPanel : public vgui::EditablePanel
{
	typedef vgui::EditablePanel BaseClass;

public:
	CTopPanel( vgui::VPANEL parent );
	~CTopPanel();

	virtual void ApplySchemeSettings( vgui::IScheme *pScheme )
	{
		
		BaseClass::ApplySchemeSettings( pScheme );
	}

	// We want the panel background image to be square, not rounded.
	virtual void PaintBackground()
	{
		SetPaintBackgroundType( 0 );
		BaseClass::PaintBackground();
	}

private:
	
};

//-----------------------------------------------------------------------------
// Purpose: Constructor
//-----------------------------------------------------------------------------
CTopPanel::CTopPanel( vgui::VPANEL parent ) : BaseClass( NULL, "CTopPanel" )
{
	
	SetParent( parent );
	SetProportional( true );
	SetVisible( true );
	ActivateBuildMode();       // Activate build mode until we finish setting it up.
	SetScheme("ClientScheme");

	// Size of the panel, since your logo is a VTF, you should set this (width,height) to the proper dimensions
	SetSize(256,128);

	// Loading the .res file.
	LoadControlSettings( "resource/UI/TopPanel.res" );

	vgui::ivgui()->AddTickSignal( GetVPanel(), 100 );

	// center the image and move it down
	int wide, tall;
	GetSize( wide, tall );
	SetPos( ( ScreenWidth() - wide ) / 2, 140 ); // SetPos(width from left, height from top)
}

//-----------------------------------------------------------------------------
// Purpose: Destructor
//-----------------------------------------------------------------------------
CTopPanel::~CTopPanel()
{
}

// Class
class CTop : public ITop
{
private:
	CTopPanel *TopPanel;
	vgui::VPANEL m_hParent;

public:
	CTop( void )
	{
		TopPanel = NULL;
	}

	void Create( vgui::VPANEL parent )
	{
		// Create immediately
		TopPanel = new CTopPanel(parent);
	}

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

};

static CTop g_Top;
ITop *Top = ( ITop * )&g_Top;

Alright, so here we have created our Top class. If you compile and run it now, nothing will happen. This is because we need to Create it.

Open up vgui_int.cpp (same folder, Source Files).

Add an include for your panel.

vgui_int.cpp

#include "vgui_Panel_Top.h"

Scroll down to where the function VGui_CreateGlobalPanels is. Now, somewhere in there, add this:

vgui_int.cpp

// Custom Panel
VPANEL GameUiDll = enginevgui->GetPanel( PANEL_GAMEUIDLL);
Top->Create( GameUiDll );

Example:

vgui_int.cpp

void VGui_CreateGlobalPanels( void )
{
	VPANEL gameParent = enginevgui->GetPanel( PANEL_CLIENTDLL );
	VPANEL toolParent = enginevgui->GetPanel( PANEL_TOOLS );

	// console->Create( parent );
	// Part of game
	textmessage->Create( gameParent );
	internalCenterPrint->Create( gameParent );
	loadingdisc->Create( gameParent );
	messagechars->Create( gameParent );

	// Custom Panel
	VPANEL GameUiDll = enginevgui->GetPanel( PANEL_GAMEUIDLL);
	Top->Create( GameUiDll );

	// Debugging or related tool
	fps->Create( toolParent );
	netgraphpanel->Create( toolParent );
	debugoverlaypanel->Create( toolParent );
}

Now, here we have told VGUI to create this panel when the game starts up.

Next, scroll down to the VGui_Shutdown() function. Add this somwhere in there:

vgui_int.cpp

Top->Destroy();

This is to make sure to clean up the panel when starting a game and whatnot.

Next, navigate to the Header Files folder. Create a new .h file, vgui_Panel_Top.h. It should contain:

vgui_Panel_Top.h

#include <vgui/VGUI.h>

namespace vgui
{
	class Panel;
}

class ITop
{
public:
	virtual void		Create( vgui::VPANEL parent ) = 0;
	virtual void		Destroy( void ) = 0;
};

extern ITop *Top;

Here we have our Create and Destroy function references so we can call them from vgui_int.cpp. If you are new to creating panels, the extern ITop *Top; line tells the code to define "Top" to call our panel; remember the Top->Create( GameUiDll ); from vgui_int.cpp.

OK, the coding is finished. Now we need to create a res file. Navigate to your SourceMods/your_mod/resource/ui folder. Create a new .res file, and name it TopPanel.res.

Put this in for now:

TopPanel.res

"resource/UI/TopPanel.res"
{
	"CTopPanel"
	{
		"ControlName"		"EditablePanel"
		"fieldName"		"CTopPanel"
		"xpos"		"192"
		"ypos"		"70"
		"wide"		"256"
		"tall"		"128"
		"autoResize"		"0"
		"pinCorner"		"0"
		"visible"		"1"
		"enabled"		"1"
		"tabPosition"		"0"
	}
	"ImagePanelLogo"
	{
		"ControlName"		"ImagePanel"
		"fieldName"		"ImagePanelLogo"
		"xpos"		"0"
		"ypos"		"0"
		"wide"		"256"
		"tall"		"128"
		"autoResize"		"0"
		"pinCorner"		"0"
		"visible"		"1"
		"enabled"		"1"
		"tabPosition"		"0"
		"image"		"logo"
		"scaleImage"		"0"
	}
}

As you can see, there is an ImagePanel here. If you read it, the "image" parameter is set to "logo". This is important: Your logo must be a VTF file and must have a VMT file located in the materials/vgui folder. You don't need to have the extension because Source is smart that way.

Use vtex to convert your TGA file to a VTF file (remember, width and height must be powers of 2). Put the VTF file where you want and put the VMT into the materials/vgui folder. Your .res file's "image" parameter points to the VMT. Open up the VMT file and make sure the $baseTexture points to your VTF file (wherever it's located). Example:

logo.vmt

"UnlitGeneric"
{
	"$baseTexture" "console/logo"
	"$vertexcolor" 1
	"$vertexalpha" 1
	"$ignorez" 1
	"$no_fullbright" "1"
	"$nolod" "1"
}

The VTF must be somewhere in the materials folder.

To have transparency in your TGA, set the background transparent and use 32-bit/pixel, vtex will then make your logo have a transparent background.

Now, compile and run your mod. In the center of the screen there should be your logo. The VGUI Build Mode Panel should also be visible. You can customize the panel to your needs and then comment out ActivateBuildMode(); in your code (vgui_Panel_Top.cpp).

Notes

If you want to change the name of the panel for easier reference (such as LogoPanel) just replace wherever the word "Top" appears with the word "Logo" including your .cpp and .h files.