Customize Connection Line

Scripting customization of the connection line.

The main connection line class is ConnectionLine. This class supports all of Skill Web's connection features, such as working with shaders (highlighting and setting active state), and it controls the line renderer to properly connect the first and last line points to the appropriate skills.

When customizing the connection line, it's recommended to create a class that inherits from it. There's already an example of this used by the Runes demo, called CurvedConnectionLine.

Curved Connection Line (Customization Example)

Here were the steps used to create the CurvedConnectionLine class:

1. Create a new class and inherit from ConnectionLine.

2. Add custom variables. One for the control point (Vector3) and another for the number of line points (int).

3. Override the UpdateLine method and add custom curve logic.

Below is the CurvedConnectionLine class for reference.

using UnityEngine;

/// <summary>
/// A connection line with support to curve like an arc.
/// </summary>
public class CurvedConnectionLine : ConnectionLine
{
    /// <summary>
    /// The curve control point.
    /// </summary>
    public Vector3 controlPoint = Vector3.zero;

    /// <summary>
    /// The number of points on the line. The more there are, the more smooth the line will look.
    /// </summary>
    [Min(2)]
    public int points = 2;

    public override void UpdateLine()
    {
        // Do nothing if there are no line points
        if (points <= 0)
        {
            return;
        }

        // Set the number of points
        lineRenderer.positionCount = points;

        // Get the first and final positions
        Vector3 p0;
        Vector3 p2;

        if (connection != null)
        {
            p0 = Input.rectTransform.anchoredPosition;
            p2 = Output.rectTransform.anchoredPosition;
        }
        else
        {
            p0 = startPosition;
            p2 = Output.rectTransform.anchoredPosition;
        }

        // Midpoint between start and end
        Vector3 mid = (p0 + p2) / 2;

        Vector3 p1 = mid + controlPoint;

        // Loop for number of points
        for (int i = 0; i < points; i++)
        {
            float t = i / (float)(points - 1);

            // Set each point with a curve formula (Quadratic Bézier formula)
            Vector3 point = Mathf.Pow(1 - t, 2) * p0 + 2 * (1 - t) * t * p1 + Mathf.Pow(t, 2) * p2;
            lineRenderer.SetPosition(i, point);
        }
    }
}