Displaying a countdown timer graphically with a UI Slider

There are many cases where we wish to inform the player of the proportion of time remaining, or at the completion of some value at a point in time, for example, a loading progress bar, the time or health remaining compared to the starting maximum, or how much the player has filled up their water bottle from the fountain of youth. In this recipe, we'll illustrate how to remove the interactive "handle" of a UI Slider, and change the size and color of its components to provide us with an easy-to-use, general purpose progress/proportion bar. In this recipe, we'll use our modified UI Slider to graphically present to the user how much time remains for a countdown timer:

 

Getting ready

For this recipe, we have prepared the script and images that you need in the folders named _Scripts and Images in the 02_05 folder.

How to do it...

To create a digital countdown timer with a graphical display, follow these steps:

1. Create a new 2D project.
2. Import...