# Connection Line

Customizing connection lines is very different from the other UI objects, as connection lines are created with the Line Renderer component and the Shader Graph system.

## Default Connection Line

{% hint style="warning" %}
If you're using the default connection line (prefab, material, or shader) as the customization starting point, do not edit the objects themselves. Instead, create a copy of each and edit those.
{% endhint %}

### Line Renderers

You can find the default connection line prefab (named "DefaultConnectionLine") in the `Assets/StylishEsper/SkillWeb/Resources/Prefabs/uGUI` folder.&#x20;

The **maskable version** with **Screen Space - Overlay support** is in the same folder (named "DefaultMaskableConnectionLine").

### Material and Shader

You can find its default shader graph and material (both named "ConnectionLineDefault"), in the `Assets/StylishEsper/SkillWeb/DefaultStyle/ConnectionLine` folder.&#x20;

The **maskable versions** are in the same folder (both named "MaskableConnectionLineDefault").

## Shaders

Technically any shader can be applied to a connection line, as the line renderer components accepts any material. However, the [connection-line](https://stylishesper.gitbook.io/skill-web/editors/components/ugui/connection-line "mention") component requires specific properties to be available in the shader, and those properties must have specific names.

### Required Properties

There are only 2 required properties when creating a connection line shader. The rest are your own choice. As long as you have these properties, you can create shaders normally. It's important to note that the properties themselves don't do anything unless they're used appropriately in the shader. Use the ConnectionLineDefault shader graph as an example.

| Name              | Reference           | Description                                                                                                                                                                                   | Type    |
| ----------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| HighlightStrength | \_HighlightStrength | Used to animate the connection highlighting.                                                                                                                                                  | Float   |
| Active            | \_Active            | A flag set based on the current state of the connection. If both skills in the connection are obtained, this will be set to true. This can be used to completely change the look of the line. | Boolean |

## Using Custom Connections

To use your custom connection, simply add it to the "Connection Prefabs" list in the [web-view-ugui](https://stylishesper.gitbook.io/skill-web/editors/components/ugui/web-view-ugui "mention") component.

<figure><img src="https://392044090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqJrdJaq2UvKp4GciM41%2Fuploads%2FzeaBXUtFmDhIujE3xVXP%2Fimage.png?alt=media&#x26;token=53125568-c503-42fd-bd43-c332fe952163" alt=""><figcaption></figcaption></figure>

Also remember to set the style index value of the line from the [web-creator](https://stylishesper.gitbook.io/skill-web/editors/web-creator "mention").

## More Customizations

If you'd like to customize the connection line further, it will require some scripting. See [customize-connection-line](https://stylishesper.gitbook.io/skill-web/scripting/ui/customize-connection-line "mention").
