Connection Line

What to know when customizing the connection lines.

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

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.

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

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

Shaders

Technically any shader can be applied to a connection line, as the line renderer component accepts any material. However, the Connection Line 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 component.

Also remember to set the style index value of the line from the Web Creator.

More Customizations

If you'd like to customize the connection line further, it will require some scripting. See Customize Connection Line.