Changing GUI.Box Color

Questions & Answers
1

Hi,

I have figured out how to tint the GUI.Box or "fatigue bar" for my in-game gui. My question is: how can I make the GUI.Box green or red or blue or whatever besides grey and 'tinted'?



Texture2D FatigueEmpty; 

void OnGUI()
{
    Vector2 size = new Vector2(275, 11.5f); 

    // FATIGUE - Green
    GUI.BeginGroup( new Rect ( size.x, 0, 256, size.y));
        GUI.Box( new Rect ( 0, 0, 256, size.y), FatigueEmpty);
        GUI.BeginGroup( new Rect ( 0, 0, 256 * fatigue, size.y));

    Color FatigueColor = GUI.color;
    FatigueColor.a = 0.5f;  
    GUI.color = FatigueColor;   // 'tint' the Fatigue Bar

        GUI.Box(new Rect ( 0, 0, 256, size.y), FatigueEmpty);

    GUI.EndGroup();
    GUI.EndGroup();

    FatigueColor.a = 1f;
    GUI.color = FatigueColor;  // change it back
}




`


And this below: 




void OnGUI()

{

Vector2 size = new Vector2(275, 11.5f);


// FATIGUE - Green
GUI.BeginGroup( new Rect ( size.x, 0, 256, size.y));
    GUI.Box( new Rect ( 0, 0, 256, size.y), FatigueEmpty);
    GUI.BeginGroup( new Rect ( 0, 0, 256 * fatigue, size.y));

Color FatigueColor = GUI.color;
FatigueColor = Color.green;
GUI.color = FatigueColor;

        GUI.Box(new Rect ( 0, 0, 256, size.y), FatigueEmpty);

GUI.EndGroup();
GUI.EndGroup();

FatigueColor = Color.grey;  // The default color
GUI.color = FatigueColor;   // change it back



}

`

Using the Color type, 'FatigueColor' I tried to store a Color.green into it. then transfer that to the GUI.color so that the following GUI.Box can use it..Didn't work. I also tried FatigueColor.g (for green) in the same scheme as FatigueColor.a = 0.5f but that didn't work either..

Could someone help me figure out how to change the color of these boxes?

3

Why using a texture of 128x128 ? The real problem is that the default skin uses multiply, so when applying a color, the latter is mixed with the default one. Using a skin with a white background is sufficient to do the trick.

Here is a simple script to draw boxes of any color without hassle:

private static readonly Texture2D backgroundTexture = Texture2D.whiteTexture;
    private static readonly GUIStyle textureStyle = new GUIStyle {normal = new GUIStyleState { background = backgroundTexture } };

    public static void DrawRect(Rect position, Color color, GUIContent content = null)
    {
        var backgroundColor = GUI.backgroundColor;
        GUI.backgroundColor = color;
        GUI.Box(position, content ?? GUIContent.none, textureStyle);
        GUI.backgroundColor = backgroundColor;
    }

The same applies for other GUI things, like labels and such.

2

I put a little script together where you can se how you can change the background color of your Box using changing the texture from your GUIStyle.

GUIStyle style = new GUIStyle();
Texture2D texture = new Texture2D(128, 128);

public void OnGUI()
{
        for (int y = 0; y < texture.height; ++y)
        {
            for (int x = 0; x < texture.width; ++x)
            {
                float r = Random.value;
                Color color = new Color(r, r, r);
                texture.SetPixel(x, y, color);
            }
        }
        texture.Apply();

        style.normal.background = texture;
        GUI.Box(new Rect(100, 100, 100, 100), new GUIContent(""), style);
}