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

 

If you open your XML file that you downloaded and scroll down below the ImageDisplays, you will see a bunch of TextDisplays that look like this…

 

<TextDisplay nameID =“text1“ text =“quad upper center“ posX =“0“ posY=“15“

     quadrant=“null” colorR =“250“ colorG =“100“ colorB =“250“ colorA =“255“

     toDraw =“true” imageReference =“null“ operation=“add“ offsetX =“25“ offsetY=“7“/>

 

If you notice, most of the attribute tags are the same in the TextDisplays as they are in the ImageDisplays.  The functionality of those tags is the exact same functionality that the ImageDisplays have so there please refer to the ImageDisplays section if you need a better explanation.  There are a couple that were not in the ImageDisplays…

 

If you notice, most of the attribute tags are the same in the TextDisplays as they are in the ImageDisplays.  The functionality of those tags is the exact same functionality that the ImageDisplays have so there please refer to the ImageDisplays section if you need a better explanation.  There are a couple that were not in the ImageDisplays…

 

text – The text that you want displayed on the screen.

 

operation – The type of operation that you want performed on the TextDisplay using a the Vector2 offset if the imageReference does not equal null.  There are four operations…

 

·         add

·         subtract

·         multiply

·         divide

 

offsetX – The X coordinate of the offset Vector.

 

offsetY – The Y coordinate of the offset Vector.

 

So, if you want to change the text, all you need to do is type in the text field what you want to say. 

 

If, once you have drawn the item on the screen, you wish to change the location using the imageReference, you can choose to just add based on the image’s position.  Finally, you then can use the offsets to make minute adjustments to insure that your text is positioned correctly. 

 

Now, I will walk you through how to add a game timer to your project that displays on your HUD. 

 

First of all, you need to create an image for the timer box if you wish.  Your XML tag for the timer box will look something like this…

 

<ImageDisplay nameID =“Timer“ texturePath =“ArtAssets/HUDTextures/Time“

       posX =“15” posY =“415“ quadrant =“UC“ colorR =“255“ colorG =“255“

       colorB =“255“ colorA =“255“ toDraw =“true” imageReference =“null“

       imageAttribute =“width“ modifier =“0“/>

 

As you can see, the image is being loaded into the “UC” (Upper Center) quadrant so the actual position values are irrelevent (but the numbers are there).

 

Make sure that you add the image to your project in the HUDTextures folder inside the ArtAssets folder inside Content (Note: you can put this wherever you need to, just make sure that your file path in the XML matches the location of the item in question).

 

Your XML value, if you want to center the timer, will look something like this…

 

<TextDisplay nameID =“TimerText“ text =“00:00“ posX =“0“ posY=“15“

          quadrant=“null” colorR =“250“ colorG =“0“ colorB =“0“

          colorA=“255“ toDraw =“true” imageReference =“Timer“

          operation =“add“ offsetX =“25“ offsetY=“7“/>

 

As you can see, the text is not being loaded off the quadrant system but, because we are pulling the location from the Timer image, we do not need to actually try to position the image on the HUD in the XML…but, repeat after me, we cannot leave the values blank.

 

If you have done everything right, you will have something like Figure: 11…

 

 

 

But, how do we make the time change?

 

Go to your human class (or whatever has an update loop) and add a timer of some sort…I use System.Diagnostics.Stopwatch for all my timing needs.  Start your stopwatch in your LoadContent method.  You will also need to get the index of the Timer from the TextDisplays list so build the same for loop that you did for the ImageDisplays in your LoadContent and store the int in the class.

 

Once you have the relevant information, you can then add the timing code – make sure that you do this in your Update method.  Here is my timing code, based off System.Diagnostics.Stopwatch, so if you use something else, your mileage may vary…

 

// Update the Game Time

int seconds = ((int)gameTimer.Elapsed.TotalSeconds) % 60;

int minutes = ((int)gameTimer.Elapsed.TotalSeconds) / 60;

string formatedSeconds = seconds.ToString();

if (seconds < 10)

{

formatedSeconds = “0″ + seconds.ToString();

}

string timing = minutes.ToString() + “:” + formatedSeconds;

hud.textDisplays[timerIndex].text = timing;

 

That’s it!  And that is how the HUD works…

 

Next, dialogue!