I wanted to create a zelda style healthbar. This meant having a single heart sprite that could be broken up into quarters so that every quarter represents a health point.

The asset pack already provided a ui component with a background and 3 heart backdrops, as well as animated sprites for a flashing heart.

So in order to break the sprite up into quarters I decided to use a filled image component in Unity and set it to radial fill.

Then I wrote a script to set the health at .25 increments depending on what the total health was.

private void UpdateDisplay()
{
   int remainingHealth = _currentHealth;
   foreach (var heart in _hearts)
   {
      float fill;
      if (remainingHealth > 4)
      {
         fill = 4;
      }
      else
      {
         fill = remainingHealth;
      }
      heart.fillAmount = fill / 4;
      remainingHealth = remainingHealth - 4;
   }
}

I check what the total health is (12 max, 4 per heart image). I keep track of how much health is remaining to be displayed and if the remaining health is more than 4, I fill the heart fully and move on to the next heart. If it is less than four, I divide it by 4 to get is as a fraction and set the fill amount to that.

I also later animated the whole process using a Coroutine, but that code while effective is very messy. So feel free to look at the code or write your own better solution.

Want to see more?

All the code for this project is available publicly online. 

• Game code - https://gitlab.com/LPGames/gdfg-jam-6/-/tree/master/Assets
• Assets:
  • Kings and Pigs by Pixel Frog - https://pixelfrog-assets.itch.io/kings-and-pigs
  • Kenney.nl Platformer Pack Medieval - https://kenney.nl/assets/platformer-pack-medieval