Color the GUI.Box

Hi,

What can I do to make my GUI.Box colored? The default color is appears to be grey. Below is what I have setup in the exact format that I prefer:

`void Start()
{
// do stuff to Texture2D FatigueEmpty to make it a green color
}
void OnGUI()
{
Vector2 size = new Vector2(275, 11.5f);

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)); // progress bar
        GUI.Box(new Rect (0, 0, 256, size.y), FatigueEmpty);
GUI.EndGroup();
GUI.EndGroup();

}
`

Could someone show how to make this GUI.Box green?

You're going to need to either supply a skin with a modified box style, or pass a GUIStyle to the Box call with modifications

In either case, you'll need to change the background image for each state in the style to a custom one - either green, or white so it can be tinted

This is the style you'll need to change: http://unity3d.com/support/documentation/ScriptReference/GUISkin-box.html

General style info: http://unity3d.com/support/documentation/ScriptReference/GUIStyle.html

As others have said, a new GUIStyle is the key to this. Here's a useful routine that clones an existing GUIStyle (would be nice if Unity had a copy constructor for GUIStyle).


EDIT: As of Unity 3.1 there is a copy constructor, so just use ...

GUIStyle myStyle = new GUIStyle(copyFromStyle);


If you're still using Unity 2.6, this may be useful ...

GUIStyle CloneGUIStyle(GUIStyle source)
{
    GUIStyle clone = new GUIStyle();

    clone.normal = source.normal;
    clone.hover = source.hover;
    clone.active = source.active;
    clone.onNormal = source.onNormal;
    clone.onHover = source.onHover;
    clone.onActive = source.onActive;
    clone.focused = source.focused;
    clone.onFocused = source.onFocused;
    clone.border = source.border;
    clone.margin = source.margin;
    clone.padding = source.padding;
    clone.overflow = source.overflow;
    clone.font = source.font;
    clone.imagePosition = source.imagePosition;
    clone.alignment = source.alignment;
    clone.wordWrap = source.wordWrap;
    clone.clipping = source.clipping;
    clone.contentOffset = source.contentOffset;
    clone.fixedWidth = source.fixedWidth;
    //clone.fontSize = source.fontSize;
    //clone.fontStyle = source.fontStyle;
    clone.fixedHeight = source.fixedHeight;
    clone.stretchWidth = source.stretchWidth;
    clone.stretchHeight = source.stretchHeight;
    //clone.lineHeight = source.lineHeight;

    return clone;
}

I've commented out fontSize and fontStyle, which are in the docs but don't compile for me, I'm guessing they are added in 3.0 (I'm still on 2.6), and also lineHeight, which is readonly.

To solve your box colour problem, you would do something like ...

GUIStyle mystyle = CloneGUIStyle(GUI.skin.box);
mystyle.normal.background = mybackgroundimage;

where mybackgroundimage is an image with the colour you want. Note that the colour of the box comes from a background image, not an RGB value, and if you want a border around the box you need to make sure your image includes the border.

You need to supply a GUIStyle along with your draw call.

GUI.Label can take a style as a third parameter.

private void OnGUI()
{
    GUIStyle myStyle = new GUIStyle();
    myStyle.font = myFont;
    GUI.Label(new Rect(10,10, 100, 30), "Hello World!", myStyle);
}

The Font must be created as a game asset and can be assigned to the script via the property inspector. It can contain a material that will specify color.

As for creating the initial Font, it is often best to find a good ttf font that you like, import that, then assign a material with the appropriate color. This site has a bunch of great references on fonts.

Also, if you just want to change the color, you can use GUI.contentColor. (There's also GUI.color and GUI.backgroundColor.) You can scale content without having to use new styles or import fonts at different sizes by changing GUI.matrix, but it won't be pixel-perfect in that case.