Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Resolved GUI.Button tints the background image

Discussion in 'Scripting' started by Jacksendary, Sep 1, 2020.

  1. Jacksendary

    Jacksendary

    Joined:
    Jan 31, 2012
    Posts:
    408
    I'm trying to make some custom editors but I've just noticed that buttons for some reason seems to tint the background textures when using buttons, I have no idea why this is and on the image attached below it can clearly be seen that the background is white (255,255,255) but the button is (229, 229, 229) BUT both are having the EXACT same background texture

    does anyone know how this can be fixed?

    I'm on unity 2020.1.1

    upload_2020-9-2_0-4-14.png
     
  2. Antistone

    Antistone

    Joined:
    Feb 22, 2014
    Posts:
    2,836
    I'm not entirely sure I followed your question.

    Buttons have some options for state transitions (changing appearance on hover, click, etc. including one for "normal") and the default setting is a color tint, which is multiplied into the regular color of the Image. Maybe your issue is with that?
     
  3. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    39,065
    There's also an implicit style set, called a skin, a separate style for button, label, box, etc. By default it uses the currently set GUISkin, which I don't think is fully opaque, or possibly not completely white.

    You can make your own
    GUISkin
    asset, then load and use that with
    GUI.skin = mySkin;


    https://docs.unity3d.com/Manual/class-GUISkin.html
     
  4. Jacksendary

    Jacksendary

    Joined:
    Jan 31, 2012
    Posts:
    408
    I think you're referring to the UGUI? I'm using the editor UI (IMGUI)


    I am currently using guistyle from an static class and applying it correctly to the UI eg;


    Code (CSharp):
    1.             EnumPickerItem = new GUIStyle();
    2.             EnumPickerItem.alignment = TextAnchor.MiddleLeft;
    3.             EnumPickerItem.padding = new RectOffset(20, 0, 0, 0);
    4.          
    5.             EnumPickerItem.normal.background = LunarisEditorColors.EnumPickerBackgroundTexture;
    6.             EnumPickerItem.hover.background = LunarisEditorColors.EnumPickerHoverTexture;
    7.             EnumPickerItem.normal.textColor = LunarisEditorColors.Text;
    8.             EnumPickerItem.hover.textColor = LunarisEditorColors.Text;
    9.  
    10.  
    The "LunarisEditorColors.EnumPickerBackgroundTexture" is a plain white texture -
    Base64-string: iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=

    This same texture is used as background for the dropdown window shown in the bottom of this post, I've added it as a background like so:
    Code (CSharp):
    1. GUI.DrawTexture(new Rect(0,0, position.width, position.height), LunarisEditorColors.EnumPickerBackgroundTexture, ScaleMode.StretchToFill);
    meanwhile I'm also adding a collection of buttons depending on the amount of enum items:

    Code (CSharp):
    1.             for (int i = 0; i < enumItems.Count; i++)
    2.             {
    3.                 if (!enumItems[i].name.ToLower().Contains(searchString.ToLower()))
    4.                     continue;
    5.                 GUI.backgroundColor = Color.white;
    6.                 if (GUILayout.Button(enumItems[i].name, (enumItems[i].isSelect ? LunarisEditorStyles.EnumPickerItemSelected : LunarisEditorStyles.EnumPickerItem), GUILayout.Height(20)))
    7.                 {
    8.                     if (!allowMultiSelect)
    9.                     {
    10.                         if (enumItems.Where(t => t.isSelect).Any())
    11.                             foreach (var e in enumItems)
    12.                                 e.isSelect = false;
    13.                     }
    14.  
    15.                     enumItems[i].isSelect = !enumItems[i].isSelect;
    16.                     clicked = true;
    17.                 }
    18.                 Rect rect = GUILayoutUtility.GetLastRect();
    19.                 if (enumItems[i].isSelect)
    20.                 {
    21.                     Rect r = GUILayoutUtility.GetLastRect();
    22.                     GUI.color = Color.green;
    23.                     r.width = 16;
    24.                     r.x += 2;
    25.                     GUI.DrawTexture(r, Resources.Load<Texture2D>("Checkmark"), ScaleMode.ScaleToFit);
    26.                     GUI.color = Color.white;
    27.                 }
    28.                 EditorGUI.DrawRect(rect, new Color(0f, 0f, 0f, 0.1f));
    29.                 GUILayout.Space(8);
    30.                 //GUI.DrawTexture(EditorGUILayout.GetControlRect(false, 4), Resources.Load<Texture2D>("ShadowedDivider"), ScaleMode.StretchToFill);
    31.             }
    Note the line "if (GUILayout.Button(enumItems.name, (enumItems.isSelect ? LunarisEditorStyles.EnumPickerItemSelected : LunarisEditorStyles.EnumPickerItem), GUILayout.Height(20)))" and it is using the guistyle "LunarisEditorStyles.EnumPickerItem" which is using the texture "LunarisEditorColors.EnumPickerBackgroundTexture" which is the same I've used to set the background texture of the dropdown.


    upload_2020-9-2_2-10-11.png

    EDIT: I've just tried using guiskin and the result is the exact same, the buttons are tinted for no reason, but other controls generally seems fine.
     
  5. Jacksendary

    Jacksendary

    Joined:
    Jan 31, 2012
    Posts:
    408
    So while this doesn't really answer my question and still does make it very tedious to style buttons I found that there is a pretty linenar relation between the actual color value and the "shown" color on the button after trying some different colors and fine tuning it; if I make a texture with the color (67,67,67) the shown value is (60,60,60), the behavior is present if I make an entire white texture, (255,255,255) the actual shown color is (229,229,229) as mention in the first post.

    Again this was super tedious and pretty annoying and seems pretty unnecesary (can't wait till UI element is actually getting better and more useful) but following the graph below seems to give me the correct values Y for a give target value X

    upload_2020-9-2_3-3-16.png
     
    FerdowsurAsif likes this.
  6. Antistone

    Antistone

    Joined:
    Feb 22, 2014
    Posts:
    2,836
    I was. Sorry for my misunderstanding.
     
  7. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    39,065
    Is this the problem?

    Code (csharp):
    1. GUI.backgroundColor = Color.white;
    What does it look like if you just use
    GUI.color 
    instead of
    GUI.backgroundColor
    ?

    There's also a
    GUI.contentColor
    but I've never used anything but
    GUI.color.
    ..
     
    Last edited: Sep 2, 2020
  8. Bunny83

    Bunny83

    Joined:
    Oct 18, 2010
    Posts:
    4,120
    Well it's hard to tell from the given information. However things you want to check are:

    - What color space is that texture in or was imported in? This might be a gamma correction issue.
    - It's about 10 % darker. Are you sure that all colors involved (texture pixels as well as tint colors) are 100% opaque? So they don't have any alpha value smaller than 255 or 1.0f?

    ps: You draw a black rectangle with 10% opacity:

    Code (CSharp):
    1. EditorGUI.DrawRect(rect, new Color(0f, 0f, 0f, 0.1f));
    So are you sure that's not your issue? It would match your 10% darkening -.-
     
    Jacksendary and Kurt-Dekker like this.
  9. Jacksendary

    Jacksendary

    Joined:
    Jan 31, 2012
    Posts:
    408
    I'm a F***ing moron.... Thanks.... I'll see myself out
     
    Bunny83 likes this.
  10. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    39,065
    Nah, we're all just working with more and more complex APIs and as a consequence they just have all the more ways to be misused. Glad you're sparkly white now!
     
    Jacksendary likes this.