WulfKat

Summary:

The HUD DLL is an extensible heads up display for XNA platform games that can be used for any type of single player game. Self contained, users merely add the DLL, a couple of references, some method calls and the HUD appears on the screen, ready to go. Of course, you will still need to change the graphics, the text, and build in math for things like the health bar but this system is easily integrated into any XNA game of any type.

Download:

The zip files for the HUD

The Demo project: Requires XNA, Visual Studios, and DirectX SDK to run

How to Use the HUD:

So this is all very well and good, you say as you stare at the HUD that is both useless and somewhat pretty, but how do I replace your images with my images?  And how do I make it work for things like a timer and a health bar?

Don’t worry, young samurai, it is very easy to do and I will explain all to you.

The first thing that you need to know is that the entire HUD, including positions and types of displays, are loaded in the HUD.xml file.  In other words, if you want to change the HUD, you need to change the HUD.xml file.

XML Images Explanation:

Now, if you go into your HUD.xml file, you will see a bunch of ImageDisplays that look like this…

<ImageDisplay nameID =“Dude“ texturePath
      “ArtAssets/HUDTextures/character“ posX =“215“

posY =“315“ quadrant =“null“ colorR =“255“ colorG =“255“ colorB =“255“ colorA =“255“ toDraw =“true“ imageReference =“null“ imageAttribute =“null“ modifier =“0“/>

ImageDisplays are, simply, the textures that you want to display on your HUD.  If you have gotten your HUD integrated at this point, you will notice that there are 9 of the character images (see Figure #8) in your game, scattered in different locations and in different colors.  All of those images are loaded via the XML file and you can change, add, and delete anything in the XML file at will.

Figure 8: Character Icon

Wait!  But first, we must explain how to do it and what all the parts are from the XML configuration…

ImageDisplay – The name of the Node, also the type of display to be added to the HUD.

nameID – The name attribute of the image. 

Note: This name is here for your convenience so that you can find the HUD image that you want to change so each nameID should be a unique but readily identifiable name. 

For example, emptyHealthBar is a good name but image35324rqw, in a word, sucks.  From the name image35324rqw, the next coder in line has less than no idea which image that actually is just by looking at the name and has to go track down the actual image to figure out which one it is, unless they know your naming conventions.  Now, that may not seem like a big deal but, trust me, it is a very big deal.  One that actually gets more monumentous the later in the evening it is and the less caffine there is at the programmer’s disposal.

texturePath – The actual location of the image, with the name of the image minus the file extension, in the project.   

posX – The X coordinate of the position.

posY – The Y coordinate of the position.

quadrant – The quadrant that you want the image drawn into. 

colorR – The red channel of the desired color.

colorG – The green channel of the desired color.

colorB – The blue channel of the desired color.

colorA – The alpha channel of the desired color.

toDraw – A boolean that tells the HUD to draw the image or not.

imageReference – The image that you wish to refer to (see why names are soooo important now, yes?) for the drawing location of your new image.  Can be self referencing also.

imageAttribute – The attribute (height, width, or both) of the referenced image that you need for your drawing location of your new image. 

modifier – An int that you can use to offset your images from one another.  This one does an add operation but, if you use negative numbers, you can also get it to subtract.

Oh, my god, that’s so complicated, right?  No, not really.  Deving it was a little complicated but that’s all been done for you so now you get the easy part – changing the XML to show what you want it to show.

I am going to assume that you know how to name your images and load them into your game.  Therefore, we are going to start how you set up the position of the HUD image on the screen using the DarkWynter HUD system.  Essentially, you have two options as far as the image position goes; hardcoding the images or using the quadrant system.  We will do this in part the fourth.