Tutorial: Animate runtime progress bars with UI Toolkit

Tutorial | GitHub Repository​

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

1. Design UIs by using the UI Builder tool.
2. Add a runtime UI to your game.
3. Animate the UI through DOTween
4. Hook up DOTween animations to trigger at a specific point of a complicated character animation using Animation Events.

Prerequisites

1. You need Unity 2020.3.0f1 (LTS) or later to follow along with this tutorial.
2. This tutorial assumes you already have basic knowledge of Unity and intermediate knowledge of C#.

Note: Tutorials may work with earlier versions. The version referenced is the on I used.

 

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
1) 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

2) when I run the demo, I got an error



Component is not found:
m_Root = GetComponent<UIDocument>().rootVisualElement;

3) I tried to load your project from git and found a script missing:


Could you give me some directions?

Thank a lot
Thierry

 

Sorry, I found how to. I was just stupid!