Animated Menu Background: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
(Initial write-up for the "Animated Menu Background" page.)
 
m (Use "YouTube" template for link)
 
(15 intermediate revisions by 4 users not shown)
Line 1: Line 1:
== What Is This? ==


{{Note|This implementation has some issues, and we need your help! Please check out "Problem 4" at the bottom of the page.}}
This implementation allows you to use a [[BIK|.bik]] file as your main menu's background. Similar to those seen in Left 4 Dead 2 and Portal 2.
 
 
== What Is This? ==


This implementation allows you to use a .bik file as your main menu's background. Similar to what's seen in Left 4 Dead 2 and Portal 2.
For a video-based version of this tutorial, check out {{youtube|tONMKpujXwY|page=watch|TheMaster974's YouTube video guide}}.


<gallery caption="Examples" widths="512px" heights="384px" perrow="2" mode="packed">
<gallery caption="Examples" widths="800" heights="600px" perrow="2" mode="packed">
File:Small AnimatedBackgroundL4D2.gif
File:Small AnimatedBackgroundL4D2.gif|From {{l4d2|4}}
File:Small_AnimatedBackgroundP2.gif
File:Small_AnimatedBackgroundP2.gif|From {{portal2|4}}
</gallery>
</gallery>


Line 15: Line 13:


First off you'll need these two files:
First off you'll need these two files:
 
* [[Animated Menu Background/menu_background.h|menu_background.h]]
* [https://gist.github.com/GamerDude27/759c369d937f21d7e83f005a7db98735 menu_background.h]
* [[Animated Menu Background/menu_background.cpp|menu_background.cpp]]
* [https://gist.github.com/GamerDude27/e0404472d51d8f11ff4835f140d6a659 menu_background.cpp]




Line 24: Line 21:


Once that's done, open up '''cdll_client_int.cpp''' and add this:
Once that's done, open up '''cdll_client_int.cpp''' and add this:
<pre>
<source lang="cpp">
void SwapDisconnectCommand();
void SwapDisconnectCommand();
</pre>
</source>


Above
Above


<pre>
<source lang="cpp">
void CHLClient::PostInit()
void CHLClient::PostInit()
</pre>
</source>


Then at the bottom of the '''PostInit()''' function, add this:
Then at the bottom of the <code>PostInit()</code> function, add this:
<pre>
<source lang="cpp">
#ifdef SDK_DLL
SwapDisconnectCommand();
SwapDisconnectCommand();
#endif
</source>
</pre>
 
Now head over to '''clientmode_sdk.cpp''', and add this as the last include at the top of the file:
<pre>
// memdbgon must be the last include file in a .cpp file!!!
#include "tier0/memdbgon.h"
</pre>
 
Now head over to '''sdkviewport.cpp''', and again add this at the top:
<pre>
#include "menu_background.h"


// memdbgon must be the last include file in a .cpp file!!!
Now head over to '''baseviewport.cpp''', and add this at the top:
#include "tier0/memdbgon.h"
<source lang="cpp">
</pre>
#include "../menu_background.h"
</source>


In the same file, add this:
In the same file, add this in the constructor (<code>CBaseViewport::CBaseViewport()</code>):
<pre>
<source lang="cpp">
SDKViewport::SDKViewport()
{
m_pMainMenuPanel = NULL;
m_pMainMenuPanel = NULL;
}
</source>


SDKViewport::~SDKViewport()
Add this in the destructor (<code>CBaseViewport::~CBaseViewport()</code>):
{
<source lang="cpp">
if ( !m_bHasParent && m_pMainMenuPanel )
if ( !m_bHasParent && m_pMainMenuPanel )
{
m_pMainMenuPanel->MarkForDeletion();
m_pMainMenuPanel->MarkForDeletion();
}
m_pMainMenuPanel = NULL;
m_pMainMenuPanel = NULL;
}
</source>


void SDKViewport::Start(IGameUIFuncs *pGameUIFuncs, IGameEventManager2 *pGameEventManager)
Add this in the <code>CBaseViewport::Start( ... )</code> function:
{
<source lang="cpp">
m_pMainMenuPanel = new CMainMenu( NULL, NULL );
m_pMainMenuPanel = new CMainMenu( NULL, NULL );
m_pMainMenuPanel->SetZPos( 500 );
m_pMainMenuPanel->SetZPos( 500 );
m_pMainMenuPanel->SetVisible( false );
m_pMainMenuPanel->SetVisible( false );
m_pMainMenuPanel->StartVideo();
m_pMainMenuPanel->StartVideo();
BaseClass::Start(pGameUIFuncs, pGameEventManager);
</source>
}
</pre>


Above
Add this in the <code>CBaseViewport::OnScreenSizeChanged()</code> function:
<source lang="cpp">
bool bRestartMainMenuVideo = false;


<pre>
if ( m_pMainMenuPanel )
void SDKViewport::ApplySchemeSettings( vgui::IScheme *pScheme )
bRestartMainMenuVideo = m_pMainMenuPanel->IsVideoPlaying();
</pre>


Then below that function, add:
m_pMainMenuPanel = new CMainMenu( NULL, NULL );
<pre>
void SDKViewport::OnScreenSizeChanged(int iOldWide, int iOldTall)
{
bool bRestartMainMenuVideo = false;
if (m_pMainMenuPanel)
bRestartMainMenuVideo = m_pMainMenuPanel->IsVideoPlaying();
BaseClass::OnScreenSizeChanged(iOldWide, iOldTall);
m_pMainMenuPanel = new CMainMenu( NULL, NULL );
m_pMainMenuPanel->SetZPos( 500 );
m_pMainMenuPanel->SetZPos( 500 );
m_pMainMenuPanel->SetVisible( false );
m_pMainMenuPanel->SetVisible( false );
if (bRestartMainMenuVideo)
 
if ( bRestartMainMenuVideo )
m_pMainMenuPanel->StartVideo();
m_pMainMenuPanel->StartVideo();
}
</source>


void SDKViewport::RemoveAllPanels( void)
Add this in the <code>CBaseViewport::RemoveAllPanels( void )</code>:
{
<source lang="cpp">
if (m_pMainMenuPanel)
if ( m_pMainMenuPanel )
{
{
m_pMainMenuPanel->MarkForDeletion();
m_pMainMenuPanel->MarkForDeletion();
m_pMainMenuPanel = NULL;
m_pMainMenuPanel = NULL;
}
}
BaseClass::RemoveAllPanels();
</source>
}
</pre>


And below the '''GetDeathMessageStartHeight( void )''' function add this:
Below the <code>GetDeathMessageStartHeight( void )</code> function add these:
<pre>
<source lang="cpp">
void SDKViewport::StartMainMenuVideo()
//-----------------------------------------------------------------------------
// Purpose:
//-----------------------------------------------------------------------------
void CBaseViewport::StartMainMenuVideo()
{
{
if (m_pMainMenuPanel)
if ( m_pMainMenuPanel )
m_pMainMenuPanel->StartVideo();
m_pMainMenuPanel->StartVideo();
}
}


void SDKViewport::StopMainMenuVideo()
//-----------------------------------------------------------------------------
// Purpose:
//-----------------------------------------------------------------------------
void CBaseViewport::StopMainMenuVideo()
{
{
if (m_pMainMenuPanel)
if ( m_pMainMenuPanel )
m_pMainMenuPanel->StopVideo();
m_pMainMenuPanel->StopVideo();
}
}
</pre>
</source>


Now head over to '''sdkviewport.h''', add this:
Now head over to '''baseviewport.h''', add these:
<pre>
<source lang="cpp">
public:
void StartMainMenuVideo();
SDKViewport();
void StopMainMenuVideo();
~SDKViewport();
</source>
</pre>
 
Above
 
<pre>
public:
IViewPortPanel* CreatePanelByName(const char *szPanelName);
...
</pre>
 
In the same file, add these:
<pre>
virtual void Start( IGameUIFuncs *pGameUIFuncs, IGameEventManager2 *pGameEventManager );
virtual void OnScreenSizeChanged(int iOldWide, int iOldTall);
virtual void RemoveAllPanels( void);
void StartMainMenuVideo();
void StopMainMenuVideo();
</pre>


Below
Below
<source lang="cpp">
virtual int GetDeathMessageStartHeight( void );
</source>


<pre>
After the last function under <code>public:</code>, add:
public:
<source lang="cpp">
IViewPortPanel* CreatePanelByName(const char *szPanelName);
</pre>
 
{{Note|Preferably in the same order as the functions seen in the .cpp file.}}
 
After the last function under '''public:''', add:
<pre>
private:
private:
class CMainMenu* m_pMainMenuPanel;
class CMainMenu *m_pMainMenuPanel;
</pre>
</source>


Now head over to '''convar.h''', and make this public (protected: -> public:):
Now head over to '''convar.h''', and make this public (<code>protected:</code> -> <code>public:</code>):
<pre>
<source lang="cpp" highlight=1>
protected:
protected:
virtual void Create( const char *pName, const char *pHelpString = 0, int flags = 0 );
virtual void Create( const char *pName, const char *pHelpString = 0, int flags = 0 );
</pre>
</source>


== What Next? ==
== What Next? ==


Now that you're done with the implementation, you'll need a .bik file to play as your background.
=== The Bink File ===
 
Now that you're done with the implementation, you'll need a '''.bik''' file to play as your background.


I won't show you how to make your own .bik file, but I can recommend following this guide for that:
I won't show you how to make your own .bik file, but I can recommend following this guide for that:
Line 181: Line 139:




Once you've got your .bik file ready, rename it to '''mainmenu.bik''', and place it in your mod's media folder. If a media folder doesn't exist, create one.
Once you've got your '''.bik''' file ready, rename it to '''mainmenu.bik''', and place it in your mod's media folder. If a media folder doesn't exist, create one.
 
== The Problems ==
 
=== Problem 1: ===
===== Solution: =====
In your Client project, right click "Source Files" -> Add -> Existing Item, then navigate to '''src/game/client/sdk/''' and add '''clientmode_sdk.cpp''' and '''src/game/client/'''.
 
===== Optional Solution: =====
Open your mod's .vpc file in '''src/game/client/''', and add these two lines:
<pre>
$File "sdk\clientmode_sdk.cpp"
$File "sdk\vgui\sdkviewport.cpp"
</pre>
 
Under
 
<pre>
$Folder "Source Files"
</pre>


{{Note|If you don't have one for your mod, open '''client_hl2.vpc''' or '''client_episodic.vpc''' depending on which game your mod is for.}}
=== The Chapter Images ===
{{Note|If you've never edited a .vpc file before, close Visual Studio after you've saved the .vpc changes, go to the '''src''' folder and run '''creategameprojects.bat''' before reopening your solution.}}


=== Problem 2: ===
You might notice that your chapter images are all white now, this can be fixed by adding this to your chapter's VMT file:
While compiling, if you run into this error:
<source lang=text>
<pre>
        "$ignorez" "1"
Cannot open include file: 'sdk_shareddefs.h': No such file or directory (menu_background.cpp)
</source>
</pre>


Head back into '''sdkviewport.h''', and turn this:
Example of working VMT chapter file:
<pre>
<source lang=text highlight=7>
#include "sdk_shareddefs.h"
"UnlitGeneric"
</pre>
 
Into this:
 
<pre>
#include "../../shared/sdk/sdk_shareddefs.h"
</pre>
 
Similarly, if you're running into this:
<pre>
Cannot open include file: 'sdkviewport.h': No such file or directory (sdk\clientmode_sdk.cpp)
</pre>
 
Go to '''clientmode_sdk.h''', and turn this:
<pre>
#include "sdkviewport.h"
</pre>
 
Into this:
 
<pre>
#include "vgui/sdkviewport.h"
</pre>
 
=== Problem 3 (temporary fix): ===
While compiling, if you run into these errors:
<pre>
clientmode_hlnormal.obj : error LNK2005: "class IClientMode * __cdecl GetClientModeNormal(void)" (?GetClientModeNormal@@YAPAVIClientMode@@XZ) already defined in clientmode_sdk.obj
hl2_clientmode.obj : error LNK2005: "class IVModeManager * modemanager" (?modemanager@@3PAVIVModeManager@@A) already defined in clientmode_sdk.obj
hl2_clientmode.obj : error LNK2005: "class ConVar default_fov" (?default_fov@@3VConVar@@A) already defined in clientmode_sdk.obj
</pre>
 
Go to '''hl2_clientmode.cpp''', and at the top comment out this line:
<pre>
ConVar default_fov( "default_fov", "75", FCVAR_CHEAT );
</pre>
 
Then scroll down to the bottom and comment out these lines:
 
<pre>
static CHLModeManager g_HLModeManager;
IVModeManager *modemanager = &g_HLModeManager;
</pre>
 
Now go to '''clientmode_hlnormal.cpp''', and comment out this function:
<pre>
IClientMode *GetClientModeNormal()
{
{
static ClientModeHLNormal g_ClientModeNormal;
        "$baseTexture"    "VGUI/chapters/chapterX"
return &g_ClientModeNormal;
        "$vertexalpha"    "1"
        "$gammaColorRead" "1"
        "$linearWrite"    "1"
        "$ignorez"        "1"
}
}
</pre>
</source>


This is a really bad solution to this problem. If you know of a better solution to this problem, please edit the page with the appropriate information on how to do so!
<gallery caption="Left: $ignorez 0 | Right: $ignorez 1" widths="600" heights="318px" perrow="2" mode="packed">
 
=== Problem 4: ===
 
Once this is implemented, you'll notice that your main menu's title text is gone and that your chapter images are all white.
 
<gallery widths="400px" heights="300px" perrow="2" mode="nolines">
File:AnimatedMainMenuBackground-issue01.png
File:AnimatedMainMenuBackground-issue02.png
File:AnimatedMainMenuBackground-issue02.png
File:AnimatedMainMenuBackground-issue02-fixed-single.png
</gallery>
</gallery>
If anyone knows how to get these issues fixed, please do edit this page with the appropriate information on how to do so!


== Conclusion ==
== Conclusion ==
Line 284: Line 169:
And that's it, try launching your mod to see if it works!
And that's it, try launching your mod to see if it works!


This is currently only tested on the SP branch of Source SDK 2013. The MP branch and Source SDK 2007 remains untested as of writing this article.
This is currently only tested on the SP branch of Source SDK 2013. The MP branch and Source SDK 2007 remain untested as of writing this article. '''(this was tested in Source SDK 2013 MP as could be followed and unless adding the code incorrectly this did not work. but this was followed to what i thought was most approprietely. for a MP fix please contribute!)'''
 
== Special Thanks ==
 
Special thanks to [[User:Taz|Taz]], [[User:OzxyBox|OzxyBox]], and [[User:Gocnak|Gocnak]] from the Source Modding Community for solving the problems this implementation was originally facing!


[[Category:Programming]]
[[Category:Programming]]
[[Category:Free source code]]
[[Category:Free source code]]

Latest revision as of 06:42, 22 May 2025

What Is This?

This implementation allows you to use a .bik file as your main menu's background. Similar to those seen in Left 4 Dead 2 and Portal 2.

For a video-based version of this tutorial, check out YouTube logo TheMaster974's YouTube video guide.

The Implementation

First off you'll need these two files:


Which you'll put into src/game/client/


Once that's done, open up cdll_client_int.cpp and add this:

void SwapDisconnectCommand();

Above

void CHLClient::PostInit()

Then at the bottom of the PostInit() function, add this:

	SwapDisconnectCommand();

Now head over to baseviewport.cpp, and add this at the top:

#include "../menu_background.h"

In the same file, add this in the constructor (CBaseViewport::CBaseViewport()):

	m_pMainMenuPanel = NULL;

Add this in the destructor (CBaseViewport::~CBaseViewport()):

	if ( !m_bHasParent && m_pMainMenuPanel )
		m_pMainMenuPanel->MarkForDeletion();
	m_pMainMenuPanel = NULL;

Add this in the CBaseViewport::Start( ... ) function:

	m_pMainMenuPanel = new CMainMenu( NULL, NULL );
	m_pMainMenuPanel->SetZPos( 500 );
	m_pMainMenuPanel->SetVisible( false );
	m_pMainMenuPanel->StartVideo();

Add this in the CBaseViewport::OnScreenSizeChanged() function:

	bool bRestartMainMenuVideo = false;

	if ( m_pMainMenuPanel )
		bRestartMainMenuVideo = m_pMainMenuPanel->IsVideoPlaying();

	m_pMainMenuPanel = new CMainMenu( NULL, NULL );
	m_pMainMenuPanel->SetZPos( 500 );
	m_pMainMenuPanel->SetVisible( false );

	if ( bRestartMainMenuVideo )
		m_pMainMenuPanel->StartVideo();

Add this in the CBaseViewport::RemoveAllPanels( void ):

	if ( m_pMainMenuPanel )
	{
		m_pMainMenuPanel->MarkForDeletion();
		m_pMainMenuPanel = NULL;
	}

Below the GetDeathMessageStartHeight( void ) function add these:

//-----------------------------------------------------------------------------
// Purpose: 
//-----------------------------------------------------------------------------
void CBaseViewport::StartMainMenuVideo()
{
	if ( m_pMainMenuPanel )
		m_pMainMenuPanel->StartVideo();
}

//-----------------------------------------------------------------------------
// Purpose: 
//-----------------------------------------------------------------------------
void CBaseViewport::StopMainMenuVideo()
{
	if ( m_pMainMenuPanel )
		m_pMainMenuPanel->StopVideo();
}

Now head over to baseviewport.h, add these:

	void StartMainMenuVideo();
	void StopMainMenuVideo();

Below

	virtual int GetDeathMessageStartHeight( void );

After the last function under public:, add:

private:
	class CMainMenu *m_pMainMenuPanel;

Now head over to convar.h, and make this public (protected: -> public:):

protected:
	virtual void Create( const char *pName, const char *pHelpString = 0, int flags = 0 );

What Next?

The Bink File

Now that you're done with the implementation, you'll need a .bik file to play as your background.

I won't show you how to make your own .bik file, but I can recommend following this guide for that:


Once you've got your .bik file ready, rename it to mainmenu.bik, and place it in your mod's media folder. If a media folder doesn't exist, create one.

The Chapter Images

You might notice that your chapter images are all white now, this can be fixed by adding this to your chapter's VMT file:

        "$ignorez" "1"

Example of working VMT chapter file:

"UnlitGeneric"
{
        "$baseTexture"    "VGUI/chapters/chapterX"
        "$vertexalpha"    "1"
        "$gammaColorRead" "1"
        "$linearWrite"    "1"
        "$ignorez"        "1"
}

Conclusion

And that's it, try launching your mod to see if it works!

This is currently only tested on the SP branch of Source SDK 2013. The MP branch and Source SDK 2007 remain untested as of writing this article. (this was tested in Source SDK 2013 MP as could be followed and unless adding the code incorrectly this did not work. but this was followed to what i thought was most approprietely. for a MP fix please contribute!)

Special Thanks

Special thanks to Taz, OzxyBox, and Gocnak from the Source Modding Community for solving the problems this implementation was originally facing!