Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Can I get some help with styles ?

Discussion in 'Immediate Mode GUI (IMGUI)' started by Mehd, Aug 20, 2018.

  1. Mehd

    Mehd

    Joined:
    Apr 29, 2016
    Posts:
    91
    Hello y'all !

    I recently created a DecisionTree class for simple AI. For creating them, I also wrote a custom node editor. The things works pretty well for simple projects and you can download the full code at: https://github.com/Mehd6384/Unity/tree/master/DecisionTreeEditor

    So, the thing is functional, but man does it look bad. I'd like to improve that, but I'm getting lost between GUI, EditorGUI, GUILayout, EditorGUILayout...

    Here's a screenshot of the current thing:




    For starters, I'd like to change the style of the field inside the blue box. I'd like to change the police, the fields color the space... Inside these, here's how I'm drawing:

    Code (CSharp):
    1. public void DrawAction(GUISkin skin, float lines_width)
    2.     {
    3.  
    4.         Vector2 small_box_dim = new Vector2(80, 30);
    5.         Vector2 small_box_decal = new Vector2(80, 60);
    6.  
    7.         Rect box_rect = Rect.zero;
    8.         box_rect.center = rect.center + new Vector2(150, 50);
    9.         box_rect.size = new Vector2(300,300);
    10.  
    11.         Vector2 inter = new Vector2(rect.center.x, box_rect.center.y);
    12.         Handles.DrawAAPolyLine(lines_width, new Vector3 []{box_rect.center, inter, rect.center});
    13.  
    14.         GUI.Box(box_rect, "", editing_style);
    15.  
    16.         Rect nbaction_rect = Rect.zero;
    17.         nbaction_rect.center = box_rect.center + new Vector2(-small_box_dim.x/2, -135);
    18.         nbaction_rect.size = small_box_dim;
    19.         NbActions = EditorGUI.IntField(nbaction_rect, NbActions);
    20.  
    21.         NbActions = NbActions < 1 ? 1 : NbActions;
    22.         NbActions = Mathf.Min(NbActions, 5);
    23.  
    24.         if(prob_actions == null)
    25.         {
    26.             prob_actions = new ProbAction [NbActions];
    27.             Debug.Log("Creating prob actions of size " + NbActions.ToString());
    28.         }
    29.  
    30.         if(prob_actions.Length != NbActions)
    31.         {
    32.             prob_actions = new ProbAction[NbActions];
    33.             Debug.Log("Adapting prob actions of size " + NbActions.ToString());
    34.         }
    35.  
    36.         if(prob_actions != null)
    37.         {
    38.             for(int i = 0; i < NbActions; i++)
    39.             {
    40.                 Rect prob_name_box = Rect.zero;
    41.                 prob_name_box.center = nbaction_rect.center + new Vector2(-150 + small_box_dim.x/2, i*45 + 30);
    42.                 prob_name_box.size = small_box_dim;
    43.                 Rect prob_prob_box = prob_name_box;
    44.                 prob_prob_box.center += new Vector2(150,0);
    45.                 prob_name_box.size = small_box_dim;
    46.  
    47.                 prob_actions[i].decision_id = EditorGUI.TextField(prob_name_box, prob_actions[i].decision_id);
    48.                 prob_actions[i].prob = EditorGUI.FloatField(prob_prob_box, prob_actions[i].prob);
    49.             }
    50.         }
    51.  
    52.     }    
    Could someone please help me out on this ? Is there available code I could use as example ? Some tutorials ? Advices ?

    Thanks a lot !
     
  2. Madgvox

    Madgvox

    Joined:
    Apr 13, 2014
    Posts:
    1,317
    GUI is the base class for all of unity's IMGUI methods. It used to be used for runtime IMGUI as well before they switched to the new canvas-based system. EditorGUI is the base class for all of unity's editor IMGUI methods. There's some methods, such as Button, that only exist in GUI. Other methods, such as Toggle, have some form in both GUI and EditorGUI, though EditorGUI's methods are more focused on drawing inspectors rather than generic GUI.

    GUILayout and EditorGUILayout are just Layout versions of GUI and EditorGUI respectively. Largely the same methods, but they'll get automatically laid out rather than being fed explicit position rectangles. Even when you're not in a GUILayout area, you can start one at any time using BeginArea/EndArea. Also worth noting that Layout GUI generates a lot of garbage.

    GUIUtility and EditorGUIUtility are basically the misc. classes for whatever else you might want to do with GUI. There's no real unifying theme here, you'll just want to read through the docs on those classes to see what they have.

    One notable field is GUIUtility.hotControl, as this is how you keep track of what control you're interacting with at any given time.

    GUILayoutUtility is similar, but mainly focused on misc. things you can do with the layout.

    ---

    GUIStyle and optionally GUISkin are the classes you want to check out in terms of changing the look. A common pattern, and one that Unity uses themselves, is to create a private static subclass to contain all your styles, which are then initialized in the static constructor, and used in your gui methods. For example:

    Code (CSharp):
    1. public class MyEditor : EditorWindow {
    2.     static class Styles {
    3.         // declare your styles here
    4.         public static readonly GUIStyle myButtonStyle;
    5.  
    6.         static Styles () {
    7.             // initialize your styles here
    8.             myButtonStyle = new GUIStyle( EditorStyles.button );
    9.             myButtonStyle.fontSize = 22;
    10.         }
    11.     }
    12.  
    13.     void OnGUI () {
    14.         // use the gui styles here
    15.         if( GUILayout.Button( "Push me!", Styles.myButtonStyle ) ) {
    16.             // etc.
    17.         }
    18.     }
    19. }
    If you need/want me to go into any more detail about anything, let me know.
     
    eses, Wattosan, Mehd and 1 other person like this.
  3. Mehd

    Mehd

    Joined:
    Apr 29, 2016
    Posts:
    91
    Hey ! Thanks for your awesome answer ! I'll try out with these new insights and let you know ! :) Thanks !