In this series of tutorials, we will create a HUD (Heads-Up Display) in DirectX - this ranges from text, to statistics (FPS, time etc) and then onto more advanced controls such as buttons and textboxes.
The code from these tutorials has been either taken from my Tac-Man game project or created specially for this siste
Using the code
You may use all of the code I provide as how you see fit, except to create another tutorial. You can use it as a sturdy(ish ) framework for your own applications, or print loads of copies off so that when I'm rich and famous you can sell them for $100 each
To do this series of tutorials, you will need:
- C# Compiler (preferably Visual C# 2005 Express)
- Managed DirectX 9.0 October SDK
OK, you will need to have completed the base tutorial series or at least have framework capable of setting up Direct3D. It is strongly advised that you at least read the first couple of tutorials from the "Beginning 2D game programming" section to get an understanding of some of the concepts I assume you understand in this tutorial.
.NET provides a plethoria of GUI objects such as buttons, checkboxes and even calendars etc. However, in DirectX applications, not only are these ugly in a game, but it is also impracticle if not impossible because of DirectX's inability to share... So, most game-developers create their own HUD's, specially designed and coded for that application. In this tutorial we will simply learn how to create a class to display a string to our screen.
First, we obviously need a new class to go in the engine.
In DirectX, we use a sprite to render text, using a font object to define how the string is displayed. We also have other variables defining the text's style (bold, italic etc), size (defined within a rectangle) and color.
So, our class must contain all of the data used to display one "message", and the methods to initialise and render it. In this way, it will be similar to our Sprite class (assuming you have done the 2D tutorials).
public class hMessage
public string Text;
public System.Drawing.Point Location;
public Font Style;
public System.Drawing.Color Color; public hMessage ( Device dev, System.Drawing.Size size,
FontWeight weight, string fontname,
string text, System.Drawing.Point loc,
System.Drawing.Color col )
Style = new Font ( dev, size.Height, size.Width, weight, 0, false,
CharacterSet.Default, Precision.Default, FontQuality.Default,
PitchAndFamily.FamilyDoNotCare, fontname );
Text = text;
Location = new System.Drawing.Point ( loc.X, loc.Y );
Color = col;
public void Render ( Sprite spr )
Style.DrawText ( spr, Text, Location, Color );
So, not an overly complicated class, we have the text to display, its location on the screen, the style of font to be used and the color. As you can see, the render function is a wrapper for the
Font.DrawText() method, which simply uses a sprite object and other variables affecting a font and displays it, very similar to the
Sprite.Draw2D method, except the sprite is taken as an argument instead of being the calling object.
With this class implemented, build your engine and create a new windows application called HUD_1. Do the usual stuff, delete the designer file, have the window class inherit from Engine.gameWindow instead of the standard
System.Windows.Forms.Form and change the simple
using (Form1 gameForm = new Form1())
Now, back in your form class, replace the body of it's constructor with a simple call to our
method, using the standard settings (
windowed = true
). Add an hMessage object to our class, this will naturally be the object used to display our text.
Attatch an Paint event handler, and add the generic D3D stuff to it, this is:
device.BeginScene ( );
device.Clear ( Microsoft.DirectX.Direct3D.ClearFlags.Target,
Color.Black, 1.0f, 0 );
device.EndScene ( );
device.Present ( );
this.Invalidate ( );
The purpose behind doing this has already been explained in previous tutorials, so I will not go into it in detail here (for more information look at Beginning 2D Game Programming, Tutorials 1-2). Now, after the
call, we need to add a function to draw our text. Pop in a sprite object to our class definition (I will call mine aSprite, nice and unique), and add the following line after
aMessage.Render ( aSprite );
Now, the only thing we need to do is initialise these members. In the Main class' using body, before the call to
initialise our sprite, the only member here is a link to the form's inherited
object, and then initialise our font member. As we created this class, you should understand the process, but for an idea of sizing / location etc I will provide the call used in the sample below:
gameForm.aMessage = new hMessage ( gameForm.device,
new System.Drawing.Size ( 48, 40 ),
FontWeight.Normal, "Ariel", "HELLO \nWORLD",
new System.Drawing.Point ( 50, 400 ),
You should now be able to run the application. I advise you to use this as a base to start playing around with different locations / sizes to give you an idea of the call.
See you in Tutorial 2, where we will learn to use / modify our class to display an application's "Vital Statistics", such as elapsed time, lives, and even graphics card information.
For more Managed DirectX Tutorials on HUDS, 2D and 3D game programming and heightmapping, please visit my site http://www.just-code-it.ne