The REAL tutorial resides over at the Valve Developer Wiki, which receives community updates (whereas the one here does not). So I encourage anybody reading, to also view that page to see if any changes have been made by the community.

Here goes nothing:

This is an extension of the ContinuousProgressBar class that Valve already has in place in the VGUI lib (Orange Box). This tutorial is a purely copy/paste tutorial and should not require any modification.

The Header (.h) file

game/client/game_controls/ImageProgressBar.h

#ifndef IMAGEPROGRESSBAR_H
#define IMAGEPROGRESSBAR_H

#ifdef _WIN32
#pragma once
#endif

#include
  #include

using namespace vgui;

class ImageProgressBar : public ContinuousProgressBar
{
    DECLARE_CLASS_SIMPLE( ImageProgressBar, ContinuousProgressBar );

public:
    ImageProgressBar( Panel *parent, const char *panelName );
    ImageProgressBar( Panel *parent, const char *panelName, const char *topTexturename, const char *bottomTextureName );

    virtual void Paint( void );
    virtual void ApplySettings( KeyValues *inResourceData );
    virtual void GetSettings( KeyValues *outResourceData );

    void    SetTopTexture( const char *topTextureName );
    void    SetBottomTexture( const char *bottomTextureName );

private:
    int    m_iTopTextureId;
    int    m_iBottomTextureId;
    char    m_szTopTextureName[64];
    char    m_szBottomTextureName[64];
};

#endif

The Source (.cpp) File

game/client/game_controls/ImageProgressBar.cpp

#include "cbase.h"
#include <vgui/ISurface.h>
#include <KeyValues.h>
#include "ImageProgressBar.h"

#include "tier0/memdbgon.h"

using namespace vgui;

DECLARE_BUILD_FACTORY( ImageProgressBar );

ImageProgressBar::ImageProgressBar( Panel *parent, const char *panelName ) : BaseClass( parent, panelName )
{
    m_iTopTextureId = m_iBottomTextureId = -1;
    memset( m_szTopTextureName, 0, sizeof( m_szTopTextureName ) );
    memset( m_szBottomTextureName, 0, sizeof( m_szBottomTextureName ) );
}

ImageProgressBar::ImageProgressBar(vgui::Panel *parent, const char *panelName, const char *topTextureName, const char *bottomTextureName ) : BaseClass( parent, panelName )
{
    SetTopTexture( topTextureName );
    SetBottomTexture( bottomTextureName );
}

void ImageProgressBar::SetTopTexture(const char *topTextureName)
{
    if( topTextureName != NULL && topTextureName[0] )
    {
        Q_strncpy( m_szTopTextureName, topTextureName, 64 );
        m_iTopTextureId = surface()->DrawGetTextureId( topTextureName );
        if( m_iTopTextureId == -1 )
        {
            m_iTopTextureId = surface()->CreateNewTextureID();
            surface()->DrawSetTextureFile( m_iTopTextureId, topTextureName, false, true );
        }
    }
    else
    {
        memset( m_szTopTextureName, 0, sizeof( m_szTopTextureName ) );
        m_iTopTextureId = -1;
    }
}

void ImageProgressBar::SetBottomTexture(const char *bottomTextureName)
{
    if( bottomTextureName != NULL && bottomTextureName[0] )
    {
        Q_strncpy( m_szBottomTextureName, bottomTextureName, 64 );
        m_iBottomTextureId = surface()->DrawGetTextureId( bottomTextureName );
        if( m_iBottomTextureId == -1 )
        {
            m_iBottomTextureId = surface()->CreateNewTextureID();
            surface()->DrawSetTextureFile( m_iBottomTextureId, bottomTextureName, false, true );
        }
    }
    else
    {
        memset( m_szBottomTextureName, 0, sizeof( m_szBottomTextureName ) );
        m_iBottomTextureId = -1;
    }
}

void ImageProgressBar::ApplySettings( KeyValues *inResourceData )
{
    const char *topTextureName = inResourceData->GetString("TopImage", "");
    SetTopTexture( topTextureName );

    const char *bottomTextureName = inResourceData->GetString("BottomImage", "");
    SetBottomTexture( bottomTextureName );

    BaseClass::ApplySettings( inResourceData );

}

void ImageProgressBar::GetSettings( KeyValues *outResourceData )
{
    BaseClass::GetSettings( outResourceData );
    outResourceData->SetString( "TopImage", m_szTopTextureName );
    outResourceData->SetString( "BottomImage", m_szBottomTextureName );
}

void ImageProgressBar::Paint( void )
{
    if( m_iTopTextureId == -1 )
        return;
    int x = 0, y = 0;
    int wide, tall;
    GetSize( wide, tall );

    if( m_iBottomTextureId != -1 )
    {
        surface()->DrawSetTexture( m_iBottomTextureId );
        surface()->DrawSetColor( 255, 255, 255, 255 );
        surface()->DrawTexturedRect( x, y, wide, tall );
    }

    surface()->DrawSetTexture( m_iTopTextureId );
    surface()->DrawSetColor( 255, 255, 255, 255 );
    switch( m_iProgressDirection )
    {
    case PROGRESS_EAST:
        surface()->DrawTexturedSubRect( x, y, x + (int)(wide * _progress), y + tall,
            0.0f, 0.0f, _progress, 1.0f );
        break;
    case PROGRESS_WEST:
        surface()->DrawTexturedSubRect( x + (int)(wide * (1.0f – _progress) ), y, x + wide, y + tall,
            1.0f – _progress, 0.0f, 1.0f, 1.0f );
        break;
    case PROGRESS_NORTH:
        surface()->DrawTexturedSubRect( x, y + (int)(tall * (1.0f – _progress) ), x + wide, y + tall,
            0.0f, 0.0f, 1.0f, _progress );
        break;
    case PROGRESS_SOUTH:
        surface()->DrawTexturedSubRect( x, y, x + wide, y + (int)( tall * _progress),
            0.0f, 1.0f – _progress, 1.0f, 1.0f );
        break;
    }
}

Usage

To use this in a .res file, use it like any other progress bar. There are added keys to the *.res file so it is possible to change the images via text instead of hard-code. Here’s an example that does not use a background progress bar image. Background progress images aren’t required, but can be used if needed:

First, include the ImageProgressBar class.

#include "ImageProgressBar.h"

Next, declare the new handle for the image progress bar for the new hud class:

protected:
     int m_pHealthProgressBar;

Place this within the constructor of your new HUD class:

m_pHealthProgressBar = new ImageProgressBar( this, "HealthProgressBar", "vgui/gfx/HUD/health_bar");
m_pHealthProgressBar->SetProgressDirection( ProgressBar::PROGRESS_EAST );

If top and bottom materials need to be added via code, add this instead of the code above:

m_pHealthProgressBar = new ImageProgressBar( this, "HealthProgressBar");
m_pHealthProgressBar->SetProgressDirection( ProgressBar::PROGRESS_EAST );
m_pHealthProgressBar->SetTopTexture(  );
m_pHealthProgressBar->SetBottomTexture(  );

And place this within the Think function of the HUD class:

//Edit this part for whatever value your image bar needs to be.
m_pHealthProgressBar->SetProgress( Value );

Note: This must be placed in the think function, otherwise the image bar won’t adjust to the new value. Also make sure the progress of the bar is set only if the value changes. It’s much safer that way and more memory efficient; do not keep setting the same value repeatedly.

And to finish it off, place this inside scripts/HudLayout.res:

"HealthProgressBar"
{
	"ControlName"	"ImageProgressBar"
	"fieldName"	"HealthProgressBar"
	"xpos"		"10"
	"ypos"		"25"
	"wide"		"200"
	"tall"		"32"
	"autoResize"	"1"
	"visible"	"1"
	"enabled"	"1"
	"tabPosition"	"0"
}


Note: This has been tested with progress directions PROGRESS_NORTH and PROGRESS_EAST. It has not been tested with the others, but the code is there. If they are not correct, please correct this page.