Sunday, June 5, 2011

Redesigned HUD

Over the past few days, I've been working on redesigning the HUD. The HUD (short for Heads-Up Display) is a visual way of allowing the user to know there stats in game. Different games are going to have different HUDs. For example, the HUD can be designed to be simple (Super Meat Boy) or complex (World of Warcraft).

For Canine Combat, I had debated a long time as to how simple or complex I wanted the HUD to be. In the early alphas of the game, I decided on a more simplistic design:

As you can see, the game has a radar, a picture of your pilot, and some bars on the side...but...that's about it. Something you might notice is that the HUD is not very well marked. For instance, simply by looking at it, you can't tell what those blue, yellow, and red bars stand for. It turns out, the blue represents the planes boosting power, the red is the player's health, and the yellow is the amount of ammo you have. But again, just by looking at it, you couldn't tell. Now lets take a look at the players picture and the number next to it. What do you think that number is? Turns out, that is how many lives the player has left (ok, ok, you might have been able to guess that one).

I think the only part of this HUD that makes any sense is the radar. I mean, it should be pretty obvious that red dots on the radar are enemies, green dots are friends, and yellow dots are neutral.

Now, after having examined all the flaws with this HUD, lets take a look at the new one below. The following screenshot was taken this morning:

As you can see, the HUD has changed considerably. Looking at the radar, it has stayed about the same, however, the right side definitely had a makeover. For starters, the yellow and blue bars are now "prettier" and the red bar (referring to health) has been denoted as so by encircling the players picture and having an image of a cross snapped to the top of it. I'm still debating whether the intention of the blue and yellow bars are clear enough, but so far, I think yellow bar is clear due to the fact that text saying "Machine Gun" is right under it (the blue bar might get some text or image for it latter).

As for the bottom right section of the HUD, well, this might not be so obvious, but the currency used in Canine Combat is bones and the dog bowl (and number on it) refer to how much money/bones you have. As for the backpack, well I plan to add a bar next to it letting you know how filled your inventory is. Again the HUD is looking much better and after implementing said tweaks I think the intent of everything will be even more clear.

Really, complex or simple, there is no right way to design a HUD. If you are making a game, you might find that at the start, your HUD works better with a simple design, but as you add features you might find you need to starting packing more information on the screen.