NGUI - Health bar with heart left and right

Hi! I wanna do a progress bar that has containers to complete with hearts. We made two kind of heart, a left and right. I don’t know how do this, complete the containers with this hearts, each one after other. The containers has a heart form.

As a prefix to my answer, you should really post what you’ve tried so as to:

  • avoid already attempted answers
  • help correct an issue with attempts
  • and probably most importantly, to show that you’ve give it more work than the guy coming next to answer you.

With that said, you really only need a single image for this. NGUI provides you with a UISprite that you can set to “Filled” which, to you, means that you can set how much of the image appears.

You can access this via the fillAmount property from a script. This value is a between 0 (meaning nothing is shown) and 1(all of it). You can pick the direction (vertical, or for your scenario, horizontal).

To put it all together, say, for example, you have 3 hearts total, and you took 1/2 a heart in damage, you could simply set heart 3’s fillAmount to 0.5.

Hope this helps.