UDK Tutorial : Basic HUD

Francais | English

Introduction :

I'll show you in this little tutorial how i make basic HUD in UDK. I'll assume you know the basics of programming on this engine (configuration of the workspace, compile).

I – Files Location

In this example we will place our classes in a folder «UDK\UDK-XXXX-XX\Development\Src\MyFolder\Classes».

II – "MyGame" class

To begin, before making our HUD, we will specify our "Game" class to use the new HUD. To do this, change your basic properties of your "Game" class, or create a class:

class MyGame extends UTDeathmatch
config(MyGame);

defaultproperties
{
    HUDType=class'MyFolder.MyHUD'
}

Knowing that our HUD class is "MyHud, it indicates its reference in the default properties of our "Game" class (which is a simple UTDeathmatch extend here).

III – "MyHud" class

I'll start by describing the functions and variables that I use frequently in MyHUD classes which allow you to make a bunch of things. You also can take a look at the "Canvas" class if you want to know more!

So i finished presenting you the main functions. You must know that these functions are not readily available in the "HUD" class but in the attribute "Canvas" of this class (as you may have already noticed). This will require each time "Canvas.TheFunction()". To summarize, we can create our basic HUD class:

class MyHUD extends UTHUD;

function DrawGameHud()
{
    // This is where you put the features seen before as follows:
    // Canvas.TheFunction ()

}

defaultproperties
{
}

The "DrawGameHud()" is called each refreshed image to redraw the HUD. Here we will therefore redefine what will be displayed.

For example, to write a simple "Hello World" on the center of your screen you can do that :

class MyHUD extends UTHUD;

function DrawGameHud()
{
    Canvas.SetPos(Canvas.ClipX/2,Canvas.ClipY/2);
    Canvas.SetDrawColor(255,255,255,255);
    Canvas.Font = class'Engine'.static.GetMediumFont();
    Canvas.DrawTextCentered("Hello World");
}

defaultproperties
{
}

IV - Example

So now that we have all the elements, we will make a useful little function for our HUD. In fact, our function will allow us to display the value of a variable on the screen as a bar. We'll try to do this:

Our bar has therefore:

We can do that for example :

function DrawBar(String Title, float Value, float MaxValue,int X, int Y, int R, int G, int B)
{

    local int PosX,NbCases,i;

    PosX = X; // Where we should draw the next rectangle
    NbCases = 10 * Value / MaxValue; // Number of active rectangles to draw
    i=0; // Number of rectangles already drawn

    /* Displays active rectangles */
    while(i < NbCases && i < 10)
    {
        Canvas.SetPos(PosX,Y);
        Canvas.SetDrawColor(R,G,B,200);
        Canvas.DrawRect(8,12);

        PosX += 10;
        i++;

    }

    /* Displays desactived rectangles */
    while(i < 10)
    {
        Canvas.SetPos(PosX,Y);
        Canvas.SetDrawColor(255,255,255,80);
        Canvas.DrawRect(8,12);

        PosX += 10;
        i++;

    }

    /* Displays a title */
    Canvas.SetPos(PosX + 5,Y);
    Canvas.SetDrawColor(R,G,B,200);
    Canvas.Font = class'Engine'.static.GetSmallFont();
    Canvas.DrawText(Title);

}

So we will see this way the life and ammunition, for example:

class MyHUD extends UTHUD;

function DrawGameHud()
{

    if ( !PlayerOwner.IsDead() && !UTPlayerOwner.IsInState('Spectating'))
    {
        DrawBar("Health",PlayerOwner.Pawn.Health, PlayerOwner.Pawn.HealthMax,20,20,200,80,80);         DrawBar("Ammo",UTWeapon(PawnOwner.Weapon).AmmoCount, UTWeapon(PawnOwner.Weapon).MaxAmmoCount ,20,40,80,80,200);     }

}

defaultproperties
{
}

And the result :

Tutorial écrit le 13/01/2010 par Shad