Zh/Basic Hud Modification: Difference between revisions

From Valve Developer Community
< Zh
Jump to navigation Jump to search
No edit summary
(deepseek translation)
 
Line 1: Line 1:
{{wip}}{{translating}}
{{Machine Translation}}
{{LanguageBar|title = Basic HUD Modification}}
{{LanguageBar|title=基础HUD修改}}


本教程将展示如何通过添加图形来修改HUD。虽然为HUD添加图形并不困难，但建议您熟悉{{L|Material Creation|材质创建}}流程。


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 {{L|Material Creation}} process.
==导入HUD材质==


==Importing the HUD Material==
一般来说，为HUD添加图形与在Source引擎游戏中添加材质的流程相同。不同之处在于我们需要在<code>.tga</code>文件附带的<code>.txt</code>文件中为{{L|Vtex (Source 1)|vtex}}提供额外参数。
 
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 {{L|Vtex (Source 1)|vtex}} some extra parameters in the <code>.txt</code> file accompanying the <code>.tga</code>.
 
We will use the following setup as an example.


以下是一个配置示例：
<pre>
<pre>
"UnlitGeneric"
"UnlitGeneric"
Line 19: Line 17:
}
}
</pre>
</pre>
 
此处我们通过参数告诉vtex：
In this case, we are telling vtex...
 
*'''$nomip'''
*'''$nomip'''
:Do not make mip-levels for this texture. Simply because you will not be viewing the HUD from varying distances.
: 不生成mipmap层级，因为HUD不需要多级细节
*'''$nocompress'''
*'''$nocompress'''
:Do not use compression on this texture. This prevents artifacting in our graphic.
: 禁用纹理压缩，防止图形出现伪影
*'''$nolod'''
*'''$nolod'''
:Do not use lower quality versions of this texture in lower DirectX versions. This is obvious as the difference in performance is marginal.
: 在低版本DirectX中不使用低质量纹理，性能影响可忽略
 
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).


For the <code>{{L|Material|.vmt}}</code>, we are going to use the following setup.
配置完成后运行vtex工具。建议将生成的图形放在<code>/materials/HUD/</code>目录（不存在则需创建）。


{{L|Material|.vmt}}文件配置示例：
<pre>
<pre>
"UnlitGeneric"
"UnlitGeneric"
{
{
       "$basetexture" "HUD/nameofyourgraphic"
       "$basetexture" "HUD/你的图形名称"
       "$translucent"  "1"
       "$translucent"  "1"
       "$translucency" "1"
       "$translucency" "1"
Line 43: Line 38:
</pre>
</pre>


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.
==添加HUD元素类==
 
==Adding a HUD Element Class==


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.
在Visual Studio中搜索<code>class CHud</code>，建议备份原始文件。我们需要通过<code>paint</code>函数绘制图形，并使用ConVar控制显示状态。
 
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.
 
Here is our example class definition.


类定义示例：
<source lang="cpp">
<source lang="cpp">
#include "hudelement.h"
#include "hudelement.h"
Line 74: Line 64:
</source>
</source>


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.
在<code>hud_import.cpp</code>中：
 
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):
 
<source lang="cpp">
<source lang="cpp">
#include "hud.h"
#include "hud.h"
Line 94: Line 81:
</source>
</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.
构造函数实现：
 
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.
 
<source lang="cpp">
<source lang="cpp">
CHudImport::CHudImport( const char *pElementName ) : CHudElement( pElementName ), BaseClass( NULL, "HudImport" )
CHudImport::CHudImport( const char *pElementName ) : CHudElement( pElementName ), BaseClass( NULL, "HudImport" )
Line 115: Line 91:
   SetAlpha( 255 );
   SetAlpha( 255 );


   //AW Create Texture for Looking around
   // 创建纹理
   m_nImport = surface()->CreateNewTextureID();
   m_nImport = surface()->CreateNewTextureID();
   surface()->DrawSetTextureFile( m_nImport, "HUD/import" , true, true);
   surface()->DrawSetTextureFile( m_nImport, "HUD/import" , true, true);
Line 123: Line 99:
</source>
</source>


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.
绘制函数：
 
<source lang="cpp">
<source lang="cpp">
void CHudImport::Paint()
void CHudImport::Paint()
Line 133: Line 108:
}
}
</source>
</source>
{{todo|请熟悉HUD修改的开发者补充说明边框处理机制}}


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…
==定义ConVar==


在cpp文件顶部添加：
<source lang="cpp">
<source lang="cpp">
surface()->DrawTexturedRect( xspacing , yspacing, xsize, ysize );
static ConVar show_beta("show_beta", "0", 0, "在右上角切换测试版图标显示");
</source>
</source>


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>.
 
==Defining the ConVar==
 
First, let's define the cvar. Go back up to the top of the cpp file and paste this:
 
<source lang="cpp">
static ConVar show_beta("show_beta", "0", 0, "toggles beta icon in upper right corner");
</source>
 
<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 <code>show_beta 1</code> into the console.
 
But what will that do for us, we need a function to test it.
 
<source lang="cpp">
<source lang="cpp">
void CHudImport::togglePrint()
void CHudImport::togglePrint()
Line 166: Line 126:
       this->SetVisible(true);
       this->SetVisible(true);
}
}
</source>
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.


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


And that's it. Build, so we can move onto the .res.
==编辑{{ent|HudLayout.res}}==
 
==Editing {{ent|HudLayout.res}}==
 
Open up <code>/scripts/HudLayout.res</code> under your mod's main directory and paste the following in it.


在mod目录的<code>/scripts/HudLayout.res</code>中添加：
<pre>
<pre>
     HudImport
     HudImport
Line 195: Line 147:
       "visible" "0"
       "visible" "0"
       "enabled" "1"
       "enabled" "1"
     
       "PaintBackgroundType"  "2"
       "PaintBackgroundType"  "2"
   }
   }
</pre>
</pre>
更多VGUI方案信息请参考{{L|VGUI Documentation#Schemes|VGUI文档}}。


There are a number of settings to choose from. For more information on VGUI schemes, you can read {{L|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


若要实现动画效果，在材质配置文件中添加：
<pre>
<pre>
"UnlitGeneric"
"UnlitGeneric"
{
{
   "$basetexture" "'''hud/NameOfYourImage'''"
   "$basetexture" "hud/你的动画名称"
   "$translucent"  "1"
   "$translucent"  "1"
   "Proxies"
   "Proxies"
Line 237: Line 171:
}
}
</pre>
</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)
1. 使用VTEX工具处理序列帧（配置"startframe"/"endframe"）
And that covers my explanation as to how to add animated textures to the hud ingame
2. 确保.txt文件与.tga序列位于materialsrc目录
Below please find a link of my animated devilsTrap.vtf inaction
3. .vmt必须与.vtf同名


== External links ==
== 外部链接 ==
* [http://www.youtube.com/watch?v=q0eXn7nwuGI Youtube Tutorial part 1]
* [http://www.youtube.com/watch?v=q0eXn7nwuGI YouTube教程第一部分]
* [http://www.youtube.com/watch?v=vCK-Zb80HNw&feature=channel Youtube Tutorial part 2]
* [http://www.youtube.com/watch?v=vCK-Zb80HNw&feature=channel YouTube教程第二部分]
* [http://www.youtube.com/watch?v=2sH0ekGDyBw&feature=channel Youtube Tutorial part 3]
* [http://www.youtube.com/watch?v=2sH0ekGDyBw&feature=channel YouTube教程第三部分]
* [http://www.youtube.com/watch?v=mSy3RfJZbIE Youtube clip of the hud modification in action]
* [http://www.youtube.com/watch?v=mSy3RfJZbIE HUD修改效果演示]
* [http://www.gneu.org/wiki/index.php?title=HL2:_Basic_Hud_Modification gneu.org]
* [http://www.gneu.org/wiki/index.php?title=HL2:_Basic_Hud_Modification gneu.org文档]


{{ACategory|VGUI}}
{{ACategory|VGUI}}
{{ACategory|HUD}}
{{ACategory|HUD}}
{{ACategory|Tutorials}}
{{ACategory|Tutorials}}

Latest revision as of 05:39, 23 April 2025

Info content.png
This page is Machine translated
It is not recommended to use machine translation without any corrections.
If the article is not corrected in the long term, it will be removed.
Also, please make sure the article complies with the alternate languages guide.(en)
English (en)Русский (ru)中文 (zh)Translate (Translate)

本教程将展示如何通过添加图形来修改HUD。虽然为HUD添加图形并不困难，但建议您熟悉材质创建(en)流程。

导入HUD材质

一般来说，为HUD添加图形与在Source引擎游戏中添加材质的流程相同。不同之处在于我们需要在.tga文件附带的.txt文件中为vtex(en)提供额外参数。

以下是一个配置示例： 

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

此处我们通过参数告诉vtex：

  • $nomip
不生成mipmap层级，因为HUD不需要多级细节
  • $nocompress
禁用纹理压缩，防止图形出现伪影
  • $nolod
在低版本DirectX中不使用低质量纹理，性能影响可忽略

配置完成后运行vtex工具。建议将生成的图形放在/materials/HUD/目录（不存在则需创建）。

.vmt(en)文件配置示例： 

"UnlitGeneric"
{
      "$basetexture" "HUD/你的图形名称"
      "$translucent"   "1"
      "$translucency" "1"
      "$ignorez" "1"
}

添加HUD元素类

在Visual Studio中搜索class CHud，建议备份原始文件。我们需要通过paint函数绘制图形，并使用ConVar控制显示状态。

类定义示例： 

#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;
};

在hud_import.cpp中： 

#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 );

构造函数实现： 

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

   // 创建纹理
   m_nImport = surface()->CreateNewTextureID();
   surface()->DrawSetTextureFile( m_nImport, "HUD/import" , true, true);

   SetHiddenBits( HIDEHUD_PLAYERDEAD | HIDEHUD_NEEDSUIT );
}

绘制函数： 

void CHudImport::Paint()
{
   SetPaintBorderEnabled(false);
    surface()->DrawSetTexture( m_nImport );
   surface()->DrawTexturedRect( 2, 2, 128, 128 );
}
待完善: 请熟悉HUD修改的开发者补充说明边框处理机制

定义ConVar

在cpp文件顶部添加： 

static ConVar show_beta("show_beta", "0", 0, "在右上角切换测试版图标显示");

可见性控制函数： 

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

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

编辑HudLayout.res

在mod目录的/scripts/HudLayout.res中添加： 

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

更多VGUI方案信息请参考VGUI文档(en)。

动画纹理实现

若要实现动画效果，在材质配置文件中添加： 

"UnlitGeneric"
{
   "$basetexture" "hud/你的动画名称"
   "$translucent"   "1"
   "Proxies"
   {
      "AnimatedTexture"
      {
         "animatedtexturevar" "$basetexture"
         "animatedtextureframenumvar" "$frame"
         "animatedtextureframerate" 10
      }
   }
}

注意事项： 1. 使用VTEX工具处理序列帧（配置"startframe"/"endframe"） 2. 确保.txt文件与.tga序列位于materialsrc目录 3. .vmt必须与.vtf同名

外部链接

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