HUD Design Documentation - UQdeco2800/2021-studio-6 GitHub Wiki

Player HUD (Heads up Display)

It is a clear visual representation of the player character’s state to the player. The level of clarity can affect player’s decision making process and difficulty of the game.

Related Systems

  • Health has 3 states. Health, wounded, death’s door.
  • Each state has some amount of health 3, 4, 5 by default.
  • Once the health in each state is depleted, the state worsens, until player dies once they deplete their health while in death’s door state.
  • Health regenerates while below maximum health amount in each state, but does not recover to higher state naturally.
  • Player has dash and it's cooldown.
  • Enemies should have health bars for clarity.

Design Problems

  • Health is low in quantity and each loss is critical to the player thus current quantity must be very clear.
  • The health state as well as quantity of remaining health must be clear to the player.
  • Minimum/Maximum health of each state can be changed through other in game mechanics (Future feature proof)
  • Similar system should be translatable onto enemies
  • Cohesive to the art style
  • Additional hud elements such as dash, status condition, equipped weapons etc.

Current requirements

Health bar with variable size Health bar with 3 states that are clear to player Health regeneration animation Health loss animation Health status recovery animation Health status loss animation Dash use animation Dash recovery animation Dash ready animation Status effect box ideas (future) Equipped items hud.(future)

Ideas

Health

  • Traditional health bars
  • Hearts system
  • Sectioned health bar
  • Health bar with hearts
  • Showing only wound state?

Major decision is how difficult it should be for the player to identify their current status and how obvious to the player it should be the condition of the character.

Draft Concept Health bar with clear segments that vary in size.

I believe this orientation of the health bar will allow the player to clearly identify both the remaining quantity of health and the health state. Additionally, the void could be filled with the dash cooldown bar to utilise the empty space.

Location of the hud.

  • Bottom left
  • Top left
  • Along the bottom
  • Right left
  • Right top
  • Left
  • Right
  • Dedicated void
  • Follows player character

Bottom left or Top left is the most common area that the games place their huds as most games move from left to right thus left is usually void.

Location mostly depends on the usual direction the player travels especially if the hud is over the game play area to avoid having void space that’s dedicated to hud which may break immersion.

Bottom is ideal for fps or third person as it’ll usually cover the void area on the ground behind the player character.

Following player character will be difficult as the game is low in resolution in the play area, making it hard to create a clear hud.

With the assumption that the character will be moving in all 4 directions, Ideal choices are either Bottom/Top Left or dedicated void.

Since the emotional goal of the game is tension and thrill, having a dedicated void would break the immersive experiences thus potentially preventing the player from feeling the tension or thrill.

With split between decision of top left or bottom left with very little impact it has on choosing one or the other, the hud will be designed to be placed on top left as the current game has the health counter on the top left.

Drafts

Bar Style Test Tested Variation of the bars when placed side by side to create a sample of a full bar. Rounded Edges or lighter bars didn't improve the design of the bar and potentially reduced clarity.

Health Bar Demo Demo of the full health bar to be implemented. (Current stage as of the end of Sprite 1)

Short Bar Regen Gif

Medium Bar Regen Gif

Long Bar Regen Gif

Animation intended to use early in Sprint 2 after linking live player status to the health bars. Each life takes 5 seconds to recharge and each animation is 5 frames long. Therefore the animation will be in 1fps.