Timer Shootout HUD

This is my design for the a first person shooter HUD with a shootout timer. I decided to go online and search for game screenshots. I found this and decided to create a HUD with no context or ideas about mechanics. I wanted to focus purely on the aesthetics of my design working with the aesthetics of the game. I included the key display elements:

Player Health Bar

The player health bar shows how much damage the player has taken so far. I decided to create a clock face to represent the health bar in this game. In the lower left, I created a radial counter along with a digital readout for ease of access during gameplay. The total health points are out of 100 (maximum health).

Ammo

As seen in the screenshot, the player character is holding a large assault rifle. Keeping an eye on ammunition is vital to winning shooter games so a readout on this is key. On the lower right, I included the currently equipped gun along with the ammunition readout so players know their remaining bullets and when to reload. I also designed this with the clock theme in mind but changed the radial dashes to bullets.

Enemy Health Bars

In the screenshot, the player character is facing a large number of enemies. I decided to add a simple health bar above each of these characters in order to help the player prioritise their target during the time trial. 

Timer

I thought it could be fun to play with the idea that the player is facing these adversaries on a timer. I included the countdown clock at the top, again with a digital readout of the remaining time. 

Enemy Counter

During the time trial, the player would have to kill a certain number of enemies to pass the level. I decided that this feature would need to be shown to the player and so I added a kill counter next to the timer so players can track their progress against the time remaining.

Cross Hair

I also added a crosshair in the centre of the screen. I matched the one on the gun display from the screenshot but ran into issues with it’s white tone. As seen above, the cross hair was in the middle of a bright patch on the screen so I had to add a small drop shadow behind the cross hair to increase its visibility.

Leave a Reply

Your email address will not be published. Required fields are marked *