Representing Player Health

HealthTransp
The current iteration of the player health bar

Influences

It’s becoming increasingly popular in modern titles (particularly futuristic or open world titles) to have various UI elements that move around the screen/world in games according to a variety of factors from explosion forces to camera movement.

BOTW
The ring drains clockwise as the player loses stamina.

In The Legend of Zelda: Breath of the Wild, the player’s stamina meter tracks Link’s position in screen space and displays it next to them. This makes it look more dynamic than just a static bar or overlay on the screen.

I wanted to achieve my own spin on it for showing health in this project. To have a health bar that looked part of the action rather than an accessory to it.

Process

I originally experimented with a full circle for health but could not find a good place for it to fit. For it to be big enough for the player to see clearly, it took way too much screen real-estate.

By cutting the circle in half, I was presnted with a whole plethora of new possibilities in placement:

HealthBarTweaking
Tweaking/testing the bar’s location and rotation in Unity.

With rotation now part of the equation I experimented with both as I moved the bar around the screen.

In the end I settled on having the bar towards the character’s waist as I found it the least distracting during gameplay and the most natural fit to the character’s geometry.

I also experimented with having the health bars being fully opaque but in the end I decided against it as whenever it covered the enemy character, that would mean the player is losing critical information during combat.

HealthOpaque

I may tweak the scale a bit more in the future, as it does still take a bit more screen space than I would like, but for now I am happy with its operation.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close