Mastering UI Development with Unity

Circular progress meter

Horizontal health bars didn't take a lot of work to set up. The work to make a circular progress meter is just about as easy and can be completed with only two more lines of code. Since we don't already have a circular progress bar in our scene, we will have to start with a bit of setup first.

To create a circular progress bar, complete the following steps:

1. From the code bundle, drag the circular meter.png image into the Sprites folder of your project.
2. Set the Sprite Mode of the circular meter.png to Multiple and automatically slice it in the Sprite Editor.
3. Select the Top Left Panel within the Hierarchy and give it a new UI Image child. Name the image Progress Holder.
4. Similar to how we set up the health bar, there ...