In this recipe, we will create a very common UI mechanism: progress bar. The same concept can also be used for creating health bars, cooldown indicators, and so on.
Before we start, you should prepare at least one sprite image and import it to Unity. You can also use the provided example Unity project and go to the Chapter 03 2D and user interface animation\Recipe 07 Using filled images for creating animated progress bars
directory. You will find an Example.unity
scene there. Open it and play the game to see the effect.
To create an animated progress bar, follow these steps:
- Import the progress bar image to Unity and set its type to
Sprite (2d and UI)
. - Open a scene and create a new
Image
by using theGame Object
|UI
|Image
command.Canvas
andImage
game objects will be created. - Select the
Image
game object and change its name toProgressBar
. - Find the
Image
component in theProgressBar
game object'sInspector
. - Set...