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.
