Serializing a Node Based Editor in Unity

It’s been a while since I wrote my last blog post (almost a year), and frankly, Bounzy! is partly to blame for it. It’s a great success, but that success came at a cost for me: dropping everything else I do at work – authoring blog posts was first to go. However, Bounzy!‘s development is almost finished, and that means I can get back to writing!

I actually don’t get a lot of feedback on my posts, but one post stood out: Creating a Node Based Editor in Unity. Some people asked for a more advanced version and some asked how they can save and load data to the editor. I can make an advanced version, but it probably wouldn’t cover all usage cases. On the other hand, serializing (and deserializing) a node list is a more common problem. Although I addressed some issues in XML Serialization in Unity post, I would like to complete the node based editor by adding save and load features in this post.

So, in this post we’ll have a look at those two posts, merge them together and fix some issues. We might even end up revisiting Creating a Clone of Unity’s Console Window. After this tutorial, you’ll have a node based editor which can restore its last state after it is closed.

Revisiting the Node Based Editor

Well, it’s kind of obvious, but we need a node based editor in order to serialize it. We’ll use the code from this post, so if you haven’t already, go ahead and check it out now. It’s pretty straightforward, but we’ll have to modify it in order to properly serialize the nodes.

node-based-editor
The node based editor we created previously

Revisiting XML Serialization

There are a number of serialization options, such as JSON or Unity’s own serialization system. However, since we already covered XML serialization previously, why not use it? We’ll use the XMLOp class and some of the XML attributes from this post.

Revisiting Console Window Clone

This post is not that relevant to our matter at hand, but the node editor window lacks buttons for saving and loading. It would be nice to stick with Unity’s standards, so I’ll copy the menu bar from this window clone. It is easy to implement and nice to look at.

Unity's console window
We’ll copy the part that you see in area 1

Adding a Menu Bar

We’ll start with adding a menu bar, and we’ll copy it from the console window clone:

On line 56, we call DrawMenuBar() method and between lines 69-82 we create the menu bar. The console window clone had a button and 6 toggles, but since we are only serializing and deserializing, we need no more than two buttons. Keep in mind that the editor GUI system has a draw order and it draws elements from back to front in the order you call them. That’s why we are drawing the menu bar after drawing the grid. Otherwise the grid would have been drawn over the menu bar.

DrawMenuBar() is called before DrawGrid(), hence the ugly grid over the menu bar.

Currently, save and load buttons do nothing, but we’ll get to that.

Serialization

Next up, we need to prepare our classes (Node and Connection) for serialization. Let’s remember the two important key points about XML serializing:

  1. XML serializer can only serialize public fields.
  2. Class to be serialized should have a parameterless constructor.

Rule number 1 doesn’t cause that many problems (it still causes some but we’ll get to that), but rule number 2 is problematic. Both of our classes have constructors with parameters. Let’s fix that first:

Next, we are going to ignore the properties that can’t be serialized or don’t need to be serialized. For example, in Node class, GUIStyles can be left out of serialization, because they are already provided by the editor itself. We don’t need isDragged or isSelected either. Actually, Node class has only one property that needs to be serialized: the rect. Let’s see how Node class looks like after properly ignoring unnecessary and unserializable properties:

Believe it or not, Node class is ready to be serialized at this point. So, let’s serialize nodes!

Saving Nodes

Remember the save button which did nothing at all? Well, it should at least save nodes, since they are now serializable. The method for saving nodes is really simple:

And we are going to call that method when the user clicks Save button:

Now, open up your Node Based Editor, place a couple of nodes, and then hit Save (you must have a Resources folder under Assets before doing that). Unity will create a file called nodes.xml in Resources, if you can’t see it, simply right-click on Resources and then click Reimport. Contents of the nodes.xml file should be something like this:

So, our nodes can be serialized now and if we can serialize Connections, our node editor will be completely serializable. Let’s get on with it then.

Serializing Connections

Connection class has only 2 properties that can be serialized: inPoint (ConnectionPoint) and outPoint (ConnectionPoint). However, serializing these two properties would be meaningless, because objects do not keep references to other objects after deserialization. Which means, if we deserialize a connection, it would create two connection points and connect them, but those connection points wouldn’t belong to the nodes it used to connect (see the figure below).

Serialization breaks connections and deserializing doesn’t fix that.

In order to solve this issue, we need some kind of an identifier for a connection point, i.e a unique ID, so that after deserializing, we can look for those connection points by their IDs and give reference to actual objects to restore connections.

Of course, we need to update our Save method to include connections as well:

This concludes the serialization (and frankly, the hard) part. Now we have an XML representation of the current state of our node based editor. All we have to do is convert it back.

Deserializing

First things first: the Load button should be functional.

We are going to deserialize the contents of the XML files in Load() method, create nodes and connections and assign them to their respective properties. Deserializing the XML files is a pretty straightforward process; all we have to do is call XMLOp.Deserialize<T>(string):

However, deserializing the XML files alone is not enough to restore our editor to its last state, because as you can see in the figure above, we broke the relation between the nodes and connections while serializing and we need to reconnect them. This reconnection process requires finding nodes by IDs and creating a connection between them. This is why we added unique IDs to our ConnectionPoint class. We need to recreate the ConnectionPoints with those IDs, so we are going to add another constructor to Node class:

This is a new constructor, and it will create a Node with two ConnectionPoints with given (instead of generated) IDs. Now we are going to create new nodes based on deserialized nodes:

Go ahead and try it. Create a couple of nodes, save it, close the editor, open it again and hit the Load button. You’ll see that your nodes return back to their positions. Let’s deserialize connections and finalize our node based editor:

Last Words

This concludes our tutorial on serializing a node based editor. You now have a fully functioning node based editor with save and load features. If you have any questions or feedback, drop me a line at oguz [at] gram.gs

As always, here are the scripts in full, below. Until next time.