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:

You can find the whole source code on my corresponding github repo. However, 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:

fireball_bp waterblob_bp

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

character_springArms

Click on image to enlarge in a new tab

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

 

skillscomp_properties_updated

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:

skillWidget_designer

Click on image to enlarge in a new tab

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

skillWidget_graph

Click on image to enlarge in a new tab

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:

skillspanel_designer

Click on image to enlarge in a new tab

 

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:

skillspanel_graph_1

Click on image to enlarge in a new tab

skillspanel_graph_2

Click on image to enlarge in a new tab

Compile and save your widget.

Setting up inputs

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

character_bp_1

Click on image to enlarge in a new tab

The SkillsPanelRef is a SkillsWidget Reference.

character_bp_2

Click on image to enlarge in a new tab

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

Share postShare on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Reddit0