Animated Menu Background: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m (Code readability, better VMT section formatting, other minor edits)
m (Use "YouTube" template for link)
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== What Is This? ==
== 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.
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.
 
For a video-based version of this tutorial, check out {{youtube|tONMKpujXwY|page=watch|TheMaster974's YouTube video guide}}.


<gallery caption="Examples" widths="800" heights="600px" 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 11: 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 32: Line 33:
Then at the bottom of the <code>PostInit()</code> function, add this:
Then at the bottom of the <code>PostInit()</code> function, add this:
<source lang="cpp">
<source lang="cpp">
SwapDisconnectCommand();
SwapDisconnectCommand();
</source>
</source>


Line 42: Line 43:
In the same file, add this in the constructor (<code>CBaseViewport::CBaseViewport()</code>):
In the same file, add this in the constructor (<code>CBaseViewport::CBaseViewport()</code>):
<source lang="cpp">
<source lang="cpp">
m_pMainMenuPanel = NULL;
m_pMainMenuPanel = NULL;
</source>
</source>


Add this in the destructor (<code>CBaseViewport::~CBaseViewport()</code>):
Add this in the destructor (<code>CBaseViewport::~CBaseViewport()</code>):
<source lang="cpp">
<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>
</source>


Add this in the <code>CBaseViewport::Start(...)</code> function:
Add this in the <code>CBaseViewport::Start( ... )</code> function:
<source lang="cpp">
<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();
</source>
</source>


Add this in the <code>CBaseViewport::OnScreenSizeChanged()</code> function:
Add this in the <code>CBaseViewport::OnScreenSizeChanged()</code> function:
<source lang="cpp">
<source lang="cpp">
bool bRestartMainMenuVideo = false;
bool bRestartMainMenuVideo = false;
if (m_pMainMenuPanel)
 
bRestartMainMenuVideo = m_pMainMenuPanel->IsVideoPlaying();
if ( m_pMainMenuPanel )
m_pMainMenuPanel = new CMainMenu( NULL, NULL );
bRestartMainMenuVideo = m_pMainMenuPanel->IsVideoPlaying();
m_pMainMenuPanel->SetZPos( 500 );
 
m_pMainMenuPanel->SetVisible( false );
m_pMainMenuPanel = new CMainMenu( NULL, NULL );
if (bRestartMainMenuVideo)
m_pMainMenuPanel->SetZPos( 500 );
m_pMainMenuPanel->StartVideo();
m_pMainMenuPanel->SetVisible( false );
 
if ( bRestartMainMenuVideo )
m_pMainMenuPanel->StartVideo();
</source>
</source>


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


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


//-----------------------------------------------------------------------------
// Purpose:
//-----------------------------------------------------------------------------
void CBaseViewport::StopMainMenuVideo()
void CBaseViewport::StopMainMenuVideo()
{
{
if (m_pMainMenuPanel)
if ( m_pMainMenuPanel )
m_pMainMenuPanel->StopVideo();
m_pMainMenuPanel->StopVideo();
}
}
Line 100: Line 108:
Now head over to '''baseviewport.h''', add these:
Now head over to '''baseviewport.h''', add these:
<source lang="cpp">
<source lang="cpp">
void StartMainMenuVideo();
void StartMainMenuVideo();
void StopMainMenuVideo();
void StopMainMenuVideo();
</source>
</source>


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


Line 112: Line 120:
<source lang="cpp">
<source lang="cpp">
private:
private:
class CMainMenu* m_pMainMenuPanel;
class CMainMenu *m_pMainMenuPanel;
</source>
</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>):
<source lang="cpp">
<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 );
Line 124: Line 132:


=== The Bink File ===
=== The Bink File ===
Now that you're done with the implementation, you'll need a .bik file to play as your background.
 
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 130: 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 Chapter Images ===
=== 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:
You might notice that your chapter images are all white now, this can be fixed by adding this to your chapter's VMT file:
<pre>
<source lang=text>
"$ignorez" "1"
        "$ignorez" "1"
</pre>
</source>


Example of working VMT chapter file:
Example of working VMT chapter file:
<pre>
<source lang=text highlight=7>
"UnlitGeneric"
"UnlitGeneric"
{
{
Line 148: Line 158:
         "$ignorez"        "1"
         "$ignorez"        "1"
}
}
</pre>
</source>


<gallery caption="Left: $ignorez 0 | Right: $ignorez 1" widths="600" heights="318px" perrow="2" mode="packed">
<gallery caption="Left: $ignorez 0 | Right: $ignorez 1" widths="600" heights="318px" perrow="2" mode="packed">
Line 159: 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 ==
Special thanks to Taz, OzxyBox, and Gocnak from the Source Modding Community for solving the problems this implementation was originally facing!
 
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!