Основы изменения экранного интерфейса пользователя (HUD)

From Valve Developer Community
< Ru
Jump to navigation Jump to search
English (en)Русский (ru)中文 (zh)Translate (Translate)
Info content.png
This translated page needs to be updated.
You can help by updating the translation.
Also, please make sure the article complies with the alternate languages guide.(en)

Из этого руководства Вы узнаете, как изменить HUD, добавив графику. Добавить графику в HUD очень просто. Тем не менее, рекомендуется разобраться в процессе создания материала(en).

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

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

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

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

Тем самым задаём для vtex...

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

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

В .vmt(en) будем использовать следующие параметры.

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

Теперь создайте новый файл .cpp с именем hud_import. Вот необходимые инструкции 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. Затем мы рисуем нашу текстуру на нашей поверхности. Следующая строка - важная часть. Фактически Вы определяете, где разместить панель и насколько она велика, в файле HudLayout.res. Это последнее утверждение прикреплено к самому изображению. Вы устанавливаете его значения следующим образом...

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

Вы можете указать свои собственные значения в соответствии с размером изображения.

Осталось выполнить два шага: изменить переменную cvar и отредактировать файл HudLayout.res.

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

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

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 Вы можете прочитать Схемы(en).

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

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

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

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

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

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

"UnlitGeneric"
{
   "$basetexture" "'''hud/ИмяИзображения'''"
   "$translucent"   "1"
   "Proxies"
   {
      "AnimatedTexture"
      {
         "animatedtexturevar" "$basetexture"
         "animatedtextureframenumvar" "$frame"
         "animatedtextureframerate" 10
      }
   }
}

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

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