Unity C# loops: Health Bar with Hearts

Question

I have problem, I would like to add a halfHeart image to empty bar if the currentHealth is 25 or its multiple except of multiples of 50, because if currentHealth is for example 50 I want to show my fullHeart image in the bar where the halfHeart image used to be. I used the if I < currentHealt / 50 which shows fullHeart image inside of the empty bar if the players hp is 50, 100, 150, 200 etc. Now I just want to use the halfHearts if there are 2 fullHeart so the current hp is for example 100 and we drink potion which adds 25, so the currentHealt will be 125 which means we want a halfHeart to take place.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class PlayerCombat : MonoBehaviour
{
    public int maxHealth = 600;
    public int currentHealth;
    public int numOfHearts;
    public Transform attackPoint;
    public LayerMask enemyLayers;

    public float attackRange = 0.5f;
    public int attackDamage = 50;

    public float attackRate = 2f;
    float nextAttackTime = 0f;

    public Image[] hearts;
    public Sprite fullHeart;
    public Sprite halfHeart;
    public Sprite emptyHeart;



    void Start()
    {
        currentHealth = maxHealth;
    }

    void Update()
    {

        if (Time.time >= nextAttackTime)
        {

            if (Input.GetKeyDown(KeyCode.Mouse0))
            {
                Attack();
                nextAttackTime = Time.time + 1f / attackRate;
            }
        }

        for (int i = 0; i < hearts.Length; i++)
        {

            if (i < currentHealth / 50)
            {

                hearts[i].sprite = fullHeart;

                if (currentHealth % 50 == 0 - 25)
                {

                }


            }
            else
            {

                hearts[i].sprite = emptyHeart;

            }

            if (i < numOfHearts)
            {
                hearts[i].enabled = true;
            }
            else
            {
                hearts[i].enabled = false;
            }

        }

    }

    void Attack()
    {
        Collider2D[] hitEnemies = Physics2D.OverlapCircleAll(attackPoint.position, attackRange, enemyLayers);

        foreach (Collider2D enemy in hitEnemies)
        {
            enemy.GetComponent<Enemy>().TakeDamage(attackDamage);
        }

    }

    void OnDrawGizmosSelected()
    {
        if (attackPoint == null)
            return;

        Gizmos.DrawWireSphere(attackPoint.position, attackRange);
    }
}

Answer 1

You can set the Image.type to Filled and then set the fillMethod to Horizontal . Set the anchor to the left side for left to right fill. Then specify how much of the image is filled using the Image.fillAmount from code.

This allows for fractional amounts of the hearts to be shown.

fillAmount is a float from 0 to 1, 0 being nothing filled, 1 being fully filled. Here is an example provided by Unity

An example in the context of your code could be something like..

var remainingHeartsHealth = myCurrentHealth;

foreach (var heartImage in heartImages)
{
    // Get the health value for this heart, max of 50
    //
    var thisHeartsHealth = Mathf.Min(remainingHeartsHealth, 50);

    // Normalize the hearts health to be between 0 and 1
    //
    heartImage.fillAmount = thisHeartsHealth / 50f;

    // Update the remaining health to be used for hearts, 
    // subtracting the amount we just used, but making sure to not go below 0
    //
    remainingHeartsHealth = Mathf.Max(remainingHeartsHealth - thisHeartsHealth, 0);
}