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

imageReference:

Remember the nameID attribute that I told you to use a unique name for?  Well, there was a very valid reason for that, beyond what I harped on earlier.  You use the nameID attribute in the imageReference attribute to denote what image you wish to refer to.

For example, let’s say that I want to draw the dude image in the top left hand corner and then draw the health bar to the right of the the dude icon.  My XML file will then look like this…

<ImageDisplay nameID =“DudeHealthBar“ texturePath=“ArtAssets/HUDTextures/healthBar“ posX =“215“
      posY =“315“ quadrant =“UL“ colorR =“255“ colorG =“255“ colorB =“255“ colorA =“255“
      toDraw =“true“ imageReference =“Dude“ imageAttribute =“width“ modifier =“15“/>

<ImageDisplay nameID =“Dude“ texturePath=“ArtAssets/HUDTextures/character“ posX =“215”
     posY =“315“ quadrant =“UL“ colorR =“255” colorG =“255“ colorB =“255“ colorA =“255”
     toDraw =“true“ imageReference =“null” imageAttribute =“null“ modifier =“0“/>

When you run the game, providing that you have added the health bar image into your game, you will see something like Figure 10. 

Figure10: Character Icon and Health Bar

Options for the imageReference include ANY image that you have PREVIOUSLY added in the XML file.  Please note the PREVIOUSLY notation – you cannot base an image’s location off an image that had NOT been loaded yet, ergo, the image that you want to reference must be entered before the one that is going to reference it (XML reads top to bottom).

Options for the imageAttribute include “width“, “height“, or  “both“.  The tags tell the HUD to go to the referenced image and find the image attributes of width, height, or both.  The system then adds that number to the second image’s starting position, in a sense, scooting (hey, it’s a technical term now) it over where you want it to display.

The final option in the image display is the modifier option.  This is a simple int that you can use to scoot the images into more precise locations.  As it is an addition function, if you wish to make it a subtraction, just use a negative number.

So why did we do the whole imageReference routine instead of just setting the image height and width as an XML tag?  Well, hardcoding numbers is bad and hardcoding those numbers means that, if you scale your HUD, the images will not rescale their height and width.  It is better to just allow XNA to discover the image attributes for you and use those so as to avoid all kinds of silly mistakes that enter into programs with hardcoded numbers.

But, aren’t you going to show us how to make the health bar subtract depending on how healthy the player is?  Um, no.  Ok, well, I will show you how to set it up. You need to have an image of a full health bar and an empty health bar.  In your human class (you do have one, yes?), you need to add the using statement as explained in the installation instructions.

Now, the HUD stores all of the ImageDisplays in a publically accessible list (Game1.hud.imageDisplays) so that you can check the list for the index of the image that you want.  After you have added the using statement, you now need to find the index of the image that you are wanting, in this case, the index of both the full and empty health bars.  To do this, I suggest that you make two int in your human class to permanently store the image’s list index (it beats having to spin the list every time you hit the update loop).  After you have done that, you need to look for the images, I do this in LoadContent(), and the code for that is something akin to this…

     for (int x = 0; x < Game1.hud.imageDisplays.Count; x++)

         {

            if (Game1.hud.imageDisplays[x].name == “DudeHealthBar”)

             {

                 healthBar = x;

              }

          }

So now I know where the image is in the list (remember, you have to do this for any image or text that you want to modify), I can access the actual item in the list and tell it to change.  The code for that is something like this (your math may be different)…   

// Update the health bar

Game1.hud.imageDisplays[healthBar].Source = new Rectangle(0, 0,

      Game1.hud.imageDisplays[healthBar].width,

      (int)((( this.health * Game1.hud.imageDisplays[healthBar].height / 80))));

So  now that you know how to put images on the HUD, move them around to the desired location, and even, hopefully, have your health bar working, we need to move onto the text portion of the HUD…Part the Sixth!