skip to Main Content

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:

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.

This Post Has 4 Comments

  1. Great tutorial but it is missing one thing – parent system. Currently system you have created can be called skill leveling/advancing system.

    A real skill tree is based on roots (called parents) which are needed to level up child skills. For example parent is FireBall and child is FireMeteor – bigger version of FIreBall. In terms of skill tree, common things are strong parents (all of them are needed to level up child) and weak parent (one of them is needed). That system give’s ability for developer to make branches of skills and in effect – skill trees.

    You can make it, for example, by creating TArray’s: WeakParents, StrongParents, and check if skills in them are mastered when advancing a level.

    1. You have a valid point, however depending on your game you may or may not need to create a parent (see Torchlight for example). That’s why I mentioned in the top of the post that this is not a complete game system.

      -Orfeas

  2. Hi! Does this code

    FTimerHandle TimerHandle;
    FTimerDelegate TimerDel;

    TimerDel.BindLambda([&]()
    {
    Destroy();
    });

    GetWorld()->GetTimerManager().SetTimer(TimerHandle, TimerDel, DestroyDelay, false);

    equals

    SetLifeSpan(DestroyDelay); ? =) Thanks for tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top