UI Design

Here you will get a step by step instruction on how to create your own skill tree. This instructions will be done in the given demo scene to demonstrate the whole creation process.

There are 3 sample skill trees included in the demo scene.

• Tree 1 v1 where the skills are displayed in a rectangular shape.

• Tree 1 v2 is the same skill tree, but with a circular display of the skills

• Tree 2 is a second independent skill tree with different skills, also with a circular displayed shape.

Create new skill tree

To create a new skill tree you can use the Skill Tree Panel prefab, which contains the empty scrollable box and drag it under the Skill Tree Holder in the demo scene.

Disable all other active Skill Tree panels, so you have a clean working space in the scene view. Drag the skill button and the ‘line to skill’ prefabs into the scene to design your tree. Make sure all the lines and buttons are under the Content object of the Skill Tree Panel.

For buttons you can choose ‘Skill Button [Rect]‘ or ‘Skill Button [Circle]’ prefab for your Skill Tree, which are located in SpaceFusion → SF_SKill_Tree_System → Prefabs

The buttons both have a SkillDisplayer script attached.

For each button Please make sure that you select the according Skill scriptable (created in the previous steps) under the skill property. Also make sure that you add the incoming connected lines to the script.

Both properties are marked yellow in the following image

Connected Lines

As it was seen in the image before, you also have the option to select a color for the connecting lines. You can specify the color of lines that are connected to a still locked Skill and another color for lines that are connected to an unlocked skill.

Please make sure that you change the colors directly in the prefab, to make sure that every instantiated button has the same values (except you want different lines to have different colors for some reason)

Skill tree selection

If you are satisfied with your skill tree design (or multiple designs) you can add the skill trees to the Skill Tree Switcher under the Talents GameObject. Just Replace the existing Skill trees with your own creations.

Here you can also select the default color and the selected color to highlight the selected tree in the selection panel on the left of the screen.

Set mask of Requirement and Unlock Panels

The only thing that you need to consider for the Skill Requirement Panel and the Skill Unlock Panel is the image mask. Depending on how you want the selected skills to be displayed please add the according mask to the mask property.

If no mask is selected, the panels will show the skill icons in a rectangular design, If you want a circular display please add “Mask Circle” as the sprite image. (this image is included in the asset)