Unity - プログレスリング（サークル、円形のゲージ）を作成する

タイマー式の進捗バーではなくサークルの作成方法。こんなやつ。

画像を用意する

透過タイプの白線の円の画像を用意する。

こちらのサイトで簡単に作ってダウンロードできます。

nureyon.com

（白で透過だと見えないので、ブログの背景黒くしてます）

GameObjectを設定する

作成した画像をプロジェクトにドラッグ＆ドロップする。

画像のInspectorで、Texture Type をSprite(2D and UI）に変更してApply。

Hierarchyで、UI > Image を追加する。

ImageコンポーネントのSource Imageに先程の画像を設定する。

• Colorでリングの色を設定
• Image Type はFilled
• Fill Method はRadial 360
• Fill Originでどこからゲージが開始するかを設定
  • Bottomだと下が起点
  • 
• Clockwise がONだと時計回り、OFFだと反時計回り
  • 

スクリプトから操作

Image のfillAmountに0～1の値を入れると値に応じた円ができる。

Image progressRing = GetComponent<Image>();
progressRing.fillAmount = 0.75f;

プログレスリングなのでタイマー式のスクリプトのサンプル。

外から開始とキャンセルを呼べるようになっており、完了時はOnFinishを発火させる。 また、Taskで終了時に少しDelayを入れてある。

public class TimerProgressRing : MonoBehaviour
{
    public Image progressRing;
    public float waitTime = 2.0f;
    public float finishDelay = 1.0f;

    private bool progress;

    public Action OnFinish; 

    private void Start()
    {
        CancelTimer();
    }

    async Task Update()
    {
        if (progress)
        {
            progressRing.fillAmount += 1.0f / waitTime * Time.deltaTime;
            if (1 <= progressRing.fillAmount)
            {
                progress = false;
                await Task.Delay((int)(finishDelay * 1000));
                progressRing.fillAmount = 0;
                OnFinish?.Invoke();
            }
        }
    }

    public void StartTimer()
    {
        progress = true;
    }

    public void CancelTimer()
    {
        progressRing.fillAmount = 0;
        progress = false;
    }
}

参考

• 【Unity】uGUI Imageでプログレスリングを作る方法 | ちりつもぶろぐ
• Unityで円形ゲージを作成（HPゲージ、パワーゲージ） - プログラム初心者がUnityでゲームアプリとか作ってみた……い！