Customising Skill Tree

Making Your Skill Tree Layout

1. Create a Widget Blueprint and assign it a name that suits the skill tree you want to create (e.g. WB_SkillTree_Combat).

2. Design your skill tree background layout using an image editing software such as Photoshop, Gimp, etc.

   
3. Import it to Unreal Engine and set the image compression settings mode to “UserInterface2D(RGBA)”

   
4. Open your skill tree widget, add your image, scale to your desired size.

   
5. Now to add the slots to the tree. On the left hand side, search for skill tree slot, drag it into the canvas and make sure in the details for the slot, that it is set to “Size to Content”

   
6. A singular slot has details that can be filled out such as the name, description etc. Make sure and remember to always set the first skill slot’s “CanBeUnlocked” value to true. *Also, make sure that the “Name” does not have the same name as any of the other slots; otherwise, saving will not work properly

   

• Name: The skill's name

• Description: The skill's description

• Category: What kind of category the skill belongs to (This is optional and new category's can be made in E_SkillCategory)

• Icon: The icon for the unlocked state of the skill slot

• Locked Icon: The icon used for the locked state of the skill slot

• Required Level: The required player level that needs to be met before being able to unlock the skill. (If your game for some reason does not have a player level, just leave it as default. Else if you want to use this feature you need to get the player level and pass it in the WB_SkillTreeSlot’s “CheckRequiredLevel” function as shown in the image below)

  
• Can Be Unlocked: This is used for all the slots that are unlocked and not yet acquired. Always set the first Skill Tree Slot’s “Can Be Acquired” to true.

• Acquired: This state gets set to true when a skill gets acquired

• Tooltip Preview Details: You can choose to set an image as the preview on the tooltip or a video preview. If an image is set, it will show the image, and if the video inputs are set, it will play the video. So if you choose to set the video, do not set an image as well.
• Colors: These are the colors set for the different states of the slots. If you want to set it for a singular slot, you can just adjust it from your skill tree. If you want to set the default colors for all slots, then you need to open the WB_SkillTreeSlot, click on the “SlotDetails” variable, and set the default colors to a different value.
• Next Skills: These are an array of the skills that the current one should unlock after it is acquired.

  

  Click the plus button to add an element to the array

  

  Look at which skills you want the previous one to unlock and copy their names as highlighted in the picture.

  

  Paste them into the array that you created to add them to the next skills.

1. After setting all the skills and filing out all the details, you are now ready to use your custom skill tree.

Adding Your Skill Tree to The Current Template

1. Open the WB_SkillTreeWindow, remove the current skill tree, add your skill tree and fit it in properly where you want to.

2. For testing, do exactly the same as step 3 inside “Basic Setup”

Adding Your Skill Tree to a Custom Template

1. Open the WB_SkillTreeWindow, remove the current skill tree, add your skill tree and fit it in properly where you want to.

2. For testing, do exactly the same as step 3 inside “Basic Setup”

Adding Skill Slot Previews

1. To add an image preview is as simple as choosing your image under the slot detail’s “TooltipPreviewDetails”.

2. To add a video preview, there are a couple of more steps that need to be done.

3. Make a folder in the “Content” folder called “Movies”, and inside that folder create another folder called skills, add your skill video preview files to that folder.

   
4. If you don't already have a folder to store your videos, I suggest making a “Videos” folder where your main folders are. In this folder create another folder called “Skills” or “Skill Previews”

   

   
5. Right click -> Media -> Media Player A popup prompt will appear, make sure to enable “Video output MediaTexture asset" Open the Media Player, select your video (Skill) and make sure “Play on Open” and “Loop” are checked: If your video has audio and you want to remove it you can just disable it in this option: Playback Options -> Audio -> Disabled
6. The next step is to create a media texture from the material from the media player: Right Click on Media Player -> Create Material Open the created material, make sure the material domain is set to “User Interface: After selecting User Interface as the domain, the nodes will get disconnected, make sure to connect the RGB to the Final Color:

   
7. All that's left is to add the preview to the skill. Open your skill tree, select the skill you want to add the preview to -> Expand the “Tooltip Preview Details” -> Add assets just created to the corresponding input:

   
8. Test the preview in the game: