Difference between revisions of "Adding Your Logo to the Menu"

From Valve Developer Community
Jump to: navigation, search
m (Resource file)
m (Fixed a spelling mistake)
 
(20 intermediate revisions by 13 users not shown)
Line 1: Line 1:
{{tip|''This code is now a part of the Source engine.'' To enable logo support, add <code>gamelogo 1</code> to [[gameinfo.txt]] and create <code>\resource\GameLogo.res</code> [[#Resource_file|using the syntax below]].}}
+
{{otherlang2
 +
|pl=Adding_Your_Logo_to_the_Menu:pl
 +
| ru = Adding_Your_Logo_to_the_Menu:ru}}
  
----
+
[[File:Gamelogo.jpg|thumb|TF2's logo is 512x128px.]]
  
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.
+
Instead of displaying your mod's name as a string of characters, you can have a logo image. To do this:
  
'''Techniques Used:'''
+
# Add <code>gamelogo 1</code> to the top of [[gameinfo.txt]] (same block as <code>game</code>, <code>type</code>, etc.).
 +
# Create <code><mod>\resource\GameLogo.res</code>, a text file, with this template:
  
*Create a custom panel
+
<source lang=ini>
*Centering a panel
+
Resource/GameLogo.res
*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'''
 
<pre>
 
#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;
+
GameLogo
 
 
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:
 
 
};
 
</pre>
 
<pre>
 
//-----------------------------------------------------------------------------
 
// 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)
 
}
 
 
 
 
 
</pre>
 
<pre>
 
//-----------------------------------------------------------------------------
 
// 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
+
ControlName EditablePanel
TopPanel = new CTopPanel(parent);
+
fieldName GameLogo
 +
xpos 0
 +
ypos 0
 +
zpos 50
 +
wide 400
 +
tall 100
 +
autoResize 1
 +
pinCorner 0
 +
visible 1
 +
enabled 1
 +
offsetX -20
 +
offsetY -15
 
}
 
}
};
 
 
static CTop g_Top;
 
ITop *Top = ( ITop * )&g_Top;
 
</pre>
 
 
Alright, so here we have created our <code>Top</code> 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'''
 
<pre>
 
#include "vgui_Panel_Top.h"
 
</pre>
 
 
Scroll down to where the function <code>VGui_CreateGlobalPanels</code> is. Now, somewhere in there, add this:
 
 
'''vgui_int.cpp'''
 
<pre>
 
// Custom Panel
 
</pre>
 
 
Example:
 
 
'''vgui_int.cpp'''
 
<pre>
 
void VGui_CreateGlobalPanels( void )
 
{
 
VPANEL gameParent = enginevgui->GetPanel( PANEL_CLIENTDLL );
 
VPANEL toolParent = enginevgui->GetPanel( PANEL_TOOLS );
 
  
// console->Create( parent );
+
Logo
// 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 );
 
}
 
</pre>
 
 
 
Now, here we have told VGUI to create this panel when the game starts up.
 
 
 
Next, scroll down to the <code>VGui_Shutdown()</code> function. Add this somewhere in there:
 
 
 
'''vgui_int.cpp'''
 
<pre>
 
Top->Destroy();
 
</pre>
 
 
 
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'''
 
<pre>
 
#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;
 
</pre>
 
 
 
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 <code>extern ITop *Top;</code> line tells the code to define "Top" to call our panel; remember the <code>Top->Create( GameUiDll );</code> from vgui_int.cpp.
 
 
 
== Resource file ==
 
 
 
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'''
 
<pre>
 
"resource/GameLogo.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"
+
ControlName ImagePanel
"fieldName" "ImagePanelLogo"
+
fieldName Logo
"xpos" "0"
+
xpos 0
"ypos" "0"
+
ypos 0
"wide" "299"
+
zpos 50
"tall" "128"
+
wide 400
"autoResize" "0"
+
tall 100
"pinCorner" "0"
+
visible 1
"visible" "1"
+
enabled 1
"enabled" "1"
+
image ../logo/TF2_Logo
"tabPosition" "0"
+
scaleImage 1
"image" "logo"
 
"scaleImage" "0"
 
 
}
 
}
 
}
 
}
</pre>
+
</source>
  
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.
+
The path of the <code>image</code> field is relative to <code>materials\'''vgui\'''</code>. As you can see in the example above, the TF2 logo is actually stored in <code>materials\logo\</code>!
  
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:
+
Do not include a file extension in the path.
  
'''logo.vmt'''
+
{{tip|Removing your text from the gameinfo.txt under the name '''title''' will remove the font title and will only provide the logo.}}
<pre>
 
"UnlitGeneric"
 
{
 
"$baseTexture" "vgui/logo"
 
"$vertexcolor" 1
 
"$vertexalpha" 1
 
"$ignorez" 1
 
"$no_fullbright" "1"
 
"$nolod" "1"
 
}
 
</pre>
 
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.
+
{{tip|When [[Creating a Material|creating your logo]], use the [[UnlitGeneric]] shader, do not generate mipmaps, and disable LOD.}}
  
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 <code>ActivateBuildMode();</code> in your code (vgui_Panel_Top.cpp).
+
{{tip|If your game logo has an alpha channel (transparency) then add <code>"$alphatest" "1"</code> to your game logo's .vmt otherwise it'll look opaque in game.}}
  
== Notes ==
+
[[Category:Modding]]
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.
+
[[Category:Material System]]

Latest revision as of 14:14, 8 January 2020

Polski Русский
TF2's logo is 512x128px.

Instead of displaying your mod's name as a string of characters, you can have a logo image. To do this:

  1. Add gamelogo 1 to the top of gameinfo.txt (same block as game, type, etc.).
  2. Create <mod>\resource\GameLogo.res, a text file, with this template:
Resource/GameLogo.res
{
	GameLogo
	{
		ControlName	EditablePanel
		fieldName	GameLogo
		xpos		0
		ypos		0
		zpos		50
		wide		400
		tall		100
		autoResize	1
		pinCorner	0
		visible		1
		enabled		1
		offsetX		-20
		offsetY		-15
	}

	Logo
	{
		ControlName	ImagePanel
		fieldName	Logo
		xpos		0
		ypos		0
		zpos		50
		wide		400
		tall		100
		visible		1
		enabled		1
		image		../logo/TF2_Logo
		scaleImage	1		
	}
}

The path of the image field is relative to materials\vgui\. As you can see in the example above, the TF2 logo is actually stored in materials\logo\!

Do not include a file extension in the path.

Tip.png Tip: Removing your text from the gameinfo.txt under the name title will remove the font title and will only provide the logo.
Tip.png Tip: When creating your logo, use the UnlitGeneric shader, do not generate mipmaps, and disable LOD.
Tip.png Tip: If your game logo has an alpha channel (transparency) then add "$alphatest" "1" to your game logo's .vmt otherwise it'll look opaque in game.