Basic HUD (ingles)

Fuente: http://www.shad-fr.com/udk/hudtut/english.html

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:

Código:

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!


• SetPos(float X, float Y) : This function is used to position yourself on the screen from Top / Left corner, and display different things from this position.
  
• SetDrawColor(byte R, byte G, byte B, optional byte A ) : Sets the color (with the value of Red, Green and Blue) and transparency (with the alpha value) you use to "draw" on the HUD.
  
• var font Font : This variable allows you to choose a font to use for writing on the HUD. I use very often integrated functions :
  

  Código:

  Canvas.Font = class'Engine'.static.GetSmallFont();
  Canvas.Font = class'Engine'.static.GetMediumFont();
  Canvas.Font = class'Engine'.static.GetLargeFont();

  
  DrawText(string S) / DrawTextCentered(string S) : Displays a text (centered through the second function) on the HUD, after you chose the position, color and font to use with previous variables and functions.
  DrawRect(float RectX, float RectY, optional Texture Tex = DefaultTexture) : Can draw a rectangle of RectX * RectY size. If you do not put texture the rectangle is filled with the simple color you chose previously.
  DrawBox(float width, float height) : Lets show the shape of a rectangle of Width * Height size. You should have previously chosen the position and color before.
  DrawTile(Texture Tex, float XL, float YL, float U, float V, float UL, float VL) / DrawMaterialTile (Material Mat, float XL, float YL, float U, float V, float UL, float VL) : Can draw a Texture or Material on the HUD which we will specify the horizontal and vertical scale through XL and YL. The parameters U and V can shift the texture. For example, with U different of 0 can be obtained:
  
  
  
  Finally, UL and VL can "cut" the texture. For example, a VL less than the size of the texture :
  
  
  
  
• var float ClipX / var float ClipY : These two variables designate the width and height of your resolution, ie the coordinates of the lower right corner of the screen.

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:

Código:

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 :

Código:

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:

• A title
  
• Ten rectangles (8px * 12px) with transparency and / or color (depending on the value of the variable)

We can do that for example :

Código:

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:

Código:

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 :