Change GUI.Box Color?

Unity Engine
1

Hello. I was wondering if any of you knew how to change the color of a GUI.Box. I already have a code with GUI.Box in it and all I want to do is make one of them white and one of them green. And if you know how, can you also please tell me how to make one of my boxes change from green to red smoothly? What I mean by smoothly is that it should go from green to light green to yellow to orange to red, if thats possible. Thanks in advance!
Here’s my code:

var barDisplay : float = 0;
var pos : Vector2 = new Vector2(20,40);
var size : Vector2 = new Vector2(60,20);
var progressBarEmpty : Texture2D;
var progressBarFull : Texture2D;
 
function OnGUI()
{
 
    GUI.BeginGroup (new Rect (pos.x, pos.y, size.x, size.y));
        GUI.Box (Rect (0,0, size.x, size.y),progressBarEmpty);
 
        GUI.BeginGroup (new Rect (0, 0, size.x * barDisplay, size.y));
            GUI.Box (Rect (0,0, size.x, size.y),progressBarFull);
        GUI.EndGroup ();
 
    GUI.EndGroup ();
 
} 
 
function Update()
{
    barDisplay = Time.time * 0.05;
}

P.S. I take no credit for the code above, I found it here: How would you make an energy bar, loading progress bar, health meter, or other visual gradually fill up? - Questions & Answers - Unity Discussions

2

you can use the GUIStyle function…

3

I can’t. I tried and GUIStyle doesn’t have background color. I kept getting errors. Any other way of doing it?

4

Try this.

private GUIStyle currentStyle = null;

void OnGUI()
{	
	InitStyles();
	GUI.Box( new Rect( 0, 0, 100, 100 ), "Hello", currentStyle );
}

private void InitStyles()
{
	if( currentStyle == null )
	{
		currentStyle = new GUIStyle( GUI.skin.box );
		currentStyle.normal.background = MakeTex( 2, 2, new Color( 0f, 1f, 0f, 0.5f ) );
	}
}

private Texture2D MakeTex( int width, int height, Color col )
{
	Color[] pix = new Color[width * height];
	for( int i = 0; i < pix.Length; ++i )
	{
		pix[ i ] = col;
	}
	Texture2D result = new Texture2D( width, height );
	result.SetPixels( pix );
	result.Apply();
	return result;
}
8 Likes
5

Hello. Thanks! This is what I wanted. :smile:

6

Seriously? No mention of GUI.color?

3 Likes
7

You might want to use a white background texture for your button (defined in your GUIStyle), and then GUI.backgroundColor will tint your button the way you would expect:

void OnGUI() {
    GUI.backgroundColor = Color.red;
    GUI.Button(new Rect(10, 10, 100, 30), "Red button", _yourGUIStyle); // your style with white background texture
}
1 Like
8

If you’re like me and just want to create an empty box use this. Avoids memory leak issues caused by creating textures on the fly (common problem with Unity Editor tools).

        void DrawBox (Rect position, Color color) {
            Color oldColor = GUI.color;

            GUI.color = color;
            GUI.Box(position, "");

            GUI.color = oldColor;
        }
9

Well you see, according to
https://docs.unity3d.com/ScriptReference/GUI-color.html

GUI.Color doesn’t change box colors so… yah

1 Like
10

Well you see, you are only slightly correct

Maybe I shouldn’t have assumed it was editor code (since thats what i work with)
But even then, the only reason it doesn’t work with the default game skin is because the box is black. Change box.normal.background to anything else and GUI.color works fine

public class Boxes : EditorWindow {
    [MenuItem( "Window/Boxes" )]
    static void Init () {
        Boxes window = (Boxes) EditorWindow.GetWindow( typeof( Boxes ) );
        window.Show();
        window.position = new Rect( 20, 80, 310, 300 );
    }
    void OnGUI () {
        GUILayout.Box( "Default Box" );
        GUI.color = Color.green;
        GUILayout.Box( "Green Box" );
        GUI.color = Color.red;
        GUILayout.Box( "Red Box" );
    }
}
1 Like
11
  • GUI.color is great, but results in black text for Box.
  • You can change the text with a GUIStyle, but then GUI.color is ignored (nothing to tint).
  • You can add a texture to your GUIStyle, but then your text and background are tinted the same (can’t have white text).
  • You can use GUI.backgroundColor instead of GUI.color, and then you’re good!
Awake() {
        tintableText = new GUIStyle(GUI.skin.box);
        tintableText.normal.background = Texture2D.whiteTexture; // must be white to tint properly
        tintableText.normal.textColor = Color.white; // whatever you want
}

OnGUI() {
    var guicolor_backup = GUI.backgroundColor;
    GUI.backgroundColor = Color.yellow * Color.grey;
    GUILayout.Box("Hi", tintableText);
    GUI.backgroundColor = guicolor_backup;
}
6 Likes
12

Hi @idbrii

Quick question about this sample of code: how do you manage to call “GUI.skin.box” from outside the OnGUI() method?

I get an error every time I try to do something like that…

Thanks!

13

Hi.

(did anyone notice that you can not define own colors but only use the static Color definitions like Color.green or Color.yellow ? If you use a Color like Color new Color(120f,40f,200f,255f) it defaults to white. I guess this is wanted behaviour, but hmm.)

14

Color uses 0.0 to 1.0 range, not 0 to 255 range.

2 Likes
15

That worked for me:

var background = GUI.skin.box.normal.background;
GUI.skin.box.normal.background = Texture2D.grayTexture;
// bla bla
GUI.skin.box.normal.background = background;

UPD
Most likely you need to cache the Texture2D.grayTexture somewhere

16

That’s just pseudo code (it wouldn’t compile because it’s missing void too!).

I usually do a null check in OnGUI to do my init:

void InitGUI() {
    tintableText = new GUIStyle(GUI.skin.box);
    tintableText.normal.background = Texture2D.whiteTexture; // must be white to tint properly
    tintableText.normal.textColor = Color.white; // whatever you want
}
void OnGUI() {
    if (tintableText == null)
    {
        InitGUI();
    }
    var guicolor_backup = GUI.backgroundColor;
    GUI.backgroundColor = Color.yellow * Color.grey;
    GUILayout.Box("Hi", tintableText);
    GUI.backgroundColor = guicolor_backup;
}

(untested again)

1 Like