HUD Design: Inventory Display

WeaponElement

The Weapon Element/Inventory Display is one of the most crucial elements in the design of the Crystalline HUD. Due to the weapon sandbox having a single type of ammunition it is tasked with providing the player with a litany of vital information.

First, the player must know what weapons are available to them. To achieve this goal I created silhouette sprites for each gun and massaged the actual outlines to produce several visually coherent yet unique identifiers for the different weapon types. While the player already has this information in the form of the first person gun mesh, it is important to reinforce this information to the player and follows in the tradition of first person shooters established all the way back with Wolfenstein 3D. Additionally, the sprites are designed to face the edge of the screen rather than the center in effort to accentuate the ammo readouts with the eye leading nature of the weapon barrels.

HUD sprite sheet for weapon icons.

HUD sprite sheet for weapon icons.

Speaking of ammo, I elected to display the ammo in two ways graphically and textually. The graphical display caters to players who think more visually than others. At a glance the player should be able to tell how full their clip/magazine is and how much energy the next shot will consume. Two similar colors were used for this graphical display in an attempt to indicate to the player that they both had that much ammo left and the next shot would consume the amount within the alternate color. While this metaphor is apparent to me, it still needs some play test to see if my hypothesis holds true.

A textual component was also added to give the player a discrete glimpse at the state of their weapon. By design the number on top represents the ammo the player currently has loaded into the gun, while the lower number represents the ammo on hand. This order was found to be the least jarring visually, with the more static ammo on hand serving as a sort of visual foundation to the often rapidly changing ammo in clip.

Additionally, the offhand weapon is present in the inventory display at all times. This informs new players to the existence of the pistol, which is critical since most of our players are new due to the nature of this project. Second, it allows the game to convey the ammunition the player has if they currently have the pistol equipped. This is particularly important to the design of the pistol, as it is intended as a backup for the player, a weapon to be used when they’ve run out of crystal ammo. As such all the ammo held by the player for the particular gun is displayed, with the pistol displaying nothing to deliberately draw attention to the ammo-less nature of the gun.

Crystal Gun in the offhand slot, note the ammo.

Crystal Gun in the offhand slot.

The inventory display is also placed in the lower right hand third of the screen. This is a deliberate attempt on my part to associate the weapon with the HUD element, and take advantage of an existent design paradigm that most first person shooter fans would at least subconsciously acknowledge. The element is by design not particularly flashy as while the player should use the element for state information, it should not be their sole focus. As such I elected for a minimalist design pattern when dealing with this element and the rest of the HUD. In my philosophy, a well designed user interface is not so much noticed as it is accepted by the player.

One thought on “HUD Design: Inventory Display

Leave a comment