Sometimes when playing games, you may see a UI with a circle-shaped gauge that decreases or increases.

First, prepare a png image of a circle with a transparent background.

The image should be placed on unity.

Next, place the Image in the canvas, this time named “Circle”.

Set the SourceImage of Cricle’s Image component to the prepared png image, Image Type to Filled, Fill Method to Radial360, and Fill Origin to Top, respectively.

In this case, we created a script in Circle and described it as follows

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Circle : MonoBehaviour {
  // Use this for initialization
  void Start () {
    this.GetComponent<Image>().fillAmount = 0;
  }

  // Update is called once per frame
  void Update () {
    if(Input.GetMouseButton (0)){
      this.GetComponent<Image>().fillAmount += 0.01f;
      if( this.GetComponent<Image>().fillAmount >= 1.0f ) {
        this.GetComponent<Image>().fillAmount = 0;
      }
    }
  }
}

The circle gauge advances as long as the left mouse button is clicked, and stops when the mouse is released.
Since this is a sample code, the circle gauge is set to return to 0 when it is full.

Please take a look at the sample code if you like. m

– Sample

Tweet