Unity - How to make circle progress bar using sprite renderer?

Viewed 3416

what i have seen so far, people use UI with fill amount, which is not an option for me atm. Does any body know How to make circle progress bar using sprite renderer ?

2 Answers

I found a solution that's not very elegant, but gets the job done.

If you cut your sprite in half (or just use a sprite mask), you can use a sprite mask that rotates to cover up all but what ever percent you want to be shown.

using rotating a mask to cover parts of a circle.

Then all you have to do is create a second half sprite that shows the other half.

Two examples of a finished circular progress bar, one split in half and highlighted to show how it works.

Here's the code I used in the gif above:

public class CircularFillBar : MonoBehaviour
{
     public float FillValue;


     private Transform TopHideBar;
     private Transform BottomHideBar;

     void Start()
     {
         TopHideBar    = transform.Find("CircularFillBar (Top)").Find("Rotation Container (moving)");
         BottomHideBar = transform.Find("CircularFillBar (Bottom)").Find("Rotation Container (moving)");
     }

     private void FixedUpdate()
     {
    
         TopHideBar.rotation    = Quaternion.Euler(0, 0, (FillValue * 360 > 180 ? 180 : FillValue * 360));
         BottomHideBar.rotation = Quaternion.Euler(0, 0, (FillValue * 360 < 180 ? 180 : FillValue * 360));




    
         FillValue += 0.002f;

         if (FillValue > 1)
             FillValue = 0;
     }
 }

Use Sprite Sheets and Animations instead. You can find a bunch of them in Google Search

Related