Techtree UIBuilder

The techtree UIBuilder is a runtime component which can build a runtime techtree from an assigned techtree data object.

Setup

1. Create an empty GameObject in your scene and assign the TechtreeUIBuilder component to it.

2. Assign all required Techtree references (DataLibrary, Techtree Manager and Techtree).

3. Next you'll have to define the line connection properties (Orientation, color and width).

UI Setup

Next you will have to prepare the UI and assign the required UI References to the component.

• Canvas: The actual UI canvas in your scene

• Node Canvas: This is simply an image element (inside of the canvas) which all nodes will be parented to. The size of this canvas must be set in your techtree:

set the canvas size in the global properties section of your techtree

• Techtree Node Button: A techtree button is a prefab which represents each techtree node. There are two available prefabs which you can use directly by default but it's also possible to create your own. Please view the Custom Techtree Node Button documentation for more information.
• Line Sprite: This is a simple rectangle sprite which is used to create the connection lines. You can use the available sprite from the techtree demo scene.

• Node Offset: Add an additional offset from the parent node canvas. This could be required, depending on how your techree node buttons look as they might have different sizes than the editor tech nodes.

Once everything is setup you can let the UIBuilder build the techtree directly on Start if the option CreateOnStart is true, or you can manually trigger a build by using the API:

public class TechtreeExample : MonoBehaviour
{
    // Reference to the UIBuilder
    public TechtreeUIBuilder techtree;
    
    // Call to build the techtree
    public void BuildTechtree()
    {
        // Option 1
        techtree.Build();
        
        // Option 2. 
        // You can also pass a techtree data object name which should be 
        // built instead of the assigned techtree in the Techtree UIBuilder component.
        // techtree.Build("PlayerTechtree");
    }
}

Demo

Please make sure to have a look at the demo scene. The demo scene shows you how to dynamically switch a techtree, how to save and load a techtree, start a research, resource management and also how to switch a techtree theme dynamically at runtime.