Health & Shield Bar

Design a combat HUD element that shows the player’s health and shield at a glance. Use bars or rings, but make the two values clearly distinct and readable during motion.

This lives in the game HUD, so it has to work while the camera is moving, effects are flashing, and the player is focused on play. The component should stay legible without taking over the screen.

Show both current level and change over time. The player should be able to tell when shield is absorbing damage, when health is exposed, and which resource is closer to running out.

Think about how the bar behaves across states: full, partial, low, broken, and recovering. The visual treatment should make the danger level obvious without needing extra text.

Use separate visual language for each resource: for example, a solid health fill and a brighter, segmented shield layer that can animate independently when damage lands.