How do I make my Health Bar Drain when damage is taken?

I made a Health bar in Photoshop with this design:
http://imgur.com/a/tfIRo

How would I make it so this health bar drains like a normal solid bar over time?
Also I have this same health bar with no green for when the player reaches zero hp, it looks like just the rhombus's with white outlines.

Thanks!

 

You need multiple health bar sprites, like a sprite for each of the health bar boxs.
You need a health int of float. then you do some if states and swap out the sprites,
something like this

Code (CSharp):

1. public Sprite HealthBarNoGreen;
2. public Sprite HealthBar1;
3. public Sprite HealthBar2;
4. public Sprite HealthBar3;
5. public Sprite HealthBar4;
6. public int health; //0 = death, 100 = full health
7.  
8. if(health > 80)
9. {
10. getComponent<SpriteRender>().sprite = HealthBar4;
11. }
12. else if(health > 60)
13. {
14. getComponent<SpriteRender>().sprite = HealthBar3;
15. }
16. else if(health > 40)
17. {
18. getComponent<SpriteRender>().sprite = HealthBar2;
19. }
20. else if(health > 20)
21. {
22. getComponent<SpriteRender>().sprite = HealthBar1;
23. }if(health == 0)
24. {
25. getComponent<SpriteRender>().sprite = HealthBarNoGreen;
26. }

 

Ok, thanks for the info thats really helpful. But I have two more questions, first how do I make the multiple health bar sprites and where do I put them in Unity. Second, wouldnt that only work if the health I was losing is divisible by 20? What if for say I lose 37 health from getting shot or something, how would I represent that?

 

So you want to drain each box before moving on to the next, starting at the rightmost one? The simplest way is to make each box with two images.

-Add an image element to your canvas and set the sprite of this image to your filled box. Name it "bar" or something obvious.
-Set the image type to Filled, fill method to Vertical. The origin should already be at the bottom, but change it if not.
-Add another image as a child of this image, and set its sprite to your border sprite, its image type to Simple. Name it "border".

Now you have a box and can just make a prefab of that to repeat across the canvas as many times as needed. When you change the bar's Fill Amount property it shrinks smoothly at 0.1% per step. Making an object which holds a number of these and handles the amount in each should be pretty easy.

Note: If you make the bar image white you can simply use the Color property to change it to anything you like. No need to have a different image for health/shields/mana etc.

 

what you could do is put all of it in a Array and then based on the amount of health u could set the amount of bars. aka lets say u got 100 Health, and thats 5 bars. then u could say every 20 health one bar is gone. but from that u can fiqure out how much each health bar has. in this case each bar would account for 20% but the bar it self would be 100%.
hope this is understandable atleast this is how i would go and do it.

honestly one of the eaiser ways would to cut into a single piece assuming u have not done that. and from that you can build the amount of bars u wish.

 

Ok so I did what you said but realized instead of doing each individual box I could still use the whole line and it drains perfectly. So now that I have it so it drains nice, how do I get started with the scripting?

 

hi so just saying a must simpler and less code intesive way of doing this is to make it one image then in you inspector add an image script to the health bar then set the "image type" to "filled", then change the "fill method" to "horizontal" then change the "fill origin" to "left" then in your code just set the "fill amount" to what you need
there are many youtube videos on how to do this check them out and good luck

 

Yea that's what I did, but how do I make it drain on its own per say, when I fall from a area to high and take damage, or get shot.

 

Well, if you've read the scripting tutorials under the Learn section you should already have an idea

Start with the script you handle the health in. Add this at the top:

Code (CSharp):

1. using UnityEngine.UI;

and a variable:

Code (CSharp):

1. public Image bar;

Drag the Image object from the hierarchy to the inspector for the object with this script on it. Then when health changes you can set the bar's appearance via bar.fillAmount. Example:

Code (CSharp):

1. bar.fillAmount = health / maxHealth;

Replace with whatever you use, of course.

 

Ok I got it working thanks! My only question is, what do I do to make it go from green to yellow to red?

 

Set the colour of the bar image via bar.color. To tint it red:

Code (CSharp):

1. bar.color = Color.red;

Works best when the bar image is white. Just conditionally tint it based on percentage (health divided by max health). For example, anything below 0.75 might be amber/yellow, and anything below .25 red.

 

I tried using an if statement:

Code (CSharp):

1.         if (healthBar >= 75)
2.         {
3.             healthBar.color = Color.yellow;
4.         }

but it didnt work, it just turns yellow right when I take damage even if im not below 75.

 

Im surprised that compiled, you are checking the value of your healthBar not your health.

Your also check if its over 75 not under.

Code (CSharp):

1. public float midLimit;
2. public float lowLimit;
3.  
4. if(health < lowLimit)
5.      healthBar.color = color.Red;
6. else if(health < midLimit)
7.      healthBar.color = color.Yellow;
8. else
9.      healthBar.color = color.Green;

That should do what you want, but I would also consider exposing the colours so they can be set in editor.

 

For the fill look at ui masking btw, you can hide the fill bar inbetween the gaps that way & not need more than one fill image.

 

Ok itr worked dude!

Just a quick question, is there a way to make it like fade slowly over time from green to red as health goes down and not completely jump from one color to another

 

Color.Lerp will progress between two colours. This method will blend between the colours as you lose hp.

Code (CSharp):

1. public float midLimit;
2. If(health < midLimit)
3.      healthBar.color = Color.Lerp(Color.yellow, Color.red, health / midLimit);
4. else
5.      healthBar.color = Color.Lerp(Color.Green, Color.yellow, (health - midLimit) / (maxHealth - midLimit);

 

Ok the colors were kind of off, like it started at red and went to green then yellow, but I figured it out and got it working. Is needed to be this (btw im using white instead of green):

Code (CSharp):

1.         if (CurrentHealth < midLimit)
2.         {
3.             healthBar.color = Color.Lerp(Color.red, Color.yellow, CurrentHealth / midLimit);
4.         }
5.         else
6.         {
7.             healthBar.color = Color.Lerp(Color.yellow, Color.white, (CurrentHealth - midLimit) / (MaxHealth - midLimit));
8.         }