Diegetic UI elements prototype

For this week’s game design course assignment, I’ll be focusing on UI/UX, specifically prototyping diegetic UI elements for a game prototype. I’ll be working in 2D and using Unity to demonstrate how these elements function.

For now, I’ll try to organize my thoughts by creating a diagram of what I want to accomplish. I made this diagram in Miro, and it’s shown below.

The picture above says it all. Essentially, there’s a player character with attached game objects that display the player’s state without needing a game HUD. It’s a simple yet highly effective example of diegetic UI.

1. Health system: The health system will be represented in four states (100%->75%->50%->25%), each state will be represented as a color on the player's helmet/ visor. The player starts with a 100% health state and will progressively degrade when the player gets inflicted with any sort of damage (e.g. fall in lava, gets shot by a laser cannon, hits a space mine etc.)
2. Weapon /Battery system: just like the health system this will also be represented in four states (i.e. 100%->75%->50%->25%), however in the weapon/battery system, each state will be represented as the amount of 'ammo' left in the plasma rifle. The player starts will start with no ammo (i.e. 0% and collecting battery packs increase the ammo to 100%
3. Plasma rifle battery pack: this game object, represented as a single battery pack will be visible only when the player picks up a new battery pack and when the battery level is still greater than or equal to 25%. When the battery is depleted, the battery pack is dropped and cannot be seen on the plasma rifle.

My next step will be to implement this in-engine in unity and will also try to add additional UI elements like add animation to batter pack when it's fully spent.