# Progress Graph

<figure><img src="https://2348672745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIoqF5QAgQsqxrjmTIKpE%2Fuploads%2Fod99p4DTvJA7MB8L6X2z%2Fprogress_nodeEditor.jpg?alt=media&#x26;token=72962694-fb87-4216-924f-b30b6ebf3f82" alt=""><figcaption></figcaption></figure>

The progress graph editor allows you to visually design your progression/techtree graphs with a node editor.

## Global Properties

* Small Nodes: If enabled, the editor shows smaller nodes
* Canvas Width & Height: Defines the node canvas size, this values are being used when building the runtime UI. The appropriate UI RectTransform parent container (node canvas) will be set to this size.

## Create new node

1. First, create a new Progress Graph object. Select the Progress Graph type in the hierarchy and click on + Create
2. You can now see an empty node canvas. Right click on it and select Progress Node.

## Connect Nodes

* To connect nodes, simply right click on the first node, select "Connect" and then click on another node you want to connect to.

## Node Properties

A Progress node has multiple properties by default. A Progress Node is a DataObject which can be derived from to add additional custom data fields if you like.

<div align="left"><figure><img src="https://2348672745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIoqF5QAgQsqxrjmTIKpE%2Fuploads%2FiNkeJPBRw7oadTuF8hMx%2Fprogress_node.jpg?alt=media&#x26;token=aeed357f-ef4a-461b-9660-7e4de17258f7" alt=""><figcaption></figcaption></figure></div>

* **Research State:** The research state of this node (Locked, Unlocked, InProgress, Complete)
* **Research Time:** The time it takes to research this node
* **Research Costs:** The costs in ProgressResources it takes to be able to research this node

## Custom Node

You can create custom progress nodes by simply deriving from the ProgressNode class.\
This is an example custom node code:

```csharp
public class CustomProgressNode : ProgressNode
{
    public float additionalFields;
    
    // Called when this node research has been started
    public override void ResearchStarted()
    {
        Debug.Log("my custom research has started");
    }
    
    // Called when research has been completed
    public override void ResearchCompleted()
    {
        Debug.Log("my custom research is completed");
    }
}
```
