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
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.
Last updated