WulfKat

Prototype By:  Priyesh Dixit (ScreenObject) and Hunter Hale (HUD)
Engineering By: Amanda Chaffin
Code Review By: Jason Hardman
DLL and Docs By: Amanda Chaffin and Jason Hardman

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

Image Positioning:

Like I said last time, 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. 

Hardcoding Images (More Expert Use)

If you wish, you can hardcode the image positions to show at a specific location in your game.  To do this, simply change the posX and posY to be the location that you want to use and make sure that the quadrant’s value is set to null (quadrant=“null“).  Remember that you cannot leave any value either blank, or take it out of the XML as you will cause the HUD to break.  Remember, also, that the top left corner is (0,0).  After you have hardcoded the image position, remember, too that you can change the base location by using the image reference tags, which we will discuss shortly.  If you hardcode all of your image positions, you can also call hud.Resize() to correct the images to the proper viewport in the game.

Quadrant System

The quadrant system works by dividing the viewport space into 9 different quadrants: UL (upper left), ML (middle left), BL (bottom left), UC (upper center), MC (middle center), BC (bottom center), UR (upper right), MR (middle right), and BR (bottom right).  Each quadrant knows where it is supposed to draw the images and you can also change the base location by using the imageReference tags.  Note:  The quadrant system is the DEFAULT system for the HUD so, if you do NOT set the quadrant=“null“ in the XML tag, you will be using the quadrant system.  For a more indepth explanation of the quadrant system, please refer to Figure 9.

Figure 9: The Quadrant System

  As you can see, each of the quadrants has the math already pre-configured for you so that you just need to use the actual attribute tags for the XML file listed in green in the introductory paragraph above.  Also, notice the order that the tags are in (Y, X)…what can I say, I’m dyslexic. If you look in your HUD.xml file that you downloaded and installed into your project (if you have been following along), you can see that every image and text display are using the quadrant system and not the hardcoding.  You will also note, however, that each image and text display has numbers in the posX and posY tags.  If you leave out the numbers (it’s stored as an int in the code, so whatever you want as long as it is an int), you will crash the program.

And the monkeys will be sad.

Ok, so now that you have how you can load images to either a hardcoded or quadrant position, what happens if you want to load two images in the same quadrant?  Or what if you want to hardcode an image position and then base your second image next to the one that you just loaded?

That is what the imageReference was designed to answer and what we will discuss in Part the Fifth.