Giving UnityGUI elements a background color.

Unity Engine
1

Hey,

I’m writing an editor for some gamedata in Unity. The editor will be a standalone application. Unfortunately this means that I can only use GUI class, and not EditorGUI.

I’m trying to find a way to use BeginHorizontal/EndHorizontal to dynamically size some area to the amount of content I decide to put in it.

I’d like those areas to have a certain background color, but can’t seem to figure out how to do it.

I’m looking for the effect often seen on websites when they need to list many items, and they switch between two different bg colors on every row, in order to give a bit more visual context on where items begin and end.

I could make an GUI.BeginArea() or maybe a group, but then I need to know the exact coordinates beforehand, which I don’t.

Anybody see the magic trick I’m missing?

Bye, Lucas

2

For this effect I use BeginHorizontal/EndHorizontal with different GUIStyles depending on whether the list index is odd or not. Not sure exactly what you’re looking for?

3

I might be a bit thick here, but how does a GUIStyle let you specify a background color for elements inside a BeginHorizontal/EndHorizontal block?

Bye, Lucas

4

BeginHorizontal takes an optional GUIStyle parameter. Assign something with a texture in the normal state to it and it will get rendered behind the controls inside the horizontal block

5

I have the same issue as the OP.
I create BeginHorizontal and I can see the GUIStyle parameter, but

I would like to just set Texture2d as different color dynamically created in the code, I fiddled around but I just cannot dynamically create one color texture to use in GUIStyle.normal.background.
Can you help?

p.s. Not to be a Thread thief i submitted a separate thread on this issue
Changing the Background Color for BeginHorizontal

6

One way to create a texture like this is just to fill in all the pixels yourself using the Texture2D.SetPixels:-

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

This might be inefficient if you are updating the texture each frame for colour animation but should be no problem if the colour changes infrequently.

7

Like a Boss!
You are a god, finally got it to work, tnx.

I’ll post code here so everybody stumbling upon here can use it.

GUIStyle gsAlterQuest = new GUIStyle();
gsAlterQuest.normal.background = MakeTex(600, 1, new Color(1.0f, 1.0f, 1.0f, 0.1f));

for(int i = 0; i < 30; i++)
        {
            if(i%2 == 0)
                GUILayout.BeginHorizontal(gsAlterQuest);
            else
                GUILayout.BeginHorizontal();
            GUILayout.Label("EPIC WIN!!!");
            GUILayout.EndHorizontal();
        }

p.s. C#

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

Thx, it works like charm :wink:

If you need a border too, you can use this function

	private Texture2D MakeTex(int width, int height, Color textureColor, RectOffset border, Color bordercolor)
	{
		int widthInner = width;
		width += border.left;
		width += border.right;

		Color[] pix = new Color[ width * (height + border.top + border.bottom)];


		
		for(int i = 0; i < pix.Length; i++) {
			if(i < (border.bottom * width) )
				pix[i] = bordercolor;
			else if(i >= ( (border.bottom * width) + (height * width)) )  //Border Top
				pix[i] = bordercolor;
			else { //Center of Texture

				if( (i%width) < border.left) // Border left
					pix[i] = bordercolor;
				else if ( (i%width) >= (border.left+widthInner) ) //Border right
					pix[i] = bordercolor;
				else
					pix[i] = textureColor;    //Color texture
			}
		}	

		Texture2D result = new Texture2D(width, height + border.top + border.bottom);
		result.SetPixels(pix);		
		result.Apply();
				
		
		return result;
		
	}
9

you can set the Gui.Color before the horizontal group
and change it back to its original color after that.

Color defaultColor=GUI.color;
GUI.color=Color.cyan;
            if(GUILayout.Button("my button")){
                dosomething();            }
            GUI.color=defaultColor;
6 Likes