Basic Hud Modification: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
No edit summary
 
m (Nesciuse moved page Basic Hud Modification/en to Basic Hud Modification without leaving a redirect: Move en subpage to basepage)
 
(24 intermediate revisions by 17 users not shown)
Line 1: Line 1:
[[Category:Programming]]
{{LanguageBar|title = Basic HUD Modification}}
==Info:==
This Tutorial was originally from [http://www.gneu.org/wiki/index.php?title=HL2:_Basic_Hud_Modification gneu.org] and moved here to combine all the tutorials into one location.


==Purpose:==
Change the HUD by adding a graphic


==Route:==
This tutorial shows you how to change the HUD by adding a graphic. Adding a graphic to the HUD isn't that difficult. However, it is recommended that you know your way around the [[Material Creation]] process.
Adding a graphic to the HUD wasn’t nearly as hard as I thought it would be.


Firstly, I recommend you read this
==Importing the HUD Material==


[http://www.valve-erc.com/srcsdk/Materials/materials_creation.html Materials Creation]
In general, adding graphics to the HUD follows the same procedure as adding any material to Source-based games, so create your graphic at your own discretion. The difference is that we are going to give [[Vtex (Source 1)|vtex]] some extra parameters in the <code>.txt</code> file accompanying the <code>.tga</code>.


It walks you through how to convert a targa (*.tga) file into a valve texture file (*.vtf) so that you can use it in game. Don’t worry for all of you, who skipped my link, I’m going to walk that part as well.
We will use the following setup as an example.


The possibilities are endless. You can have a graphic for anything, and it’s quite simple.
<pre>
 
"UnlitGeneric"
First things first, decide on an image you want to have in the game. The guidelines are
 
* The image has to be in targa format (*.tga)
* The targa has to be in 16, 24 or 32 bit depths
* The image has to be of a size multiplied by 2 up to 1024x1024
:( i.e. 16x16, 32x32, 64x128, 128x128, 128x256, 512x512, etc. )
 
 
Transparency is fine, as you can see below. You are going to be saving this file in the materialsrc directory of your SDK extraction naming it whatever you choose, under a directory named by where your graphic is going to go. Here’s mine:
 
'''.../materialsrc/HUD/import.tga'''
 
Now create a text file that will be used with a program called vtex to convert our targa into a valve texture file. its going to have a series of variables in it that will tell vtex how to work in order to create our file as we want. Save this in the same exact directory as the targa file, under the same name, replacing .tga with .txt. You should have two files in this directory like this
 
'''.../materialsrc/HUD/import.tga'''
'''.../materialsrc/HUD/import.txt'''
 
This is the one i used for the demo
 
<pre>"UnlitGeneric"
{
{
   "nomip" "1"
   "nomip" "1"
   "nocompress" "1"
   "nocompress" "1"
   "nolod" "1"
   "nolod" "1"
}</pre>
}
</pre>
 
In this case, we are telling vtex...


[http://www.valve-erc.com/srcsdk/Materials/materials_creation.html#CompileParams Vtex .TXT file compile parameters]
Some of the variables and definitions are
The parameters Vtex can parse and understand from the .TXT file are:
*'''$nolod'''
:Do not use lower quality versions of this texture in lower DirectX versions. Used for non-world graphics such as HUD art.
*'''$nomip'''
*'''$nomip'''
:Do not make mip-levels for this texture. This is used for materials like skyboxes and menu backgrounds.
:Do not make mip-levels for this texture. Simply because you will not be viewing the HUD from varying distances.
*'''$clamps'''
*'''$clampt'''
:Do not allow the texture to wrap in the S or T coordinate space, respectively. This is most often used for sprites that are not tiled.
*'''$skybox'''
:Used for compiling skyboxes. This assures the edges match between each facet.
*'''$startframe''' (integer)
*'''$endframe''' (integer)
:Used for animated textures. Textures must be named as texture000, texture001, texture002, etc. The $startframe defines the beginning frame and the $endframe defines the ending frame.
*'''$nocompress'''
*'''$nocompress'''
:Do not use compression on this texture. Useful for textures with fine gradation (like light halos).
:Do not use compression on this texture. This prevents artifacting in our graphic.
*'''$nonice'''
*'''$nolod'''
:Do not use NICE filtering on this texture’s lower mip-levels.
:Do not use lower quality versions of this texture in lower DirectX versions. This is obvious as the difference in performance is marginal.
*'''$dxt5'''
:Use DXT5 compression instead of full compression.[/list:u]
 
 
 
Now is when things get super fun.
 
once you have this text file with the appropriate variables turned on or off, you are now going to run a conversion utility called vtex.exe. It is hidden in your Source SDK binary directory.
 
'''.\steam\steamapps\swallowbush\sourcesdk\bin\vtex.exe'''
 
Now for some pre error solving; if you follow the next step you will most likely get an error. One thing that vtex cannot do is create directories. So we have to go into our game directory and add the various directories that we need for our material to work properly.
 
i had to add HUD because I had already been playing with the SDK’s materials earlier in time, but you might have to add them both. Feel free to just right click and create a new folder, but make sure you have HUD spelled the exact same way it is in the text file or you will have an error.
 
This is the file that will be converting our targa to a vtf file. Ease is always something i try to use to my advantage, so I opened up the SDK directory and windowed both of my directories.
 
All you have to do now is to drag one of the two files, this does not matter, onto vtex.exe and the conversion will be done.
 
vtex.exe converts the file and even copies the file into the directory that you gave it with the text file. Once it has finished we have to go over to our game directory and up to the materials directory. Here is where I am:
 
'''steam\steamapps\SourceMods\crap\materials\HUD'''
 
In here you will see a new file created. import.vtf! We are almost done, home stretch time. We have to create a new file, mine will be called import.vmt. This is going to be a text file as well, but the game is looking for a .vmt file. So let’s make that! You will want to have access to file extensions here. If you don’t know how to turn them on this is what you do
 
* Open an explorer window.
* Click on the "Tools" tab.
* Click on "Folder Options."
* Click on the "View" tab.
* Click on the check next to "Hide extensions for known file types" to remove it.
* Click "OK".


Create a new text file, and open it up. This is going to be very similar to the text file we created earlier.
Once you have the appropriate variables set up, we are now going to run vtex. It is recommended for clarity that you generate your graphics in the <code>/materials/HUD/</code> directory (if it does not exist, create it).


This is the one i used for my demo
For the <code>[[Material|.vmt]]</code>, we are going to use the following setup.


<pre>"UnlitGeneric"
<pre>
"UnlitGeneric"
{
{
       "$basetexture" "HUD/import"
       "$basetexture" "HUD/nameofyourgraphic"
       "$translucent"  "1"
       "$translucent"  "1"
       "$translucency" "1"
       "$translucency" "1"
       "$ignorez" "1"
       "$ignorez" "1"
}</pre>
}
</pre>


[http://www.valve-erc.com/srcsdk/Levels/performance_and_visibility.html#MaterialPerf VMT Info]
With the <code>.vmt</code> and hence the material completed, all that's left is to change the HUD and add a class. Let's start with the class.


[http://www.valve-erc.com/srcsdk/Materials/materials_creation#CreatingVMT Creating a .VMT File]
==Adding a HUD Element Class==


Once the .VTF file has been created, a .VMT file must be created to actually use the texture inside of the engine.
Open up your copy of MSVS. Do a search for <code>class CHud</code>. You should be able to cycle through a number of files. I recommend you keep all these stock and if you edit, back them up so you can keep them for reference.


The .VMT will define how the .VTF file is rendered to the screen. There are many shaders that can be used to render a texture. To begin with, we’ll use a simple shader: LightmappedGeneric. This shader is used for world surfaces that should receive lightmaps.
All we are trying to do is put a graphic on the screen. In Source, there is a function we have to call in order to get this to happen, called <code>paint</code>. We are going to need a variable to act as a place holder for our sprite so that we can call it in the game via the <code>paint</code> function. It would also be nice to be able to turn this on and off, so we are going to learn how to use cvars to control HUD elements in this way.


The simplest definition of this shader is:
Here is our example class definition.


<pre>"LightmappedGeneric"
<source lang="cpp">
{
#include "hudelement.h"
    "$basetexture" "test/MyTexture"
}</pre>
 
This will render the ”test/MyTexture” .VTF file opaquely and with lightmaps applied to it. This is most generally used for textures applied to brush surfaces (like walls). With a .VTF file and .VMT file created, we can use this texture inside of Hammer on surfaces.
 
One of the easiest methods of creating new .VMT files is to open an existing .VMT that has similar properties to the material you are creating. Edit the contents of the file and save it with a different name to create a new material.
 
With this file completed all that’s left is to change the HUD and add a class. Despite what some may believe, this is not very hard.
 
lets start with the class, open up your copy of MSVS.
 
do a search for "class CHud"
 
You should be able to cycle through a number of files. I recommend you keep all these stock and if you edit, back them up so you can keep them for reference.
 
Lets create our own. All we are trying to do is put a graphic on the screen. in hl2 there is a function we have to call in order to get this to happen, called paint. We are going to need a variable to act as a place holder for our sprite so that we can call it in the game via the paint function. It would also be nice to be able to turn this on and off, so I’m going to show you how to use cvars to control HUD elements in this way.
 
Here is my class definition
 
<pre>#include "hudelement.h"
#include <vgui_controls/Panel.h>
#include <vgui_controls/Panel.h>


Line 154: Line 70:
   virtual void Paint();
   virtual void Paint();
   int m_nImport;
   int m_nImport;
};</pre>
};
 
</source>
Drop that into '''hud_import.h'''.
 
The simpler you keep things now, the easier you will come to understanding this later if you have to alter your code.


Alright time to start defining these functions. Create a new .cpp file called hud_import.cpp.
Drop the above code into <code>hud_import.h</code>. Remember, the simpler you keep things now, the easier it will be to understand your code later if you have to alter it.


Here are the required includes/pre function statements (top of your cpp file)
Now, create a new <code>.cpp</code> file called <code>hud_import.cpp</code>. Here are the required includes and pre-function statements (top of your <code>.cpp</code> file):


<pre>#include "hud.h"
<source lang="cpp">
#include "hud.h"
#include "cbase.h"
#include "cbase.h"
#include "hud_import.h"
#include "hud_import.h"
Line 176: Line 90:
using namespace vgui;
using namespace vgui;


DECLARE_HUDELEMENT( CHudImport );</pre>
DECLARE_HUDELEMENT( CHudImport );
</source>


In order to kick this off we have to load the texture pointer variable. The best place for that is the constructor of the class.
In order to kick this off we have to load the texture pointer variable. The best place for that is the constructor of the class.


What we are going to do
What we are going to do:


* Get the viewport and parent it
* Get the viewport and parent it
* make it invisible, but its alpha 100%
* make it invisible, but with alpha 100%
* create a new texture id for our texture/sprite
* create a new texture id for our texture/sprite
* connect the id to the texture
* connect the id to the texture
* have it show only if you have the suit and if you arent dead
* have it show only if you have the suit and if you aren't dead


Here is what that looks like:
Here is how it's done.


<pre>CHudImport::CHudImport( const char *pElementName ) : CHudElement( pElementName ), BaseClass( NULL, "HudImport" )
<source lang="cpp">
CHudImport::CHudImport( const char *pElementName ) : CHudElement( pElementName ), BaseClass( NULL, "HudImport" )
{
{
   Panel *pParent = g_pClientMode->GetViewport();
   Panel *pParent = g_pClientMode->GetViewport();
Line 203: Line 119:


   SetHiddenBits( HIDEHUD_PLAYERDEAD | HIDEHUD_NEEDSUIT );
   SetHiddenBits( HIDEHUD_PLAYERDEAD | HIDEHUD_NEEDSUIT );
}</pre>
}
</source>


Alright, so our graphic starts out invisible and we have to paint it now. Let’s go on to the paint function. This one, although is simpler, has a very important part associated with sizing and spacing to deal with.
Our graphic starts out invisible, so we have to paint it now. Let's go on to the <code>paint</code> function. This one, although simpler, has a very important part associated with sizing and spacing to deal with.


<pre>void CHudImport::Paint()
<source lang="cpp">
void CHudImport::Paint()
{
{
   SetPaintBorderEnabled(false);
   SetPaintBorderEnabled(false);
     surface()->DrawSetTexture( m_nImport );
     surface()->DrawSetTexture( m_nImport );
   surface()->DrawTexturedRect( 2, 2, 128, 128 );
   surface()->DrawTexturedRect( 2, 2, 128, 128 );
}</pre>
}
</source>
 
First, we set the paint border to false. {{todo|Please, someone with HUD modification skills, explain here how the borders behave.}} Next we draw our texture onto our surface. The next line is the important part. You actually define where you put your panel and how large it is in your <code>HudLayout.res</code> file. This last statement is attached to the image itself. You set its values like this…


First we set the paint border to false, I didn’t play with this because i was trying to duplicate another class and it had false set here. I’m assuming its the stroke around the panel. Next we draw our texture onto our surface. The next line is the important part. You actually define where you put your panel and how large it is in your HudLayout.res file, this last statement is attached to the image itself. you set its values like this...
<source lang="cpp">
surface()->DrawTexturedRect( xspacing , yspacing, xsize, ysize );
</source>


surface()->DrawTexturedRect( xspacing , yspacing, xsize, ysize );
You would put your own values in there according to the size of your picture.


So you would put your own values in there according to the size of your picture.
There are two steps to go, our cvar toggle as well as editing the <code>HudLayout.res</code>.


Wow, that was easy and all that is necessary to get an image on the screen for the class. there are still two steps, our cvar toggle as well as the hudlayout.res editing. Neither of which are too complex.
==Defining the ConVar==


First let’s define the cvar. Go back up to the top of the cpp file and paste this:
First, let's define the cvar. Go back up to the top of the cpp file and paste this:


static ConVar show_beta("show_beta", "0", 0, "toggles beta icon in upper right corner");
<source lang="cpp">
static ConVar show_beta("show_beta", "0", 0, "toggles beta icon in upper right corner");
</source>


This is the variable name that I’m using. I’m actually creating the series of pictures on the second post.
<code>show_beta</code> is the variable name that we're using as an example. We're actually creating the series of pictures on the second post.


This variable will allow us to type show_beta 1 into the console.
This variable will allow us to type <code>show_beta 1</code> into the console.


But what will that do for us, we need a function to test it.
But what will that do for us, we need a function to test it.


<pre>void CHudImport::togglePrint()
<source lang="cpp">
void CHudImport::togglePrint()
{
{
   if (!show_beta.GetBool())
   if (!show_beta.GetBool())
Line 238: Line 164:
   else
   else
       this->SetVisible(true);
       this->SetVisible(true);
}</pre>
}
</source>


Not too complex, just is it 1 or not? And since its something that can happen at any time, we should put it into our think function so it is tested always.
Not too complex, just a traditional boolean status. And since its something that can change at any time, we should put it into our think function so it is tested always.


<pre>void CHudImport::OnThink()
<source lang="cpp">
void CHudImport::OnThink()
{
{
   togglePrint();
   togglePrint();


   BaseClass::OnThink();
   BaseClass::OnThink();
}</pre>
}
</source>


And that’s it. Start this one building and we will move onto our last file.
And that's it. Build, so we can move onto the .res.


Open up '''HudLayout.res''' and paste this
==Editing {{ent|HudLayout.res}}==


<pre>   HudImport
Open up <code>/scripts/HudLayout.res</code> under your mod's main directory and paste the following in it.
 
<pre>
    HudImport
   {
   {
       "fieldName" "HudImport"
       "fieldName" "HudImport"
Line 264: Line 196:
        
        
       "PaintBackgroundType"  "2"
       "PaintBackgroundType"  "2"
   }</pre>
   }
</pre>


There are a number of settings to choose from. For more information on VGUI schemes, you can read [[VGUI Documentation#Schemes]].


That’s it. There are a number of settings to choose from, but for the most part, this will do it.
Booting the game now, you should be looking at your HUD, with a graphic in the upper right corner of the screen drawn with rounded corners.


[http://www.valve-erc.com/srcsdk/VGUI2/vgui2.html Schemes & BuildMode]
'''Extra Information'''


A VGUI scheme defines the general "Look&Feel" of your panels by specifying used colors, fonts & icons of control elements. Schemes are defined in resource files, for example hl2\resource\clientscheme.res. A new panel inherits by default the scheme settings used by its parent. The VGUI scheme manager can load a new scheme with LoadSchemeFromFile(char *fileName, char *tag) which returns HScheme handle. To make a panel using a loaded VGUI scheme call the panel member function SetScheme(HScheme scheme).
If for some reason you want an '''animated''' Texture displaying in the top right hand corner like I Wanted, it is possible and can be achieved. Don't use VtfEdit because when I did it failed to work
Use the original method of VTEX. Basically in the text document accompanying the .tgas that you have animated you must specify the start and end frames like this


Schemes set the general look of panel elements, but they don’t arrange specific control elements of your panel. One way of adding elements to your panel is by doing that in source code. You can create them (usually in the constructor of the parent panel) and set properties like size and position manually using the panel member functions. This will become quite complex and time-consuming for larger dialogs with lots of control elements.
"startframe" "0"
"endframe" "7"


The most common way to define the layout of your panel elements is to describe all elements in an external resource file like "hl2\resource\UI \classmenu.res" (a KeyValues text file). When the parent panel is created, this file is loaded and executed with LoadControlSettings(char *dialogResourceName). In this resource file each control element is defined in a separate section. A typical control definition looks like this:
And call that .txt document the same as your .tgas and click and drag it over VTEX and let it work
(NOTE~ you must have the .txt file and .tgas in the materialsrc folder of your sourcesdkcontent/SOURCEMOD/ folder for VTEX to work)


<pre>"MyControlName"
(NOTE~ you can check that it works in VTFEDIT if you open it there and press play, but dont save it there!!!)
So when you have your Animated VTF working put it in your SourceMod /materials folder
Now create a vmt which is basically a Txt document
(you can make them in Notepad but make sure the extension is .vmt)
Paste the following code into your .vmt
 
<pre>
"UnlitGeneric"
{
{
   "ControlName"   "Label"     // control class
   "$basetexture" "'''hud/NameOfYourImage'''"
   "fieldName"  "MyControlName"   // name of the control element
   "$translucent"  "1"
   "xpos"     "8"      // x position
   "Proxies"
   "ypos"     "72"      // y position
   {
  "wide"      "160"      // width in pixels
      "AnimatedTexture"
  "tall"     "24"     // height in pixels
      {
  "visible"     "1"     // it’s visible
        "animatedtexturevar" "$basetexture"
  "enabled"     "1"      // and enabled
        "animatedtextureframenumvar" "$frame"
  "labelText"  "Hello world"  // show this text
        "animatedtextureframerate" 10
   "textAlignment"  "west"      // right text alignment
      }
}</pre>
   }
 
}
Each control property has a key name and a value. Properties defined by the base class Panel are available for all controls (like xpos, ypos, wide, tall etc). A list of all available key names is returned by the panel member function GetDescription(). Derived panel classes may add new fields for their specific properties. Processing these new fields must be handled by overwriting the virtual function ApplySettings(KeyValues *inResourceData). Here you can also lookup how values for an existing control property are interpreted.
</pre>
Above '''hud''' refers to the folder inside your materials folder the VTF is located and '''NameOfYourImage''' refers to the name of your VTF
(NOTE~ your vmt must be named exactly the same as your VTF e.g = image.vtf and image.vmt)
And that covers my explanation as to how to add animated textures to the hud ingame
Below please find a link of my animated devilsTrap.vtf inaction


Even simpler to use is the VGUI Build-Mode that allows you to modify and save the layout of a panel resource file while the application is running. To edit a panel, just start the game and open this panel, so it gets the input focus. Then press SHIFT+CTRL+ALT+B to open the VGUI Build-Mode editor. In Build-Mode you can easily rearrange existing elements and change their control properties (press ‘Apply’ to update changes). To add a new control element, just choose the desired class from the combo-box on the lower right side and an empty control object of that class will be place in your panel for further editing. To save the current layout in the associated resource file press the ‘Save’ button (make sure the resource file is not write-protected).
== External links ==
* [http://www.youtube.com/watch?v=q0eXn7nwuGI Youtube Tutorial part 1]
* [http://www.youtube.com/watch?v=vCK-Zb80HNw&feature=channel Youtube Tutorial part 2]
* [http://www.youtube.com/watch?v=2sH0ekGDyBw&feature=channel Youtube Tutorial part 3]
* [http://www.youtube.com/watch?v=mSy3RfJZbIE Youtube clip of the hud modification in action]
* [http://www.gneu.org/wiki/index.php?title=HL2:_Basic_Hud_Modification gneu.org]


You are now looking at your HUD, with a graphic in the upper right corner of the screen drawn with rounded corners
[[Category:VGUI]]
[[Category:HUD]]
[[Category:Tutorials]]

Latest revision as of 05:07, 12 July 2024

English (en)Русский (ru)中文 (zh)Translate (Translate)


This tutorial shows you how to change the HUD by adding a graphic. Adding a graphic to the HUD isn't that difficult. However, it is recommended that you know your way around the Material Creation process.

Importing the HUD Material

In general, adding graphics to the HUD follows the same procedure as adding any material to Source-based games, so create your graphic at your own discretion. The difference is that we are going to give vtex some extra parameters in the .txt file accompanying the .tga.

We will use the following setup as an example. 

"UnlitGeneric"
{
   "nomip" "1"
   "nocompress" "1"
   "nolod" "1"
}

In this case, we are telling vtex...

  • $nomip
Do not make mip-levels for this texture. Simply because you will not be viewing the HUD from varying distances.
  • $nocompress
Do not use compression on this texture. This prevents artifacting in our graphic.
  • $nolod
Do not use lower quality versions of this texture in lower DirectX versions. This is obvious as the difference in performance is marginal.

Once you have the appropriate variables set up, we are now going to run vtex. It is recommended for clarity that you generate your graphics in the /materials/HUD/ directory (if it does not exist, create it).

For the .vmt, we are going to use the following setup. 

"UnlitGeneric"
{
      "$basetexture" "HUD/nameofyourgraphic"
      "$translucent"   "1"
      "$translucency" "1"
      "$ignorez" "1"
}

With the .vmt and hence the material completed, all that's left is to change the HUD and add a class. Let's start with the class.

Adding a HUD Element Class

Open up your copy of MSVS. Do a search for class CHud. You should be able to cycle through a number of files. I recommend you keep all these stock and if you edit, back them up so you can keep them for reference.

All we are trying to do is put a graphic on the screen. In Source, there is a function we have to call in order to get this to happen, called paint. We are going to need a variable to act as a place holder for our sprite so that we can call it in the game via the paint function. It would also be nice to be able to turn this on and off, so we are going to learn how to use cvars to control HUD elements in this way.

Here is our example class definition. 

#include "hudelement.h"
#include <vgui_controls/Panel.h>

using namespace vgui;

class CHudImport : public CHudElement, public Panel
{
   DECLARE_CLASS_SIMPLE( CHudImport, Panel );

   public:
   CHudImport( const char *pElementName );
   void togglePrint();
   virtual void OnThink();

   protected:
   virtual void Paint();
   int m_nImport;
};

Drop the above code into hud_import.h. Remember, the simpler you keep things now, the easier it will be to understand your code later if you have to alter it.

Now, create a new .cpp file called hud_import.cpp. Here are the required includes and pre-function statements (top of your .cpp file): 

#include "hud.h"
#include "cbase.h"
#include "hud_import.h"
#include "iclientmode.h"
#include "hud_macros.h"
#include "vgui_controls/controls.h"
#include "vgui/ISurface.h"

#include "tier0/memdbgon.h"

using namespace vgui;

DECLARE_HUDELEMENT( CHudImport );

In order to kick this off we have to load the texture pointer variable. The best place for that is the constructor of the class.

What we are going to do:

  • Get the viewport and parent it
  • make it invisible, but with alpha 100%
  • create a new texture id for our texture/sprite
  • connect the id to the texture
  • have it show only if you have the suit and if you aren't dead

Here is how it's done. 

CHudImport::CHudImport( const char *pElementName ) : CHudElement( pElementName ), BaseClass( NULL, "HudImport" )
{
   Panel *pParent = g_pClientMode->GetViewport();
   SetParent( pParent );   
   
   SetVisible( false );
   SetAlpha( 255 );

   //AW Create Texture for Looking around
   m_nImport = surface()->CreateNewTextureID();
   surface()->DrawSetTextureFile( m_nImport, "HUD/import" , true, true);

   SetHiddenBits( HIDEHUD_PLAYERDEAD | HIDEHUD_NEEDSUIT );
}

Our graphic starts out invisible, so we have to paint it now. Let's go on to the paint function. This one, although simpler, has a very important part associated with sizing and spacing to deal with. 

void CHudImport::Paint()
{
   SetPaintBorderEnabled(false);
    surface()->DrawSetTexture( m_nImport );
   surface()->DrawTexturedRect( 2, 2, 128, 128 );
}

First, we set the paint border to false.

Todo: Please, someone with HUD modification skills, explain here how the borders behave.

Next we draw our texture onto our surface. The next line is the important part. You actually define where you put your panel and how large it is in your HudLayout.res file. This last statement is attached to the image itself. You set its values like this… 

surface()->DrawTexturedRect( xspacing , yspacing, xsize, ysize );

You would put your own values in there according to the size of your picture.

There are two steps to go, our cvar toggle as well as editing the HudLayout.res.

Defining the ConVar

First, let's define the cvar. Go back up to the top of the cpp file and paste this: 

static ConVar show_beta("show_beta", "0", 0, "toggles beta icon in upper right corner");

show_beta is the variable name that we're using as an example. We're actually creating the series of pictures on the second post.

This variable will allow us to type show_beta 1 into the console.

But what will that do for us, we need a function to test it. 

void CHudImport::togglePrint()
{
   if (!show_beta.GetBool())
      this->SetVisible(false);
   else
      this->SetVisible(true);
}

Not too complex, just a traditional boolean status. And since its something that can change at any time, we should put it into our think function so it is tested always. 

void CHudImport::OnThink()
{
   togglePrint();

   BaseClass::OnThink();
}

And that's it. Build, so we can move onto the .res.

Editing HudLayout.res

Open up /scripts/HudLayout.res under your mod's main directory and paste the following in it. 

    HudImport
   {
      "fieldName" "HudImport"
      "xpos" "r86"
      "ypos" "6"
      "wide" "80"
      "tall" "34"
      "visible" "0"
      "enabled" "1"
      
      "PaintBackgroundType"   "2"
   }

There are a number of settings to choose from. For more information on VGUI schemes, you can read VGUI Documentation#Schemes.

Booting the game now, you should be looking at your HUD, with a graphic in the upper right corner of the screen drawn with rounded corners.

Extra Information

If for some reason you want an animated Texture displaying in the top right hand corner like I Wanted, it is possible and can be achieved. Don't use VtfEdit because when I did it failed to work Use the original method of VTEX. Basically in the text document accompanying the .tgas that you have animated you must specify the start and end frames like this

"startframe" "0" "endframe" "7"

And call that .txt document the same as your .tgas and click and drag it over VTEX and let it work (NOTE~ you must have the .txt file and .tgas in the materialsrc folder of your sourcesdkcontent/SOURCEMOD/ folder for VTEX to work)

(NOTE~ you can check that it works in VTFEDIT if you open it there and press play, but dont save it there!!!) So when you have your Animated VTF working put it in your SourceMod /materials folder Now create a vmt which is basically a Txt document (you can make them in Notepad but make sure the extension is .vmt) Paste the following code into your .vmt 

"UnlitGeneric"
{
   "$basetexture" "'''hud/NameOfYourImage'''"
   "$translucent"   "1"
   "Proxies"
   {
      "AnimatedTexture"
      {
         "animatedtexturevar" "$basetexture"
         "animatedtextureframenumvar" "$frame"
         "animatedtextureframerate" 10
      }
   }
}

Above hud refers to the folder inside your materials folder the VTF is located and NameOfYourImage refers to the name of your VTF (NOTE~ your vmt must be named exactly the same as your VTF e.g = image.vtf and image.vmt) And that covers my explanation as to how to add animated textures to the hud ingame Below please find a link of my animated devilsTrap.vtf inaction

External links

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