Completing our HUD design

Now that we have the framework in place, let's go ahead and complete each section individually. I would like to start with the PanelCharacterInfo.

Character info panel

From a design point of view, the panel that will contain the visual components for the character will be very complex. The panel will be composed of five images.

The main image will be used to hold an avatar of the character. The other four images will be used to display the health and mana of the character. Since these values will be displayed in a bar format, we will be using two images per item. One of the images will host the border, and the other the representation of the actual value.

To come up with the images, I will use external tools such as Photoshop; Microsoft Expression Design is a good tool for creating frames and so on. Take a look at the following screenshot:

In the preceding screenshot, I have made a nice image portraying the avatar of the player character. You should take into consideration...