Need help with alternative health bar in Unity GUI

Unity Engine
1

Hi all,

I am novice with GUI scripting.

In my project i need to get Health bar like on the image.
1530052--88340--$1.jpg
And of course i wanna to control number of health (hearts) – public var.

Hearts will decrease by click on the card ) (1 click – 1 heart)

Please! Kick me to the proper doc., event name or tutorial video…

2

You could make the card a gui.button, or put a transparent button over it at least, and decrease the health var when it gets clicked.

Then iterate the amount of hearts to display one next to the other each time.

here is what the code could look like:

public class         YourClass : MonoBehaviour
{
    public int       _life = 6;
    public Texture2D _cardImage;
    public Texture2D _hearthImage;

    void             OnGUI()
    {
        Rect         groupRect;
        Rect         heartRect;
        Rect         cardRect;

        groupRect= new Rect(0, 0, 180, 300);
        heartRect = new Rect(0, 0, 30, 30);
        cardRect= new Rect(0, 30, 180, 270);
        GUI.BeginGroup(groupRect);

        //Draw the card
        if (GUI.Button(cardRect, this._cardImage))
        {
            --this._life;
        }

        //Then draw the hearts
        for (int i = 0; i < this._life; ++i)
        {
            GUI.DrawTexture(heartRect, this._hearthImage);
            heartRect.x += heartRect.width;
        }
        GUI.EndGroup();
    }
}
3

Thank you!

4

You’re welcome, good luck with your game :slight_smile:

5

By the way, how could i add to this code a condition for the 2nd row of hearts.
I mean that, if there will be more than 6 hearts, they will be displayed on the 2nd row like on the image below:
1531193--88496--$2.jpg

6

The math is simple, you divide the life variable by the number of hearts in a row and add 1 to have the number of rows. Then take the number of rows into account for the button position then check for row switching in the current heart loop.

The code would be:

public class         YourClass : MonoBehaviour
{
    public int       _life = 6;
    public Texture2D _cardImage;
    public Texture2D _hearthImage;
    public int       _heartWidth = 30; //This is a bonus to make things more dynamic ;)
    public int       _heartHeight = 30; //This is a bonus to make things more dynamic ;)
    public int       _heartsPerRow = 6;
    public int       _cardHeight = 270;

    void             OnGUI()
    {
        int          rowCount;
        Rect         groupRect;
        Rect         heartRect;
        Rect         cardRect;

        //Calculate the row count and the rects
        rowCount = Mathf.CeilToInt((float)this._life / this._heartsPerRow);

        //Make sure the group is big enough, btw you can change the X and Y of this variable to place the card anywhere you need
        groupRect= new Rect(0, 0, this._heartsPerRow * this._heartWidth, this._cardHeight  + this._heartsPerRow * this._heartHeight);
        heartRect = new Rect(0, 0, this._heartWidth , this._heartHeight);
        cardRect= new Rect(0, this._heartHeight * rowCount, groupRect.width, this._cardHeight); // Place the card below the rows
        
        GUI.BeginGroup(groupRect);

        //Then draw the hearts
        for (int heart = 0; heart  < this._life; ++heart)
        {
            //Check if we reached a new row
            if (heart > 0  heart % this._heartPerRow == 0)
            {
                //Place the heart rect at the beginning of the row
                heartRect.x = 0;
                heartRect.y += this._heartHeight;
            }
            GUI.DrawTexture(heartRect, this._hearthImage);
            heartRect.x += heartRect.width;
        }

        //And finally draw the card
        if (GUI.Button(cardRect, this._cardImage))
        {
            --this._life;
        }
        GUI.EndGroup();
    }
}
7

Oh God! Once more time Thank you for saving my time and nerves )))

8

np ^^.

by the way, i’m sure you noticed I left you some polishing to do (hint, limiting life to 0 would be a good start ;))