Healthbar Ratio Question

[Benifir]

I’ve looked around on the forums and answers, as well as google, and couldn’t find anything relevant to the issue I’m having. As the healthbar decreases in length, it also decreases in width. If you’d mind taking a look to see if there are any issues I’d appreciate it greatly.

Here is an example of what it looks like:

And here is the section of code that controlls it:

using UnityEngine;
using System.Collections;

public class HealthBarManager : MonoBehaviour {
	public Texture2D PartyHealthbarOutline;
	public Texture2D PartyHealthbarGreen;
	public Texture2D PartyHealthbarYellow;
	public Texture2D PartyHealthbarRed;

	public string PartyMemberName;
	public float PartyMemberMaxHealth;
	public float PartyMemberCurHealth;
	
	private float PartyMemberHealthRatio;
	private float PartyHealthBarLength;
	private float PartyHealthBarWidth;

	void OnGUI () {
		GUIStyle PartyMemberGUIStyle = new GUIStyle(GUI.skin.label);
		PartyMemberGUIStyle.fontSize = 10;
		PartyMemberGUIStyle.normal.textColor = Color.white;
	
		GUI.Label(new Rect(20,70,170,80), PartyHealthbarOutline);
	
		GUI.Label(new Rect(50,75,30,20), PartyMemberName, PartyMemberGUIStyle);			//Display the Players name
	
		DeterminePartyHealthbarColor();
	}

	public void DeterminePartyHealthbarColor() {
		AdjustCurrentHealth(0);
		
		if(PartyMemberCurHealth >= (PartyMemberMaxHealth - (PartyMemberMaxHealth / 3))) {
			GUI.Label(new Rect(90.2f,78.49f,PartyHealthBarLength,60), PartyHealthbarGreen);
		}
		else if(PartyMemberCurHealth < (PartyMemberMaxHealth - (PartyMemberMaxHealth / 3)) & PartyMemberCurHealth >= (PartyMemberMaxHealth - ((PartyMemberMaxHealth / 3) * 2))) {
			GUI.Label(new Rect(90.2f,78.49f,PartyHealthBarLength,60), PartyHealthbarYellow);
		}
		else if(PartyMemberCurHealth < (PartyMemberMaxHealth - ((PartyMemberMaxHealth / 3) * 2))) {
			GUI.Label(new Rect(90.2f,78.49f,PartyHealthBarLength,60), PartyHealthbarRed);
		}
		else {
			Debug.LogError("Healthbar color to use is unknown!");
		}
	}
	
	public void AdjustCurrentHealth(int Adj) {
		
		PartyMemberCurHealth += Adj;
		
		if (PartyMemberCurHealth < 0)
			PartyMemberCurHealth = 0;
		if(PartyMemberCurHealth > PartyMemberMaxHealth)
			PartyMemberCurHealth = PartyMemberMaxHealth;
		if(PartyMemberMaxHealth < 1)
			PartyMemberMaxHealth = 1;
		
		PartyMemberHealthRatio = PartyMemberCurHealth / PartyMemberMaxHealth;
		PartyHealthBarLength = 93 * PartyMemberHealthRatio;
	}
}

[Bunny83]

Well, that’s simple. You don’t use a beckground texture for your GUIStyle but you use the Textures as “content”. Unity scales the content proportionally so that it fits into the given rect. Since you made the width smaller the image doesn’t fit into the rect and it’s scaled down.

You want to use the textures as background images. You could create the GUIStyles on the fly (like you did already) but in general it’s way easier to use a GUISkin.

Just create a new GUISkin in your project view. It will be initialized with all the default styles. Now at the very bottom there’s an array called “custom styles”. There you can create your own “special” GUIStyles. The nice thing about those is you can even tweak the values while you’re testing in the editor.

So just add a new style by increasing the “count” variable of the array. Now you just have to expand the “normal” state of that style and drag&drop your desired texture onto the background image slot. Don’t forget to give your style a unique name for example “HealthBarInner”.

In your script you have to create a public variable of type GUISkin, assign your skin-asset to the variable in the inspector and add this line at the start of OnGUI:

GUI.skin = mySkinVariable;

Once your skin is set as the “active one”, you can simply pass a string of the style name for the optional GUIStyle parameter of all GUI methods.

So it might look like this:

using UnityEngine;
using System.Collections;

public class HealthBarManager : MonoBehaviour {

    public GUISkin mySkin;

    public string PartyMemberName;
    public float PartyMemberMaxHealth;
    public float PartyMemberCurHealth;
    
    private float PartyMemberHealthRatio;
    private float PartyHealthBarLength;
    private float PartyHealthBarWidth;
    
    void Start() {
        if(PartyMemberMaxHealth < 1)
            PartyMemberMaxHealth = 1;
    }
    
    void OnGUI () {
        GUI.skin = mySkin;
        GUI.Label(new Rect(20,70,170,80), "", "HealthBarOutline");
        
        GUI.Label(new Rect(50,75,30,20), PartyMemberName, "PartyMemberText");
        
        DeterminePartyHealthbarColor();
    }

    public void DeterminePartyHealthbarColor() {
        AdjustCurrentHealth(0);
        
        if(PartyMemberCurHealth >= ((PartyMemberMaxHealth / 3)*2)) {
            GUI.Label(new Rect(90.2f, 78.49f, PartyHealthBarLength, 60), "", "HealthBarInnerGreen");
        }
        else if(PartyMemberCurHealth >= (PartyMemberMaxHealth / 3)) {
            GUI.Label(new Rect(90.2f, 78.49f, PartyHealthBarLength, 60), "", "HealthBarInnerYellow");
        }
        else {
            GUI.Label(new Rect(90.2f, 78.49f, PartyHealthBarLength, 60), "", "HealthBarInnerRed");
        }
    }
    
    public void AdjustCurrentHealth(int Adj) {
        
        PartyMemberCurHealth += Adj;
        PartyMemberCurHealth = Mathf.Clamp(PartyMemberCurHealth, 0, PartyMemberMaxHealth);
        
        PartyMemberHealthRatio = PartyMemberCurHealth / PartyMemberMaxHealth;
        PartyHealthBarLength = 93 * PartyMemberHealthRatio;
    }
}

In my example your skin should have 5 custom styles:

• HealthBarOutline // The outline of the healthbar
• PartyMemberText // For the player name lable
• HealthBarInnerGreen // The inner health bar style with the green texture
• HealthBarInnerYellow // The inner health bar style with the yellow texture
• HealthBarInnerRed // The inner health bar style with the red texture

As alternative instead of using 3 different styles, you could use one style with a white healthbar-inner texture and just use GUI.color to tint the element green / yellow / red. don’t forget to reset the color to white or everything drawn afterwards will be that color too.

ps: I’ve simplified some of your code since there was a lot redundancy in the if conditions which makes it harder to understand.