Using Unity’s UI Builder

Adding Custom Controls

Custom Controls to be used in the UI Builder

EDIT: The base for this code is heavily based on The KiwiCoder’s Behavior Tree.

Behaviour Tree Editor — TheKiwiCoder

The main difference between the 2 is the way the Style Sheet is linked and the behavior of the node inputs. The Project Files can be Found on GitHub at.

GraphViewBehaviorTree/README.md at main · JamesLaFritz/GraphViewBehaviorTree

The Graph View is what is used in Shader Graph, The Animator window, and other node based editor windows in unity. The concepts here can be used to create any node base tree view editor window. Some examples would be Behavior Trees, Custom State Machine System, or even the Ability System from my previous articles. Since I am using a node based behavior tree I want to use the Graph View in my Editor, in particular the nodes and ports.

If you notice there is no Graph View Container in the UI Builders Library.

UI Builder Library

That is because the Graph View is actually Experimental.

Experimental: this API is experimental and might be changed or removed in the future.

Source: https://docs.unity3d.com/ScriptReference/Experimental.GraphView.GraphView.html

Luckily we can create our own custom controls to use in the UI Builder.

Custom controls

Create A Graph View Custom Control

We can make a custom control that will display in the library.

Create a custom control class

The first thing that we need is a Class that Inherits from Graph View. We also need the Experimental Graph View Using Statement. Graph View is a Visual Element.

Behavior Tree View Inherited from Graph View

Expose the custom control to UXML and UI Builder

Now this still does not make it show up in the library. In order to do that we need to add something called UXML Factory from the Unity Engine UI Elements Namespace. We need to pass in the type which will be Behavior Tree View and some traits which we will get from the Graph View that we inherit from. I did not make my own UXML Traits since I am using the ones already provided and it makes things less complicated.

UxmlFactory

or

UxmlFactory

Description

Generic base class for UXML factories, which instantiate a VisualElement using the data read from a UXML file.

T0 The type of the element that will be instantiated. It must derive from VisualElement.

T1 The traits of the element that will be instantiated. It must derive from UxmlTraits.

Source: https://docs.unity3d.com/ScriptReference/UIElements.UxmlFactory_2.html

Behavior Tree View Inherited from Graph View With a new UXML Factory Class

The UXML properties and USS properties that are in the UI Builder Inspector for the Custom Control are exposed by the UXML Traits the Control has.

Expose properties that a custom control represents and other functional aspects of its behavior as UXML properties, and expose properties that affect the look of a custom control as USS properties.

Source : https://docs.unity3d.com/2021.3/Documentation/Manual/UIE-create-custom-controls.html

Since I did not create my own UXML Traits for this Control I used the second UXML Factory and passed it the Graph

Use custom control in UI Builder

Now this shows up in the UI Builder Library Under the Project Tab Custom Controls. I can Drag and Drop it into My Window.

Adding the New Behavior Tree View to My Editor Window

Now it shows up in my Editor Window but it has a height of zero. To fix this I need to change the Flex Grow Height to 1.

Make the new View take up the Entire Editor Window

I do not want to have to make this change every time I so I add a constructor to this and set the Style Flex Grow to 1 now anytime that I add this Control this in-line style is already set.

Adding a constructor with a Flex Grow.

Now to make my Editor look a little better I am going to add Grid Background which is also part of the Experimental Name Space. by using the Insert Method. This takes an index to insert at and a Visual Element To Insert. I doing this to Ensure that the Grid Back Ground is the First Visual Element of the Hierarchy.

Adding Manipulators

Now I want to be able to zoom in/out, pan around, move the nodes around, and use the rectangle selection. to do this I need to add the manipulators that I want. There are several others that can be used but these are the ones I want.

Adding The Manipulators

Split View Custom Control

I want to add a split view to my Editor. Unity has one built in called Two Pane Split View but it does not show up in the UI Builder. It is in the UI Elements Name Space.

Create a custom control class

Split View

Use custom control in UI Builder

Drag and drop the Split View into the Hierarchy. Now the split view requires exactly 2 children. I Added the Behavior Tree View and A visual Element to the Split View. Now If you notice that anytime the split view is Visible in the UI Builder Window you will receive an error letting you know that the split view requires exactly 2 children.

Split View Error

Once you add a split view to your window and you have added 2 children to it this error can be ignored. Just know that when it is visible in the Library in the UI Builder this error will be displayed and can be ignored. If you clear the errors without the Split View being displayed in the Library and the error comes back it means that you have a Split View in your Window that does not meet this requirement. To fix this just add 2 Visual Elements to the Split Viwe. Of course I named mine Left Panel and Right Panel since I am using the split view in the Horizontal Orientation..

Adding 2 Visual Elements to the Split View

Of course this error will also appear if your split view has more then 2 children. To fix it you need to remove the extra child either by deleting it or make it child object of one of the two main children of the Split View.

Split View with more then One Child

The Split View Can have an Horizontal or Vertical Orientation. It also has size for the Fixed Pane Initial Dimensions. And you control which Pane is the Fixed Pane with the Index 0 or 1 (Split View can only have 2 children).

Split View Properties

Conclusion

These Methods can be used to add any custom control type that you would like to the UI Builder. Unity has several other Visual Element Type that are built in that do not show up in the Library You can use these methods to add your own controls to the Library that you can use to drag and drop in the UI Builder. Notice that here I was specifics with the Graph View and named it as Behavior Tree View and I was more Generic with the Split View. The Split View is set up so I can use it on any where that I chose. The Graph View is more specific because I will be I will be using the Graph View Methods like Build Contextual Menu, to set up the Graph View specific to for the Behavior Tree. The Graph View is a powerful view that can be used to create windows similar to the Animator and Shader Graph.