Web View

What to know when customizing the web view.

The Web View UGUI can be customized through the hierarchy like any other UI object. Ensure the component's required properties have valid references.

Required Properties

• All properties under "Testing" are not required.

• The "Web Name" property is required if you are not loading a web through code. In this case, "Load On Start" should be enabled.

• The skill node properties under "Prefabs" are required as needed by all the skills in the specific graph you will load. For example, if the size "Giant" is not used by any skill, you technically don't need to set a value for it in the inspector.

• Having at least 1 reference in the "Connection Prefabs" list is required.

• Everything under "Components" is required. The default way those objects are set up is recommended.

• Disable "Clamp Inside Screen" if the web should be clamped inside the content object instead.

Customization Examples

If you'd like an object to move along with the graph, make it a child of the "GraphContent" object.

Sword Mastery Demo

In the main demo scene, a bunch of buttons were added to the bottom of the screen to simply make the user know what some of the controls are.

Runes Demo

In the Runes demo scene, only a single image was added as the central "Core" of the graph. The image was placed as a child of the "GraphContent" object so that it moves along with the graph. The lines connected to it are created through code. You can read more about it in Runes Demo Walkthrough.

Fully Masked Web And Screen Space Canvas Support

By default Unity's LineRenderer component cannot be masked and does not support Screen Space - Canvas. Skill Web has a custom component called UILineRenderer which supports both Screen Space - Canvas and is maskable.

Follow the steps below to ensure your web supports Scren Space - Canvas and masking:

1. For connections, use UILineRenderer instead of LineRenderer. A default one is provided to you in Assets/StylishEsper/SkillWeb/Resources/Prefabs/uGUI. Set the UILineRenderer prefab in the WebViewUGUI component.

   
2. The WebView game object has a child object named "Content"; give this object the Mask component.

3. The Content game object has a child object named "GraphContent"; disable the Override Sorting in its Canvas component.

At this point, the web UI should be fully masked.