Connection Line
What to know when customizing the connection lines.
Last updated
What to know when customizing the connection lines.
Last updated
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.
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.
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.
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.
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
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.
If you'd like to customize the connection line further, it will require some scripting. See Customize Connection Line.
