I’m working on implementing a progress bar or timeline within Unity that allows users to create custom markings along the bar. These markings could represent milestones, checkpoints, or any other significant point.
I’m specifically focusing on using the UI Toolkit for this functionality. Ideally, the progress bar would function in both the inspector window (for editing purposes) and potentially in-game for visual feedback.
Is there a recommended way to create a progress bar with customizable markings using UI Toolkit in Unity? Any advice or existing solutions people have come across for UI Toolkit specifically would be greatly appreciated!
You could use the existing ProgressBar and then add the markings to it.
One way would be to add another VisualElement that has its position set as absolute, then set it to be the same as the ProgressBars layout (set the left, top, right and bottom values) and call BringToFront so its shown above the ProgressBar. You can now add marker elements to it and use flex to position them so they are shown above the progress bar.
Here is a simple example:
using UnityEngine;
using UnityEngine.UIElements;
public class Example : MonoBehaviour
{
public UIDocument document;
void Start()
{
var document = GetComponent<UIDocument>();
var progressBar = document.rootVisualElement.Q<ProgressBar>();
var progressBarOverlay = new VisualElement { style = { flexDirection = FlexDirection.Row } };
document.rootVisualElement.Add(progressBarOverlay);
progressBar.RegisterCallback<GeometryChangedEvent>(evt =>
{
progressBarOverlay.style.position = Position.Absolute;
progressBarOverlay.style.top = evt.newRect.y;
progressBarOverlay.style.left = evt.newRect.x;
progressBarOverlay.style.width = evt.newRect.width;
progressBarOverlay.style.height = evt.newRect.height;
progressBarOverlay.BringToFront();
});
// Add some markers
for (int i = 0; i < 10; i++)
{
var marker = new VisualElement
{
style =
{
backgroundColor = new StyleColor(Color.green),
width = 15,
height = Length.Percent(100),
left = Length.Percent(10 * i),
}
};
progressBarOverlay.Add(marker);
}
}
}
