Extending the Editor with UIElements - Unite Copenhagen 2019 Talk

If you want to follow along the talk, but can't because video quality is not great then I made notes you can use. I used ver. 2019.3.0b12 to test it out.

First example was very minimalistic, you just need two files:

Assets/Scripts/Hello.cs

Code (CSharp):

1. using UnityEngine;
2.  
3. public class Hello : MonoBehaviour {
4. }

Assets/Scripts/Editor/HelloEditor.cs

Code (CSharp):

1. using UnityEditor;
2. using UnityEngine;
3. using UnityEngine.UIElements;
4.  
5. [CustomEditor(typeof(Hello))]
6. public class HelloEditor : Editor
7. {
8.     private Hello helloWorld;
9.     private VisualElement root;
10.  
11.     public void OnEnable()
12.     {
13.         helloWorld = (Hello)target;
14.         root = new VisualElement();
15.     }
16.  
17.     public override VisualElement CreateInspectorGUI()
18.     {
19.         root.Clear();
20.  
21.         Label label = new Label()
22.         {
23.             text = "Hello UIElements",
24.             style =
25.             {
26.                 fontSize = 26,
27.                 unityFontStyleAndWeight = FontStyle.Bold,
28.             },
29.         };
30.         root.Add(label);
31.         return root;
32.     }
33. }
34.  

 

Second example is using UXML and also USS files. I just added few extras what I found from Unity Manual.

Assets/Scripts/HelloExp.cs (attached to gameobject):

Code (CSharp):

1. using UnityEngine;
2.  
3. [ExecuteInEditMode]
4. public class HelloExp : MonoBehaviour
5. {
6.     public string labelName = "HelloExpUIElements";
7.  
8.     private void Update()
9.     {
10.         gameObject.name = labelName;
11.     }
12. }

Assets/UI/Editor/HelloExpEditor.cs:

Code (CSharp):

1. using UnityEditor;
2. using UnityEngine;
3. using UnityEngine.UIElements;
4.  
5. [CustomEditor(typeof(HelloExp))]
6. public class HelloExpEditor : Editor
7. {
8.     //HelloExp hello;  // its not necessary somehow in this example
9.     VisualElement root;
10.     VisualTreeAsset tree;
11.     StyleSheet styles;
12.  
13.     public void OnEnable()
14.     {
15.         //hello = (HelloExp)target;
16.  
17.         styles = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/UI/Styles/HelloUIStyles.uss");
18.         tree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/UI/Layouts/HelloLayout.uxml");
19.  
20.         root = new VisualElement();
21.         root.styleSheets.Add(styles);
22.     }
23.  
24.     public override VisualElement CreateInspectorGUI()
25.     {
26.         root.Clear();
27.         tree.CloneTree(root);
28.         return root;
29.     }
30. }
31.  

Assets/UI/Layouts/HelloLayout.uxml:

Code (UXML):

1. <?xml version="1.0" encoding="utf-8"?>
2. <UXML xmlns="UnityEngine.UIElements">
3.   <VisualElement name="content" class="row">
4.     <Label text="Select something:"/>
5.   </VisualElement>
6. </UXML>
7.  
8. <!-- Default UXML template did not work -->

Assets/UI/Styles/HelloUIStyles.uss

Code (USS):

1. Label {
2.     font-size: 26px;
3.     color: #FF0000;
4. }
5.  
6. .row {
7.     flex-direction: row;
8.     justify-content: center;
9. }
10.  
11. /* The display default value is flex */
12. /* Dont forget ';' EOL */
13.  

 

For third example I suggest to watch this video https://www.youtube.com/watch?v=CZ39btQ0XlE "Customize the Unity Editor with UIElements!". This is the same example and you can also download the source code.

And I forgot, the Talk "Extending the Editor with UIElements" can be watch