Adding Your Logo to the Menu: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m ("image" Parameter)
No edit summary
 
(54 intermediate revisions by 27 users not shown)
Line 1: Line 1:
[[Category:Programming]][[Category:Tutorials]]
{{LanguageBar|title = 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'''
[[File:Gamelogo.jpg|thumb|TF2's logo (in the original version shown here) is 512x128px.]]


* Create a custom panel
Instead of displaying your mod's name as a string of characters, you can have a logo image. To do this:
* Centering a panel
* Making a transparent image show on a panel


'''Known Bugs'''
# 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:


* When viewing a dialog (such as the Options dialog) the image will not fade to black.
<source lang=ini>
 
Resource/GameLogo.res
==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;
 
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 it the logo is a TGA image, you can set this (width,height) to whatever
// your image dimensions are.
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:
GameLogo
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 0
wide 256 // Right - left
tall 128 // Bottom - top
autoResize 1
pinCorner 0
visible 1
enabled 1
offsetX 0 // X-axis position
offsetY 0 // Y-axis position
}
}


void Destroy( void )
Logo
{
{
if ( TopPanel )
ControlName ImagePanel
{
fieldName Logo
TopPanel->SetParent( (vgui::Panel *)NULL );
xpos 0  // -Left
delete TopPanel;
ypos -64 // -Top
}
zpos 0
wide 256 // Scaled VTF width
tall 256 // Scaled VTF height
visible 1
enabled 1
image ui_logo
scaleImage 1
}
}
};
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
VPANEL GameUiDll = enginevgui->GetPanel( PANEL_GAMEUIDLL);
Top->Create( GameUiDll );
</pre>
Example:
'''vui_int.cpp'''
<pre>
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 );
}
</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 somwhere 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;
}
}
</source>


class ITop
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>!
{
public:
virtual void Create( vgui::VPANEL parent ) = 0;
virtual void Destroy( void ) = 0;
};


extern ITop *Top;
Do not include a file extension in the path.
</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.
{{tip|Removing your text from the gameinfo.txt under the name '''title''' will remove the font title and will only provide the logo.}}


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.
{{tip|When [[Creating a Material|creating your logo]], use the [[UnlitGeneric]] shader, do not generate mipmaps for the texture, and disable LOD.}}


Put this in for now:
{{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.}}


'''TopPanel.res'''
<pre>
"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"
}
}
</pre>


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 TGA file and must be located in the ''resource'' folder'''. It can be in a subfolder if you like. The parameter would then read "subfolder/logo". You don't need to have the extension because Source is smart that way.
Draft of some documentation:


To have transparency in your TGA, set the background to white.
* GameLogo width and height seems to define the "bitmap size" the logo is drawn on
* Logo width and height seems to define the actual draw size of the logo.
* GameLogo xpos and ypos doesn't seem to do anything.
* GameLogo offsetX and offsetY will move the "bitmap" around.
* Logo xpos and ypos seems to set the topleft position of the logo being drawn in the bitmap.
* The drawn logo has its bottom aligned to the top of the menu items, when offset X and offset Y are 0. Applying the offsets will move it around.
* The logo doesn't scale with the UI. The GameLogo/wide and tall measures are in absolute pixels, as well as offsetX and offsetY.


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).
So if Logo width/height is larger than GameLogo width/height, the image will be cropped. Negative values let you crop the top and left of the logo. With the width and height of GameLogo, you could crop the right and bottom.


== Notes ==
The idea here is to create your logo inside a VTF, which needs to follow the VTF aspect ratio and size rules. Then you use Logo width and height to scale the VTF, and GameLogo to crop it how you want it.


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:Modding]]
[[Category:Material System]]

Latest revision as of 06:06, 9 August 2025

English (en)Français (fr)Polski (pl)Русский (ru)中文 (zh)Translate (Translate)
TF2's logo (in the original version shown here) 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		0
		wide		256 // Right - left
		tall		128 // Bottom - top
		autoResize	1
		pinCorner	0
		visible		1
		enabled		1
		offsetX		0 // X-axis position
		offsetY		0 // Y-axis position
	}

	Logo
	{
		ControlName	ImagePanel
		fieldName	Logo
		xpos		0   // -Left
		ypos		-64 // -Top
		zpos		0
		wide		256 // Scaled VTF width
		tall		256 // Scaled VTF height
		visible		1
		enabled		1
		image		ui_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.pngTip:Removing your text from the gameinfo.txt under the name title will remove the font title and will only provide the logo.
Tip.pngTip:When creating your logo, use the UnlitGeneric shader, do not generate mipmaps for the texture, and disable LOD.
Tip.pngTip: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.


Draft of some documentation:

  • GameLogo width and height seems to define the "bitmap size" the logo is drawn on
  • Logo width and height seems to define the actual draw size of the logo.
  • GameLogo xpos and ypos doesn't seem to do anything.
  • GameLogo offsetX and offsetY will move the "bitmap" around.
  • Logo xpos and ypos seems to set the topleft position of the logo being drawn in the bitmap.
  • The drawn logo has its bottom aligned to the top of the menu items, when offset X and offset Y are 0. Applying the offsets will move it around.
  • The logo doesn't scale with the UI. The GameLogo/wide and tall measures are in absolute pixels, as well as offsetX and offsetY.

So if Logo width/height is larger than GameLogo width/height, the image will be cropped. Negative values let you crop the top and left of the logo. With the width and height of GameLogo, you could crop the right and bottom.

The idea here is to create your logo inside a VTF, which needs to follow the VTF aspect ratio and size rules. Then you use Logo width and height to scale the VTF, and GameLogo to crop it how you want it.

Retrieved from "https://developer.valvesoftware.com/w/index.php?title=Adding_Your_Logo_to_the_Menu&oldid=486895"