Unity で放射状/円形のプログレス バーを作成する

今回はUnityに円形・放射状のプログレスバー（HPバー等としても使用可能）を作成する方法を紹介します。

それでは始めましょう!

ステップ

背景が透明な円形の image が必要になります。

• 画像をプロジェクトにインポートし、そのテクスチャ タイプを次のように変更します。 "Sprite (2D and UI)"

• 新しいキャンバスを作成します (ゲームオブジェクト -> UI -> キャンバス)
• Canvas オブジェクトを右クリック -> UI -> 画像
• 円のスプライトをソース画像に割り当て、その色を赤に変更します
• 画像タイプを "Filled" に、塗りつぶし方法を "Radial 360" に変更します (これにより、円に沿って表示される画像の量を制御する塗りつぶし量と呼ばれる別の変数が表示されます)

• 画像を複製し、色を白に変更し、画像タイプを "Simple"
• 複製した画像を最初の画像内に移動します
• 最初の画像サイズ (塗りつぶし画像タイプのもの) をより大きなサイズ (例: 幅: 135 高さ: 135) に変更します。

• 新しいテキストを作成します (キャンバスを右クリック -> UI -> テキスト)
• 配置を中央中央に変更します

• 読み込むテキストに合わせてテキストの高さを 60 に変更します。

最後に、進行状況の値を画像に適用するスクリプトを作成します。

• という新しいスクリプトを作成し、"SC_CircularLoading" という名前を付けて、その中に以下のコードを貼り付けます。

SC_CircularLoading.cs

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

public class SC_CircularLoading : MonoBehaviour
{
    public Image loadingImage;
    public Text loadingText;
    [Range(0, 1)]
    public float loadingProgress = 0;

    // Update is called once per frame
    void Update()
    {
        loadingImage.fillAmount = loadingProgress;
        if(loadingProgress < 1)
        {
            loadingText.text = Mathf.RoundToInt(loadingProgress * 100) + "%\nLoading...";
        }
        else
        {
            loadingText.text = "Done.";
        }
    }
}

• SC_CircularLoading スクリプトを任意のオブジェクトにアタッチ し、その変数を割り当てます (読み込み中の画像は放射状塗りつぶしタイプの画像、読み込み中のテキストは進行状況の値を表示するテキストである必要があります)

• Play を押して、読み込み進行状況スライダーを動かします。読み込み中の画像が徐々に埋まっていくのを観察してください。