This is the HUD for a game I’m making. It’s an action game with mechs in it. While blocking out the HUD, I had two rules that I used:
- Don’t put anything at the top. This is for personal reasons. Having HUD elements at the top blocks the sky, which makes the viewport feel small and cramped.
- With Rule #1 in consideration, keep HUD elements below the 1/2 point. Get as many below 1/3 as possible.
So I started with this screenshot I took of my project. Still using placeholder assets 
I then split the screenshot into sectors using the rule of thirds as a base. The below image shows the grid that I created.
The yellow/brownish area represents the 2/3 of the screen using horizontal slices. The blue area represents 2/3 of the screen using vertical slices. The green area created from the overlap represents the main player focus area, which is roughly 1/2 of the screen. To create this area, I used the assumption that the player is going to focus on 2/3 of the screen vertically or horizontally at a time and that the player is going to focus on the center of the screen. Whether that’s true or not, I don’t really care. It gets the job done.
After breaking the screenshot into sectors, blocking out the HUD elements becomes easy. All I have to do is box-select an area and fill it with color. If I don’t like how it looks, erase/undo and try somewhere else. Below is a draft of my HUD.
The blue bars at the side creep inwards as the player takes damage. Instead of a bar, this will probably be a waveform/electricity/some graphic. When they reach the center, the mech will shut down, leading to defeat. The four green bars represent weapon displays. The active weapons will either be brought to the top of the stack, enlarged, or highlighted. The two blue bars on the bottom represent BOOST and COOLing capability. The BOOST and COOL bars are rooted at the bottom, meaning that they go down when decreasing.
I left a space in the middle for the character for two reasons:
-
If I was playing this game, I’d want to see my mech.
-
I hope to implement visual damage feedback (damaged/destroyed parts, smoke, etc).
My main concern at this point is flow. The HUD needs to flow into the gameplay so well that players aren’t conscious of it.
Here’s my wishlist of nice-to-have HUD features (if I have time to implement them):
-HUD slides to orient itself with the player’s X screen position. I’m using a lag-enabled camera for aesthetic reasons, meaning that the player won’t always be centered horizontally on screen.
-HUD elements explode and disappear when corresponding limbs/parts are destroyed.
Anyhow, most of the HUD is contained horizontally within 2/3 of the screen, right next to the main focus area. The HUD itself is symmetrical and looks nice in the screenshot. Now to implement it and see if it actually works in action.