Using Unity’s Graph View

Connecting Nodes in The Editor

Now that I have a way to add and delete nodes on my editor I need a way to Connect the nodes together. Some of the Nodes have children and some of them do not. When the Nodes Are connected the children need to be properly set. The Graph View Node as Ports that I can use to help make these connections.

Port

Creating Ports

My Behavior Tree Node View needs an input port and an output port.

Input and Out Put ports added to Behavior Tree Node View

Now I need 2 Methods to create my ports. I created Create Input Ports and Create Output Ports and then call these from the Constructor.

I am going to start with Creating the Input Port since all of my node types are going to be the same. Now the Graph View Node has a method Called Instantiate Port to make it easy to create the ports.

Unity - Scripting API: Experimental.GraphView.Node.InstantiatePort(Orientation,Direction,Type)

This method takes 4 parameter.

1. Orientation — The Port’s orientation. Can be Horizontal (connections flowing to the left or right) or Vertical (connections flowing up or down)
2. Direction — The Direction of the port. Can be Input or Output
3. Capacity — How many edges a port can have connected to it. Can be Single (can only have a single connection) or Multi (can have multiple connections). (Not Shown in the Unity’s Documentation but is required).
4. Type — The Data Type for the Port. Usually used for determining if Port can be connected to this port. i.e output port can only connect to input ports of int.

Creating Input Ports

I want my connections to be flowing up and down. So I will use an Orientation of Vertical. This is an Input so the direction will be Input. I am going to allow multiple inputs to one node this will allow for more then one pathway to get to the Leaf. I will use a Data Type Of Node.

If for some reason the Input failed to be created there is nothing left to do. Else I set the Input Port Name to nothing, it defaults to be the name of the type of data it is. The last thing that is needed is to add this Input Container. I could have added multiple different inputs to the input container Like some Shader Graph Nodes. The Input Container is what holds all of the inputs coming into the node.

Behavior Tree Node View Create Input Ports

My Behavior Tree with the Input Ports created.

Behavior Tree Editor with Input Ports

Creating Output Ports

Now the output ports are going to be slightly different. It depends on the type of Node what Output ports I have. Action Nodes will have no Output ports. Composite Nodes will be Vertical flow, Output, Multiple Outputs (since they are allowed multiple children), and with a Node Data Type. Decorator Nodes will be Vertical flow, Output, Single Output (since they are allowed only one child), and with a Node Data Type. I will use a switch statement to determine the Output port to create.

Switch on Node Creating Output ports

The rest of the Output Creation is the same as the Input Creation except I add the Output Port to the Output Container.Now I have Input Ports and Output ports.

Adding The Output to the Container

Create Output Ports

The Nodes that need Output ports now have Output ports.

Behavior Tree Editor with Input and Output Ports

Making the Connections.

The ports are created but they do not make any connections. I have to override a Method in the Behavior Tree View Get Compatible Ports. This Method returns a list off ports that are compatible with the start port. This determines which ports are compatible with each other.

Unity - Scripting API: Experimental.GraphView.GraphView.GetCompatiblePorts

I am going to use Linq and Lambda expression to determine what ports are compatible with what ports.

Queryable.Where Method (System.Linq)

I get a list of all the ports in the graph view, get an IEnumerable<TSource> where the conditions match. I then have to convert the results back to a list. I return the converted List.

What ports are compatible with what ports?

1. One Port must be an Input and the other must be an Output.
2. The Node can not connect to itself.
3. The ports must be of the same port type.

Get Compatible Ports

I can now properly connect my nodes.

Making Connections

Making Children From the Connections

In order for me to be able to add children, remove children, or get the children of Nodes from the connection made in the editor I need to create a way to need a way to add a child to a Node, remove a child from aNode and get a list of Children from a Node.

Node

I will start off with the Node itself. These will be empty Methods it will be up to the Nodes that have children to actually implement these (Composite and Decorator) but the Behavior Tree will be able to call these Methods.

Node Add Child, Remove Child, and Get Children

Decorator Node

The Decorator only has one Child so the Add Child I just set the Child to the passed in Node. To Remove the Child I check to see if the Child is the Passed in Node and if it is I set the Child to null and the Get Children I return a list containing the Child.

Composite Node

This one is easier to do. I add the child to the children, remove the child from the children and return the children.

Behavior Tree

The Behavior Tree will need to be able to Add, Remove, and Get Children from a parent Node.

Behavior Tree Add Child, Remove Child, Get Children

To add a child to a parent in the Behavior tree I first need to make sure that the parent exist in the Nodes. If it doesn’t then there is no need to continue; If it does then I add the child node to the parent. If the child does not exist in the nodes list then I also add it.

Behavior Tree Add Child

To remove a child from a parent in the Behavior tree I first need to make sure that the parent exist in the Nodes. If it doesn’t then there is no need to continue. If it does then I remove the child node from the parent.

Behavior Tree Remove Child

To get a list of children from the parent if the Nodes as the parent I return the parent’s children otherwise I return an empty list.

Behavior Tree Get Children

Behavior Tree View

To delete the edge I need to hook into the Graph View Change Elements To Remove just like I did when adding and removing Nodes to the Editor.

In the elements For Each Loop I cast the Element as an Edge. If this element is an edge I get the parent view from the edge output node view and the child view from the edge input node. I then remove the child view Node from the parent view Node of the Tree.

Behavior Tree View Graph View Changed Method f there are Elements To Remove

In order to create the child from the parent I to Hook into the Graph View Change Edges to Create.

Unity - Scripting API: Experimental.GraphView.GraphViewChange.edgesToCreate

If there are Edges To Create I loop through all the Edges. I get the parent view from the edge’s output node and the child view from the edge’s input node. I then add the child view Node to the parent view Node on the tree.

Behavior Tree View Graph View Changed Method if there are Edges To Create

I end up with the Method looking like this.

Behavior Tree View Graph View Changed Method

Now I have edges creating the correct parent child relationship.

Behavior Tree Editor Adds Children When Connections are made

If I change the selection say to a different Behavior Tree and come back I still have the correct relationship but the Editor no longer shows it correctly. To fix this I have to add it to the Populate View Method.

I need to Loop through all of the nodes in tree

Loop Through all the nodes in the tree

Next I need to get the Behavior Tree Node View from the Node, this is what contains the port that I am making the connection from. Lucky for me Unity provides the Graph View with the perfect method.

Unity - Scripting API: Experimental.GraphView.GraphView.GetNodeByGuid

This takes in a string for the guid, which so happens my Node contains. Now this method gives me gives me the Experimental.GraphView.Node that has this guid. It just so happens that My Behavior Tree Node View is a Experimental.GraphView.Node and that I know that I can safely cast and that the object that I have is what I want.

Get the Node View for the parent Node

Now I need to loo through all of the children of the Node.

Loop through all children Nodes

I need the port to connect to which is the input of the child Behavior Tree Node View so I will use the GraphView.GetNodeByGuid method to get the view.

Getting the child Behavior Tree Node View

All that I need to do know is make the connection. Which it so happens Unity provides me a method to do so.

Unity - Scripting API: Experimental.GraphView.Port.ConnectTo

Port.ConnectTo will give me an Experimental.GraphView.Edge

Getting the Edge from connecting the parent output to the child input

This edge just happens to be Visual Element that can be add to the Graph View.

Add the edge to the Graph View

The complete loop looks like.

Populating the Children as Connections

I used LINQ-expressions to do the same thing to do the same thing I just broke it down in to explaining each individual part above. The LINQ is easier for me to read and understand what I was planning to achieve.

For every Edge that I get from connecting all parent Nodes to all of their children add the Edge to the Graph View.

My Populate View Method looks like.

Behavior Tree Populate View now populates the Connections to Children

Conclusion

I have made connections between the Nodes using Ports. I have Hooked into the Graph View Changed event to make those connections mean something, changing the Visual Elements of the Behavior Tree Node View to Children of the Scriptable Object Node. I have taken the Scriptable Object Node’s children and made them Display Visually in the Editor. There are many things that can be done to improve this. For example make the Composite Node list reorder-able change the Output Port to be a list of Single Outputs instead of one Multi, have an Output Port for each child that the Composite Node contains, and order the children by the order that they are on the outputs. The UnityEditor.Experimental.GraphView.GraphView has many other features that can be utilized to help with things. UnityEditor.Experimental.GraphView Namespace has all kinds of things like Blackboard or Graph View Blackboard Window just to name a few. I Suggest that you take a ll=ook at some of these things or take a more detailed look at some of the things that where introduced in this article like the Port or the Node.