in skilltree, tutorial, unity

Let’s create a skill tree – Part II – Making a node editor

Hello and welcome to the second part of this tutorial series about creating a skill tree system for your game in Unity. In this tutorial, we are going to learn to create an editor tool for the management of our skill tree. After this tutorial, you will have a tool for managing your skill tree as cool as the one seen in the video below.

In order to make this post shorter and cleaner I am going to use the awesome tutorial from Gram Games about creating a node editor on Unity, and add the custom functionality over their editor tool. I truly recommend to take a look at their tutorial, it is really good 🙂  Especially if it is your first approach to creating editor code for Unity.

The starting point

Let’s start by making a quick introduction to the code provided by Gram Games in their tutorial.

The Node class is the one with all the functionality to manage each node. With it, we can draw the node, move it over the custom window or even delete it.

 

The ConnectionPoint class allows us to define our points to connect different nodes.

 

The class Connection allows us to define the connection between two nodes and draws it in our custom editor window.

 

And here it comes the class that makes all the magic, the class NodeBasedEditor. This class inherits from EditorWindow and creates an editor window that gives the order to all of our previous classes to being drawn. It also manages events for creating and deleting nodes and connections.

The objectives

This is a basic node editor and we need to add functionality in order to make it useful to manage our skill tree.

This is the things that we are going to add to this node editor:

  • A title for each node: We are going to use the ID of each skill.
  • A boolean field for setting if the skill is unlocked or not.
  • An integer field for setting the cost of the skill.
  • Generate the JSON file with the skill tree created in the node editor.
  • Make the node editor persistent. Functions to clear, load and save the state of the node editor.

 

Let’s get to it

Let’s start by adding a reference to a skill from each one of the nodes. You can see the changes marked in yellow:

 

Now we should edit how we create the node in the NodeBasedEditor class with the new info for the node.

 

Ok, so now, we can create new nodes and draw info like the ID, if it’s unlocked or not and the cost of that skill. But we need to get the data from our new window and apply it to our previous skill tree system, right? Let’s see how we can accomplish that.

 

We must include a button for running this SaveSkillTree method. And let’s think about what are we going to need in the future. I think we are totally going to need a button for loading the SkillTree from the file as well. And why not a function for wiping all the data from our editor window, just in case we want to start the SkillTree from the scratch or load the saved SkillTree and remove all of our current data.

 

Now we need to print the buttons that allow you to use these methods. We can do it running this new method in every OnGUI call.

 

Oh, and don’t forget to create those Rect that we are using in the previous function for printing our buttons.

 

Oops, did you see what happened here? As we didn’t have information about the node we didn’t know where to draw each of the nodes when loading. Maybe we should save the position of the nodes too…

For that, we can define new classes for managing data from the node. We are only going to need an ID for each one of the nodes and a Vector2 with the position that must be saved.

 

We need a new method for saving to a new file. Also, we must modify the LoadNodes function for adding the nodes to the correct position previously saved.

 

And that should be all 🙂 I hope I didn’t mess with the code nor the writing of this article. Just in case, I’m going to put all of the scripts in here, remember you can double-click on it for enabling the full code and that you can copy it to your clipboard.

You can also download an unitypackage from here. There you can find the folder structure with all of the scripts, two images that I’m using for the connection points in the node, and the code for the SkillTree of the previous post.

 

At the end…

So here we are, finally, with our custom editor window for editing our skill tree file. Now it’s easier to manage the creation and modification of our SkillTree but the player isn’t able to use it yet! Seems like that’s our next step down the road…

On the next tutorial of this series, we are going to make the player able to use our SkillTree and save player’s progress. So it seems like I’m about to make a basic game, any thoughts or suggestions?

I hope you liked this tutorial and I’m looking forward to seeing you again on the next post 😉  As always feel free to comment or to ask about anything.

Write a Comment

Comment