A lot goes into creating an intuitive experience for your player. Progress bars are often used to reassure the player that something is happening (such as the game loading) or give them an idea on how long something will take. In this tutorial, you will learn some techniques for creating and animating progress bars using UI Toolkit and DOTween.
Learning Outcomes
UI Toolkit does not have the ability to do masking, nor does it hook directly into the Animation system. You will learn techniques for working around these two limitations. At the end of the tutorial, you will be able to
Design UIs by using the UI Builder tool.
Add a runtime UI to your game.
Animate the UI through DOTween
Hook up DOTween animations to trigger at a specific point of a complicated character animation using Animation Events.
Thanks for this tutorial. I’m starting learning UI Toolkit and it’s perfect to understand the principle.
I followed carefully your explanation, but there is something missing in
Design 1 – Animate the progress bar
the invoke of AnimateLoadingBar:
//Wait 2 seconds before starting the animation
Invoke(“AnimateLoadingBar”, 2f);
Not a problem, I found the solutnio in your git
when I run the demo, I got an error
Component is not found:
m_Root = GetComponent().rootVisualElement;
I tried to load your project from git and found a script missing:
