View the entire tutorial on What Up Games.

Animate runtime progress bars with UI Toolkit

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 specific points of a “regular” animation.

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#.

Tutorials may work with earlier versions.

Resources

1. Unity Manual: UI Toolkit
2. Unity Manual: UI Event System
3. Unity Manual: UI Builder
4. DOTween Documentation