The UI image offers more options than simply showing an image inside a canvas. Especially the Filled image type provides easy animation techniques. In this post I show you how you can create a radial progress bar with a single image.
Create a radial progress bar
First, create an image with a white circle and a transparent background. You can also download the image from my demo project.
Select the image inside your Unity project and set the texture type to Sprite (2D and UI). This is important, because the UI Image component does not support other texture types.
Now create a canvas and a UI/Image in your scene. Assign the circle image to the new UI/Image component.
Change the Image Type to Filled. This means that the image is only shown partially. There are multiple options like horizontal, vertical and several radial methods. The Radial 360 method is the right choice for a radial progress bar.
Now you can already preview the progress bar by sliding the Fill Amount in the image inspector. In order to apply real values at runtime, you can change the property fillAmount in a script.
Finally, you can adjust the values for origin, clockwise and color to find your preferred look. For more advanced visualizations you can also tweak the underlying image.
Other game elements
The same technique can be used for other game elements as well.
A spinning wheel is a widely used loading indicator. Set the fill amount to show only a part of the image. Use a script to rotate the iage along the z-axis. It’s nice to tweak the look directly in the Unity editor without needing a graphics tool.
The fill amount can also be applied horizontally or vertically. This allows the generation of health bars and other linear progress bars.
Demo project
I have created a very simple demo project with progress bars, spinning wheels and health bars. It contains images and scripts for modifying the elements at runtime.
You can find it in the ProgressBar scene inside the UISamples project.
