Giving UnityGUI elements a background color.

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

 

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?

 

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

 

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

 

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

 

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

Code (csharp):

1. function MakeTex(width: int, height: int, col: Color) {
2.     var pix = new Color[width * height];
3.    
4.     for (i = 0; i < pix.Length; i++) {
5.         pix[i] = col;
6.     }
7.    
8.     var result = new Texture2D(width, height);
9.     result.SetPixels(pix);
10.     result.Apply();
11.     return result;
12. }

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.

 

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.

Code (csharp):

1.  
2. GUIStyle gsAlterQuest = new GUIStyle();
3. gsAlterQuest.normal.background = MakeTex(600, 1, new Color(1.0f, 1.0f, 1.0f, 0.1f));
4.  
5. for(int i = 0; i < 30; i++)
6.         {
7.             if(i%2 == 0)
8.                 GUILayout.BeginHorizontal(gsAlterQuest);
9.             else
10.                 GUILayout.BeginHorizontal();
11.             GUILayout.Label("EPIC WIN!!!");
12.             GUILayout.EndHorizontal();
13.         }
14.  

p.s. C#

Code (csharp):

1.  
2. private Texture2D MakeTex(int width, int height, Color col)
3.     {
4.         Color[] pix = new Color[width*height];
5.  
6.         for(int i = 0; i < pix.Length; i++)
7.             pix[i] = col;
8.  
9.         Texture2D result = new Texture2D(width, height);
10.         result.SetPixels(pix);
11.         result.Apply();
12.  
13.         return result;
14.     }
15.  

 

Thx, it works like charm

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

Code (csharp):

1.  
2.  
3.     private Texture2D MakeTex(int width, int height, Color textureColor, RectOffset border, Color bordercolor)
4.     {
5.         int widthInner = width;
6.         width += border.left;
7.         width += border.right;
8.  
9.         Color[] pix = new Color[ width * (height + border.top + border.bottom)];
10.  
11.  
12.        
13.         for(int i = 0; i < pix.Length; i++) {
14.             if(i < (border.bottom * width) )
15.                 pix[i] = bordercolor;
16.             else if(i >= ( (border.bottom * width) + (height * width)) )  //Border Top
17.                 pix[i] = bordercolor;
18.             else { //Center of Texture
19.  
20.                 if( (i%width) < border.left) // Border left
21.                     pix[i] = bordercolor;
22.                 else if ( (i%width) >= (border.left+widthInner) ) //Border right
23.                     pix[i] = bordercolor;
24.                 else
25.                     pix[i] = textureColor;    //Color texture
26.             }
27.         }  
28.  
29.         Texture2D result = new Texture2D(width, height + border.top + border.bottom);
30.         result.SetPixels(pix);     
31.         result.Apply();
32.                
33.        
34.         return result;
35.        
36.     }
37.  

 

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

Code (CSharp):

1. Color defaultColor=GUI.color;
2. GUI.color=Color.cyan;
3.             if(GUILayout.Button("my button")){
4.                 dosomething();            }
5.             GUI.color=defaultColor;