Be the first to post for 'Player Health Bar UI'!



If you’re reading this, there probably aren’t very many posts yet. But don’t worry, you can be the first! Either create a new post or just reply to this one to say ‘hi’.


Not sure if its a delay in uploading but the package is not attached to the lecture at this time.


Thanks for pointing this out Marc. The process @sampattuzzi and @Lucy_Becker are running should lead to this arriving at the same time as the video, I’m tagging them so they can look into it.

Meanwhile I have attached the file.



My UI Health Bar


Noticed a bug introduced. @ben
After moving with the mouse input the character keeps rotating around, I caught this in Bens video at 12:20-12:30 as well. The bug appears to be in the playermovement or the third character somewhere as turning those off solves the issue/

Just a placeholder will probably add mana usage to it later and upgrade so portraits are changed on character type,


This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.



Hey guys, I tried to make health and mana globes, however I could’t figure out how to deplete them diablo-style, so I just ended up changing their scale. The globes contain 3 layers - a mask, which gives them a little bit of texture, a depleted and a non depleted state, the non-depleted state is always rotating. (how much resources does it need, to update their position every frame? is there a better way to do this?)

    healthPercentage = player.healthAsPercentage;
	rectTransform.localScale = new Vector2(healthPercentage, healthPercentage);
	rectTransform.Rotate (Vector3.back, Time.deltaTime * 25f);


I always use the built-in sliders for health bars. Here is one with a simple gradient. Also @irresistiblejelly I also noticed the character constantly rotating after getting to where you sent him.


that rotation bug occured in the first couple of videos, then Ben fixed it, but later on I think he forgot why he wrote the code like he did, and he changed it back.

if (playerToClickPoint.magnitude >= 0.2f) {
	thirdPersonCharacter.Move (playerToClickPoint, false, false);
} else {
	thirdPersonCharacter.Move (, false, false);

he changed the 0.2f back to 0, that’s why the character is rotating when it should stand still


Here is 2 globes of health and mana, I made it in Photoshop :slight_smile:


Ah, they look cool, how did you manage to deplete the currenthealth like that? As you can see in my post, I couldn’t figure it out.


I used the Image’s fill amount :slight_smile:


Ohh, I never noticed that I can change the image type. Thanks!


It does not matter what I set it to, my player always spins around after he stops. he actually points north then west then south then east. He just keeps turning clockwise in four movements repeatedly until you move him again.


Don’t worry about the rotation issue, it is resolved a little later :slight_smile:


I’ve done something a little different too. It seems simpler than playing around with the UV coordinates, but the shape is quite a bit more complicated. Because of this, it isn’t a very clear representation, especially at some of the extreme values like <20 and >80

Similar to others, I’ve used a filled sprite, and am moving forward with the following…

My ‘bar’ appears in the bottom right of my screen - and represents a blood drop to show the players health.

In total, the effect is made up of two images - a detail overlay, and a mask.

The detail overlay has a soft glow, as well as a sheen effect inspired by Ben’s words in the lecture. (I may revisit this image later)

The mask is just a transparent/solid white image that shows the shape that needs to be filled.

The hierarchy is as follows…

Mask contains the plain white image, with a mask component. I’ve also checked ‘Show mask Graphic’ and changed the color slightly of the image so that it looks a little more exciting when drained.

Fill is a plain Image (with ‘background’ sprite), with the image type set to filled, vertical, bottom. Rather than playing around with the UV coords, I’m simply altering the fill amount. The mask takes care of adapting the image to the shape

Outline is simply the detail applied to the top (sheen/glow).

You’ll notice I also have a text box, which displays the current health percentage. This makes it easier to gauge at a glance what your health is, though I’ll probably remove it so to better fit with my ideas and themes.

For formatting purposes, I’m displaying the percentage text as an integer, so ‘33.3345123%’ will never be displayed, nor will ‘45.2%’ - which also looks somewhat untidy to me.

I realize this health bar is likely set up to be used as a prefab of sorts for Enemy health bars - for them I will create something different - but may choose not to show enemy health bars at all.


Hi everyone! Quick question! Is it worth it to use the observer pattern for the health bars (player and enemies alike)? Instead on checking for the current health on every update just wait for health change and then update the UI. What do you think?


You can do it without the observer pattern too :slight_smile:
You can make a method that subtracts the health with an amount you specify in the argument, and after you subtracted the health you can check if health is <= 0 and stuff like that, and then at the end of the method you can refresh the UI. So whenever you call that method, it will do all that stuff in one go :slight_smile:

So you might end up with something like SubHealth(damage);


Just added some slashes. Don’t know if I’ll keep the idea of bar to represent health