Customize Hovercard

Scripting customization of the hovercard.

Basic Description Customization

Create a new class and inherit from either HovercardUGUI or SkillHovercardUGUI. Below is a basic example of adding data to the hovercard description.

using Esper.SkillWeb.UI.UGUI;

public class MyHovercard : SkillHovercardUGUI
{
    public override bool Open(SkillNodeUGUI target)
    {
        // Get the result from the base method (simply a check to see if the hovercard was successfully opened)
        var result = base.Open(target);

        if (result)
        {
            // Get data from a custom dataset
            var dataset = target.skillNode.skill.dataset as MyDataset;

            // Extend the description
            descriptionLabel.text += $"\n\nAttack: {dataset.attack}";
        }

        return result;
    }
}

To learn more about datasets, see Datasets.

Resizing

Changing the width of the SkillHovercardUGUI component is simple—just set it from the inspector. However, the height is a different story. The height is calculated at runtime based on the content displayed. This is done by overriding the Open and CalculateSize methods and adding up the heights of all the relevant objects.

For reference, here's how the height is calculated for the SkillHovercardUGUI component:

public override void Open(RectTransform target)
{
    // Update the size of the description label, as it's the only label with a dynamic height
    descriptionLabel.rectTransform.sizeDelta = new Vector2(descriptionLabel.rectTransform.sizeDelta.x, descriptionLabel.preferredHeight);

    // Call base open method
    base.Open(target);
}

protected override Vector2 CalculateSize()
{
    // Get the base size
    var size = base.CalculateSize();

    // Add the size of the labels through the layout (+ some extra bottom spacing)
    size.y += labelLayout.preferredHeight + 4;

    return size;
}

Customize Height

To add the height of your own custom content, create a new class, inherit from SkillHovercardUGUI, and override the Open, CalculateSize, and Resize methods.

Example

Remember to replace your the existing SkillHovercardUGUI component with the new one you create. You will have to set the properties from the inspector.

In this example, we create a custom hovercard script that simply adds a footer section. Since we're not adding extra labels with a dynamic height, we only need to override the CalculateSize method.

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

public class MyHovercard : SkillHovercardUGUI
{
    /// <summary>
    /// A custom footer placed at the bottom of the hovercard.
    /// </summary>
    [SerializeField]
    private RectTransform footer;

    protected override Vector2 CalculateSize()
    {
        // Get the base size
        var size = base.CalculateSize();

        // Add the size of the footer
        size.y += footer.sizeDelta.y;

        return size;
    }
}

That's all! Now the hovercard will always include the size of the footer when it resizes itself.