Click here to Skip to main content
15,885,546 members
Articles / Desktop Programming / Windows Forms
Article

Creating a HUD In Direct3D / C#: Part 1 - Text

Rate me:
Please Sign up or sign in to vote.
1.07/5 (13 votes)
22 May 20064 min read 86.8K   1.2K   22   7
Teaches you how to create a HUD in Direct3D / C# - this first part goes through the basics of creating and rendering text

Introduction

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.

Background

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 ;)

Prerequisites

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.

Displaying Information

.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).

C#
public class hMessage
{
//The text to be displayed by the message
public string Text;
// The 2D location (on screen) of the message
public System.Drawing.Point Location;
//The actual font object to use
public Font Style;
public System.Drawing.Color Color; // The color of the text
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 Application.Run() to: 

C#
using (Form1 gameForm = new Form1())
{
  Application.Run(gameForm);
} 
Now, back in your form class, replace the body of it's constructor with a simple call to our Initialise() 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:
C#
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 Clear() 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 Clear():

aMessage.Render ( aSprite );<BR>
Now, the only thing we need to do is initialise these members. In the Main class' using body, before the call to Application.Run(), initialise our sprite, the only member here is a link to the form's inherited Microsoft.DirectX.Direct3D.Device 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:
C#
gameForm.aMessage = new hMessage ( gameForm.device, 
         new System.Drawing.Size ( 48, 40 ), 
         FontWeight.Normal, "Ariel", "HELLO \nWORLD", 
         new System.Drawing.Point ( 50, 400 ), 
         System.Drawing.Color.Yellow ); 

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.net

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
CEO Synap
United Kingdom United Kingdom
Founder & CEO of Synap, an online education platform that uses machine learning to help people learn more in less time.

Software developer, main languages currently are Objective-C, MySQL and Javascript, though I got started on C++, C# and PHP.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Paul Soloveychik23-Sep-12 2:16
Paul Soloveychik23-Sep-12 2:16 
Questionwhats up? Pin
Lamar Seifuddin29-Aug-11 13:50
Lamar Seifuddin29-Aug-11 13:50 
GeneralMy vote of 1 Pin
Member 79867437-Jun-11 5:00
Member 79867437-Jun-11 5:00 
GeneralMountain out of a mole hill Pin
bamboozle12-Jan-07 15:03
bamboozle12-Jan-07 15:03 
GeneralRe: Mountain out of a mole hill Pin
Arthur M.20-Feb-08 13:08
Arthur M.20-Feb-08 13:08 
QuestionAny pre-built HUD images? Pin
Jun Du23-May-06 5:19
Jun Du23-May-06 5:19 
AnswerRe: Any pre-built HUD images? Pin
James Gupta23-May-06 9:19
professionalJames Gupta23-May-06 9:19 
Obviously, the series gets more "interesting" in terms of what you create as you go through them.

I wrote a HUD engine for my game with textboxes, checkboxes, radioboxes and buttons, however it has to be re-written at the moment from C++ to C# and then from sprites to polygons, as people have been experiencing problems with this.

The next tutorial focuses on dynamic text (ie statistics).

However, after that we move onto creating a HUD core element class which we modify / derive to create the above controls.

You can expect to see these some time wtihin the next 1-2 weeks, and images will be posted as soon as I re-create them myself.

James

just-code-it.net

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.