Multiple Fill images as a health bar

So i'm wanting to create some sort of health bar using multiple fill images (as hearts) in a similar style to a minecraft healthbar but i'm struggling figuring out how this would work

What I want:
The amount of segments for each icon/heart (default is two but i might add support for 4)
Total health to be shared across each heart (so if the player's health is 19, they have 9 hearts the last heart is a half heart)
The ability to use multiple images (e.g. overhealth - any health over the max health is shown as gold hearts)

If anyone knows a way to do this then I'd love the help

 

One general strategy could be to use a mask graphic with the number of transparent heart cutouts that you need, and draw (lineRenderer in desired color) or stretch (an object of desired color) behind it. If you want to see outlines around the placeholders, include those in your mask graphic. For your each heart or half heart you just need to calculate how far to draw or stretch. For the extra overhealth, use a different object and color underneath for that section.

I think this has to be one of the simplest to implement - I've never tried it. Some time ago I used a more complex method by arranging heart objects and using an array of placement offsets.

I've only provided some clues here because I'm not sure of your level of experience with Unity.

 

Another approach would be to use the Fillmode on a UI image and setting it to radial. 180 degrees will be half a heart, 90 degrees is a quarter. The only downside is that the resulting shape will always be rendered using a radial fill, so having more then 4 sections per heart might not look the way you want. Upside is that you can animate between two states using Fillmode without having to mask anything.

 

I dont really need a mask as the heart is perfectly shaped (i'm using the minecraft heart as a template) and i've never really worked with Masks before
The only idea i have is to make some sort of threshold thing for each heart

 

@MichaelTheAvali

Which part you have problem with;

1. The visuals / view (= how to display and layout UI elements)

2. The calculation part (how many full hearts + partial hearts based on maximum health value) ?

Anyway, you can use UI + horizontal layout group to automatically layout as many heart graphics as you need.

Then it is a matter of calculating how many full hearts you have (relative to full energy amount) and how many partial hearts you have.

For full hearts, you'll set the full heart sprite. For the last active heart, based on partial heart count, you can calculate, which partial heart image you will show.

 

let me put it this way, I'm wanting it layed out the same way in minecraft except without the half heart images, I want to use a full heart image but in fill mode so it can become a half heart, Basiclly I'm trying to save on using too many assets but to also make it easily usable by others

 

Google around - there are plenty of tutorials and resources:

Unity 5 Tutorial: Heart health - like in Zelda or Minecraft C#

 

I'll have a look, if i cant get any other method better than this, I'll use it

 

One way to do the math is to not put these hearts in the UI directly, but generating them in code. Let's say you have a value called hp, a value called maxHp. Since you have "overhealth" hp can be greater then maxHp. The logic would be then, that for every hit point you have there's a heart, and for any hitpoint above maxHP there's a golden heart.

In pseudo code:

Code (CSharp):

1. foreach(int i = 0; i < hp; i++){
2.     if (i < maxHp) {
3.         // draw a red heart
4.     } else {
5.         // draw a golden heart
6.     }
7. }

You can draw hearts in the UI by:

1. Creating a new GameObject
2. Adding an Image component to it
3. Assigning a Sprite to the Image component
4. Setting it's transform.parent to a Canvas
5. Modifying it's RectTransform for positioning

For the last step you'd simply multiply the value i by the image's width and as much margin as you'd want.

 

I think the best thing here for me right now is that the more ideas I get, the better since if one idea doesnt work, I can try the next idea

Edit: forgot to say, if both ideas work, i could find a way to merge them

 

Thanks, this actually helped

I'll have to try and find a way to work that with my current set up

 

I have this exact example in my free Datasacks package.

The specific scene you want is called HealthMeter, and uses datasacks to implement both an analog and a discrete "chunk" health meter.

Even if you don't want to use datasacks, you can always look at how I set up the UI in that scene and roll your own.

Datasacks is presently hosted at these locations:

https://bitbucket.org/kurtdekker/datasacks

https://github.com/kurtdekker/datasacks

https://gitlab.com/kurtdekker/datasacks

https://sourceforge.net/projects/datasacks/

The above uses a PNG that it shows parts of. If instead you want to go with discrete Image components in a HorizonalLayoutGroup or GridLayoutGroup, the Datasack script called DSGameObjectControl can be configured to support controlling the appearance of an array of objects on and off.

There is an example scene for DSGameObjectcontrol called (appropriately) ExampleUsingDSGameObjectControl.unity

 

I'll have a look, even if i've already got this solved, i can still try out other solutions to see if they are better or not