Runes Demo Walkthrough

Going over the Runes demo.

In this walkthrough, we'll be going over the steps used to create the Runes demo.

1. Create a New Scene

Simply create a new scene and add the Initializer, Web View, and Hovercard (see Menu Options). Remove the existing prefab references from the Web View UGUI component.

2. Create Sprites

Create sprites for the background, all skills, and 2 new skill node UI prefabs. Additionally, create a sprite for the "core," a visual graphic used for the center of the web.

3. Apply Sprites

• Apply the background to the Web View's child game object named "Content."

• Add sprites to all necessary skills from the Skill Bank.

• Create 2 new skill node UI prefabs and base the design off the sprites created for them. Check out UI Customizations. Provide the prefabs to the Web View UGUI component.

• Create a new image object in the Web View UGUI's child game object named "GraphContent" and set the sprite to the core sprite.

4. Add Player Input

Copy the "PlayerInputExample" game object from the Sword Mastery ("Demo") scene and paste it into the new scene. Creating your own input script is recommended.

5. Create Stylized Connection UI

Create a new connection line prefab. Copy the shader found in Assets/StylishEsper/SkillWeb/DefaultStyle/ConnectionLine, customize it, create a material, apply the shader to the material, and then apply the material to the new connection line. Check out UI Customizations. Add this prefab to the Web View UGUI component.

6. Curved Connections

Make two other copies of the new connection line prefab, replace the "Connection Line" component with "Curved Connection Line," and add them to the Web View UGUI component.

7. Create Web

Create a new web graph that will be used for this scene from the Web Creator.

8. Create Setup Script

Create a new component script that loads the new web graph through code with some custom lines that connect to the core. The script used for the Runes demo is below.

using Esper.SkillWeb;
using Esper.SkillWeb.UI.UGUI;
using UnityEngine;

/// <summary>
/// A script that helps set up the Runes demo.
/// </summary>
public class RunesDemoSetup : MonoBehaviour
{
    /// <summary>
    /// Visual core.
    /// </summary>
    [SerializeField]
    private RectTransform core;

    /// <summary>
    /// Custom skill points.
    /// </summary>
    [SerializeField]
    private float customSkillPoints = 100f;

    private void Start()
    {
        // Get the Runes web graph
        var graph = SkillWeb.GetWebGraph("Runes");

        // Set the graph
        WebViewUGUI.Active.Load(graph);

        // Skill points binding with demo dataset cost
        var web = WebViewUGUI.Active.web;

        // Bind with the custom skill points
        web.Bind(() => customSkillPoints, // Set skill points getter
            skillNode => (skillNode.dataset as DemoSkillDataset).cost, // Set skill cost getter (this example uses a custom dataset)
            x => customSkillPoints = x); // Set skill points setter 

        // Set core position to the center of the graph
        var position = WebViewUGUI.Active.GetCenterPosition();
        core.anchoredPosition = position;

        // Create extra connections connecting to the core (just as some visual customizations)
        WebViewUGUI.Active.CreateVisualConnectionLine(core.anchoredPosition, 0);
        WebViewUGUI.Active.CreateVisualConnectionLine(core.anchoredPosition, 1);
        WebViewUGUI.Active.CreateVisualConnectionLine(core.anchoredPosition, 2);
        WebViewUGUI.Active.CreateVisualConnectionLine(core.anchoredPosition, 3);
    }
}