Simple Skills Tree breakdown

In this post we’re going to create a simple skills tree system. Please note that this is not a complete system, nor a step by step tutorial. This post is a breakdown of a simple skills tree system. You can use it as a starting point in order to create your own skills tree system.

Before we get started, here is the end result:

In order to replicate the system shown above you will have to create some blueprints (corresponding screenshots are included both in the previous link and this post).

Assets used

For this post, I’ve used Luos’s Four Elements Pack however any particles will suffice. Please note that based on the particles you will use, you may have to modify the Skill Class.

For example, in this post I’ve used the water and fire attack from Luos’s pack. This pack contains two particle systems for the water and fire attack:

• One particle system which is essentially the projectile for our skill
• One particle system which is the collision of the skill

Having said that, your particles may be differ.

Setting up our project

This post was created using Unreal Engine 4.12.

In order to create the system demonstrated in the video above, I’ve created two classes:

• A skill class which contains the properties of each skill, such as its particles, texture, etc..*
• A skills component class that is assigned to our character, which holds an array of different skills. This component acts as an intermediary between the character and his skills.

*In case you’re developing a fairly complex skills tree, it is highly advised, to create a skill class as an abstract class and then create sub – class for each skill.

So, let’s start our project!

For this post, I have created a Third Person C++ Template project.

Then, I added the Skill class (which inherits from the Actor class):

When you’re done with that, add an Actor Component C++ class and name it SkillsComponent. Here is the header and source files:

Don’t forget to add the Skill.h reference right before the .generated.h include.

So far, we have created a Skill class which has a max level of 3. For this post, each skill level will be the number of skills that the character will spawn with a single button.

This means that in a single click a skill of level:

• 1 – will get spawned one time right in front of the player
• 2 – will spawn two identical skills in a cone right in front of the player
• 3 – will spawn three identical skills

Then, open up the header file of your character and add the following properties and functions:

Don’t forget to include the SkillsComponent.h header file before the .generated.h include.

We will modify the transform of the spring arm components in the editor in order to achieve the desired spawn location of each skill level.

In order to initialize our components, inside the character’s constructor, type in the following code:

Then, provide the logic for the rest of our functions:

Compile and save your code.

Creating Blueprint Classes

Create two new Blueprints which inherit from our Skill class and assign the corresponding properties based on your setup:

Then, open up your character’s Blueprint and adjust the position of your spring arm components:

When you’re done with that, open up the SkillsComponent and assign two skills in your skills array and the initial available skill point:

We will get back on our character after we create some widgets first.

Creating a skills menu

Create a Widget Blueprint, named SkillWidget and create the following interface:

Set the red marked items as variables. Then, open up the graph and enter the following logic:

Don’t forget to add a SkillReference variable, since we will use it later.

Compile and save your widget.

Create a new Widget Blueprint, named SkillsPanel and create the following interface:

Make sure to set the marked items as variables. The WaterBlob and FireBall are both SkillWidget instances.

Then. open up the graph of your widget and enter the following logic:

Compile and save your widget.

Setting up inputs

Open up the graph of your character’s Blueprint and enter the following logic:

The SkillsPanelRef is a SkillsWidget Reference.

Compile and save your Blueprint. Then, test your result.