Ru/Basic Hud Modification: Difference between revisions

From Valve Developer Community
< Ru
Jump to navigation Jump to search
(Created page with "{{otherlang2 |title=Basic Hud Modification |en=Basic_Hud_Modification }} This tutorial shows you how to change the HUD by adding a graphic. Adding a graphic to the HUD isn't t...")
 
No edit summary
Line 1: Line 1:
{{otherlang2
{{otherlang2
|title=Basic Hud Modification
|title=Основные HUD Модификации
|en=Basic_Hud_Modification
|en=Basic_Hud_Modification
}}
}}
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.
Из этого туториала Вы узнаете, как изменить HUD, добавив графику. Добавить графику в HUD не так уж и сложно. Тем не менее, рекомендуется хорошо разбираться в процессе [[Material Creation]].


==Importing the HUD material==
==Импорт материала HUD==


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 <code>.txt</code> file accompanying the <code>.tga</code>.
В общем, добавление графики в HUD происходит по той же процедуре, что и добавление любого материала в игры на основе исходного кода, поэтому создавайте свою графику по своему усмотрению. Разница в том, что мы собираемся предоставить [[vtex]] некоторые дополнительные параметры в файле <code>.txt</code>, сопровождающем <code>.tga</code>.


We will use the following setup as an example.
Мы будем использовать следующую настройку в качестве примера.


<pre>
<pre>
Line 20: Line 20:
</pre>
</pre>


In this case, we are telling vtex...
В этом случае мы говорим vtex...


*'''$nomip'''
*'''$nomip'''
:Do not make mip-levels for this texture. Simply because you will not be viewing the HUD from varying distances.
:Не делайте мип-уровни для этой текстуры. Просто потому, что вы не будете смотреть на 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).
После того, как вы настроили соответствующие переменные, мы теперь собираемся запустить vtex. Для наглядности рекомендуется создавать графику в каталоге <code>/materials/HUD/</code> (если он не существует, создайте его).


For the <code>.[[VMT]]</code>, we are going to use the following setup.
Для <code>.[[VMT]]</code> мы собираемся использовать следующую настройку.


<pre>
<pre>
Line 43: Line 43:
</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.
С <code>.vmt</code> и, следовательно, с завершенным материалом, остается только изменить HUD и добавить класс. Начнем с класса.


==Adding a HUD element class==
==Добавление класса элемента HUD==


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.
Откройте свою копию MSVS. Выполните поиск по запросу <code>class CHud</code>. У вас должна быть возможность циклически перемещаться по нескольким файлам. Я рекомендую вам сохранить все эти материалы, а если вы редактируете, сделайте резервную копию, чтобы вы могли использовать их для справки.


All we are trying to do is put a graphic on the screen. In Half-Life 2 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.
Все, что мы пытаемся сделать, это поместить графику на экран. В Half-Life 2 есть функция, которую мы должны вызвать, чтобы это произошло, под названием <code>paint</code>. Нам понадобится переменная, которая будет использоваться в качестве заполнителя для нашего спрайта, чтобы мы могли вызывать ее в игре с помощью функции <code>paint</code>. Также было бы неплохо иметь возможность включать и выключать это, поэтому мы собираемся узнать, как использовать переменные для управления элементами HUD таким образом.


Here is our example class definition.
Вот наш пример определения класса.


<source lang="cpp">
<source lang="cpp">
Line 74: Line 74:
</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.h</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):
Теперь создайте новый файл <code>.cp </code> с именем <code>hud_import.cpp</code>. Вот необходимые инструкции include и pre-function (вверху вашего файла <code>.cpp</code>):


<source lang="cpp">
<source lang="cpp">
Line 94: Line 94:
</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%
* сделать невидимым, но с альфа 100%
* create a new texture id for our texture/sprite
* создать новый идентификатор текстуры для нашей текстуры/спрайта
* connect the id to the texture
* подключить id к текстуре
* 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">
Line 123: Line 123:
</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.
Наша графика изначально невидима, поэтому нам нужно ее раскрасить. Перейдем к функции <code>paint</code>. Этот, хотя и проще, имеет очень важную часть, связанную с размером и интервалом, с которой нужно иметь дело.


<source lang="cpp">
<source lang="cpp">
Line 134: Line 134:
</source>
</source>


First, we set the paint border to false. <!-- 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...
Во-первых, мы устанавливаем для границы рисования значение false. <! - Пожалуйста, кто-нибудь со навыками модификации HUD, объясните здесь, как ведут себя бордюры. -> Затем мы рисуем нашу текстуру на нашей поверхности. Следующая строка - важная часть. Фактически вы определяете, где разместить панель и насколько она велика, в файле <code>HudLayout.res</code>. Это последнее утверждение прикреплено к самому изображению. Вы устанавливаете его значения следующим образом...


<source lang="cpp">
<source lang="cpp">
Line 144: Line 144:
There are two steps to go, our cvar toggle as well as editing the <code>HudLayout.res</code>.
There are two steps to go, our cvar toggle as well as editing the <code>HudLayout.res</code>.


==Defining the ConVar==
== Определение ConVar ==


First, let's define the cvar. Go back up to the top of the cpp file and paste this:
Во-первых, давайте определим переменную. Вернитесь к началу файла cpp и вставьте это:


<source lang="cpp">
<source lang="cpp">
Line 152: Line 152:
</source>
</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.
<code>show_beta</code> это имя переменной, которую мы используем в качестве примера. Фактически мы создаем серию картинок для второго поста.


This variable will allow us to type <code>show_beta 1</code> into the console.
Эта переменная позволит нам ввести в консоль <code>show_beta 1</code>.
 
Но что это даст нам? Нам нужна функция, чтобы это проверить.
But what will that do for us, we need a function to test it.


<source lang="cpp">
<source lang="cpp">
Line 168: Line 167:
</source>
</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.
Не слишком сложный, просто традиционный логический статус. А поскольку это что-то, что может измениться в любой момент, мы должны поместить это в нашу функцию think, чтобы она всегда проверялась.


<source lang="cpp">
<source lang="cpp">
Line 179: Line 178:
</source>
</source>


And that's it. Build, so we can move onto the .res.
Вот и все. Постройте проект, чтобы мы могли перейти на .res.


==Editing [[HudLayout.res]]==
==Редактирование [[HudLayout.res]]==


Open up <code>/scripts/HudLayout.res</code> under your mod's main directory and paste the following in it.
Откройте <code>/scripts/HudLayout.res</code> в основном каталоге вашего мода и вставьте в него следующее.


<pre>
<pre>
Line 200: Line 199:
</pre>
</pre>


There are a number of settings to choose from. For more information on VGUI schemes, you can read [[VGUI Documentation#Schemes]].
Есть несколько настроек на выбор. Для получения дополнительной информации о схемах VGUI вы можете прочитать [[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.
Теперь, загружая игру, вы должны смотреть на свой HUD с изображением в правом верхнем углу экрана с закругленными углами..


'''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
Если по какой-то причине вы хотите, чтобы в правом верхнем углу отображалась '''animated''' Текстура, как я хотел, это возможно и может быть достигнуто. Не используйте VtfEdit, потому что когда я это делал, он не работал
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
Используйте оригинальный метод VTEX. Обычно в текстовом документе, сопровождающем анимированный файл .tgas, вы должны указать начальный и конечный кадры, как это


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


And call that .txt document the same as your .tgas and click and drag it over VTEX and let it work
И назовите этот документ .txt так же, как ваш .tgas, щелкните и перетащите его через VTEX и дайте ему поработать.
(NOTE~ you must have the .txt file and .tgas in the materialsrc folder of your sourcesdkcontent/SOURCEMOD/ folder for VTEX to work)
(ПРИМЕЧАНИЕ~ у вас должны быть файлы .txt и .tgas в папке materialsrc вашей папки sourcesdkcontent/SOURCEMOD/для работы VTEX)


(NOTE~ you can check that it works in VTFEDIT if you open it there and press play, but dont save it there!!!)
(ПРИМЕЧАНИЕ~ вы можете проверить, что он работает в VTFEDIT, если вы откроете его там и нажмете кнопку воспроизведения, но не сохраняйте его там !!!)
So when you have your Animated VTF working put it in your SourceMod /materials folder
Итак, когда у вас есть анимированный VTF, поместите его в папку SourceMod/materials.
Now create a vmt which is basically a Txt document
Теперь создайте vmt, который в основном является документом Txt.
(you can make them in Notepad but make sure the extension is .vmt)
(вы можете сделать их в Блокноте, но убедитесь, что расширение - .vmt)
Paste the following code into your .vmt
Вставьте следующий код в свой .vmt


<pre>
<pre>
Line 237: Line 236:
}
}
</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
Выше '' 'hud' '' относится к папке внутри вашей папки материалов, в которой находится VTF, а '' 'NameOfYourImage' '' относится к имени вашего VTF.
(NOTE~ your vmt must be named exactly the same as your VTF e.g = image.vtf and image.vmt)
(ПРИМЕЧАНИЕ ~ ваш vmt должен называться точно так же, как ваш VTF, например = image.vtf и image.vmt)
And that covers my explanation as to how to add animated textures to the hud ingame
И это покрывает мое объяснение того, как добавлять анимированные текстуры в hud в игре.
Below please find a link of my animated devilsTrap.vtf inaction
Ниже приведена ссылка на мое бездействие с анимированными devilsTrap.vtf.


== External links ==
== Внешние ссылки ==
* [http://www.youtube.com/watch?v=q0eXn7nwuGI Youtube Tutorial part 1]
* [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=vCK-Zb80HNw&feature=channel Youtube Tutorial part 2]

Revision as of 05:56, 20 June 2021

Template:Otherlang2 Из этого туториала Вы узнаете, как изменить HUD, добавив графику. Добавить графику в HUD не так уж и сложно. Тем не менее, рекомендуется хорошо разбираться в процессе Material Creation.

Импорт материала HUD

В общем, добавление графики в HUD происходит по той же процедуре, что и добавление любого материала в игры на основе исходного кода, поэтому создавайте свою графику по своему усмотрению. Разница в том, что мы собираемся предоставить vtex некоторые дополнительные параметры в файле .txt, сопровождающем .tga.

Мы будем использовать следующую настройку в качестве примера. 

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

В этом случае мы говорим vtex...

  • $nomip
Не делайте мип-уровни для этой текстуры. Просто потому, что вы не будете смотреть на HUD с разных расстояний.
  • $nocompress
Не используйте сжатие для этой текстуры. Это предотвращает появление артефактов на нашей графике.
  • $nolod
Не используйте более низкокачественные версии этой текстуры в более низких версиях DirectX. Это очевидно, поскольку разница в производительности незначительна.

После того, как вы настроили соответствующие переменные, мы теперь собираемся запустить vtex. Для наглядности рекомендуется создавать графику в каталоге /materials/HUD/ (если он не существует, создайте его).

Для .VMT мы собираемся использовать следующую настройку. 

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

С .vmt и, следовательно, с завершенным материалом, остается только изменить HUD и добавить класс. Начнем с класса.

Добавление класса элемента HUD

Откройте свою копию MSVS. Выполните поиск по запросу class CHud. У вас должна быть возможность циклически перемещаться по нескольким файлам. Я рекомендую вам сохранить все эти материалы, а если вы редактируете, сделайте резервную копию, чтобы вы могли использовать их для справки.

Все, что мы пытаемся сделать, это поместить графику на экран. В Half-Life 2 есть функция, которую мы должны вызвать, чтобы это произошло, под названием paint. Нам понадобится переменная, которая будет использоваться в качестве заполнителя для нашего спрайта, чтобы мы могли вызывать ее в игре с помощью функции paint. Также было бы неплохо иметь возможность включать и выключать это, поэтому мы собираемся узнать, как использовать переменные для управления элементами HUD таким образом.

Вот наш пример определения класса. 

#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.h. Помните, что чем проще вы сохраните вещи сейчас, тем легче будет понять ваш код позже, если вам придется его изменить.

Теперь создайте новый файл .cp с именем hud_import.cpp. Вот необходимые инструкции include и pre-function (вверху вашего файла .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 );

Чтобы начать это, мы должны загрузить переменную указателя текстуры. Лучшее место для этого - конструктор класса.

Что будем делать:

  • Получите область просмотра и сделайте ее родительской
  • сделать невидимым, но с альфа 100%
  • создать новый идентификатор текстуры для нашей текстуры/спрайта
  • подключить id к текстуре
  • показать это только в том случае, если у вас есть костюм и вы не умерли

Вот как это делается. 

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

Наша графика изначально невидима, поэтому нам нужно ее раскрасить. Перейдем к функции paint. Этот, хотя и проще, имеет очень важную часть, связанную с размером и интервалом, с которой нужно иметь дело. 

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

Во-первых, мы устанавливаем для границы рисования значение false. <! - Пожалуйста, кто-нибудь со навыками модификации HUD, объясните здесь, как ведут себя бордюры. -> Затем мы рисуем нашу текстуру на нашей поверхности. Следующая строка - важная часть. Фактически вы определяете, где разместить панель и насколько она велика, в файле HudLayout.res. Это последнее утверждение прикреплено к самому изображению. Вы устанавливаете его значения следующим образом... 

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.

Определение ConVar

Во-первых, давайте определим переменную. Вернитесь к началу файла cpp и вставьте это: 

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

show_beta это имя переменной, которую мы используем в качестве примера. Фактически мы создаем серию картинок для второго поста.

Эта переменная позволит нам ввести в консоль show_beta 1. Но что это даст нам? Нам нужна функция, чтобы это проверить. 

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

Не слишком сложный, просто традиционный логический статус. А поскольку это что-то, что может измениться в любой момент, мы должны поместить это в нашу функцию think, чтобы она всегда проверялась. 

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

   BaseClass::OnThink();
}

Вот и все. Постройте проект, чтобы мы могли перейти на .res.

Редактирование HudLayout.res

Откройте /scripts/HudLayout.res в основном каталоге вашего мода и вставьте в него следующее. 

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

Есть несколько настроек на выбор. Для получения дополнительной информации о схемах VGUI вы можете прочитать VGUI Documentation#Schemes.

Теперь, загружая игру, вы должны смотреть на свой HUD с изображением в правом верхнем углу экрана с закругленными углами..

Дополнительная информация

Если по какой-то причине вы хотите, чтобы в правом верхнем углу отображалась animated Текстура, как я хотел, это возможно и может быть достигнуто. Не используйте VtfEdit, потому что когда я это делал, он не работал Используйте оригинальный метод VTEX. Обычно в текстовом документе, сопровождающем анимированный файл .tgas, вы должны указать начальный и конечный кадры, как это

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

И назовите этот документ .txt так же, как ваш .tgas, щелкните и перетащите его через VTEX и дайте ему поработать. (ПРИМЕЧАНИЕ~ у вас должны быть файлы .txt и .tgas в папке materialsrc вашей папки sourcesdkcontent/SOURCEMOD/для работы VTEX)

(ПРИМЕЧАНИЕ~ вы можете проверить, что он работает в VTFEDIT, если вы откроете его там и нажмете кнопку воспроизведения, но не сохраняйте его там !!!) Итак, когда у вас есть анимированный VTF, поместите его в папку SourceMod/materials. Теперь создайте vmt, который в основном является документом Txt. (вы можете сделать их в Блокноте, но убедитесь, что расширение - .vmt) Вставьте следующий код в свой .vmt 

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

Выше 'hud' относится к папке внутри вашей папки материалов, в которой находится VTF, а 'NameOfYourImage' относится к имени вашего VTF. (ПРИМЕЧАНИЕ ~ ваш vmt должен называться точно так же, как ваш VTF, например = image.vtf и image.vmt) И это покрывает мое объяснение того, как добавлять анимированные текстуры в hud в игре. Ниже приведена ссылка на мое бездействие с анимированными devilsTrap.vtf.

Внешние ссылки

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