[簡介]

在uGUI內建的Progress bar都沒有表示數值呈現，對於想知道實際數值狀態的時候，有數值會更好，因此本次案例，會介紹如何實作圓型Progress bar。

1.先將圖層所要放置的圖形放置好。
BG=放置背景
RadiaPrograssBar=>放黃色圓形背景
Center=>中間黑色圓形背景
TextIndicator=>讀取數值
TextLoading=>讀取文字

2.這個時候會發生，還沒有設計到讀取狀態的填入值。
這是要再加入一個LoadingBar的圖層，主要的工作在於做圓形的讀取狀態。在這圖層中，選擇Inspector，在Image(Script)進行參數調整。
Color=>要填入讀取狀態的顏色
Image Type=>Filled
Fill Method=>Radial 360(就是畫出圓型360度)
Fill Origin=>Botton(畫圖的起點)
Fill Amount=>0
Clockwise=>勾取是順時鐘

3.可以試著調整Fill Amount的值，進行測試，會知道最後的視覺呈現效果是什麼。黃色的部份就是讀取狀態，但會發現目前中間的數值還沒有動作，接著可以開始和大家說明怎麼做。

4.在RadiaPrograssBar新增一個C#，點選圖層後， 選擇Inspector，最下面有Add component，輸入RPB(C#的檔名)，新增一個New script。

5.請將以下這段程式碼貼入，這段程式主要用意就是讓中間數值動起來，依照100的分等去算。

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

public class RPB : MonoBehaviour
{
    public Transform LoadingBar;
    public Transform TextIndicator;
    public Transform TextLoading;
    [SerializeField] private float currentAmount;
    [SerializeField] public float speed;

    // Update is called once per frame
    void Update()
    {
        if (currentAmount < 100){
            currentAmount += speed * Time.deltaTime;
            TextIndicator.GetComponent<Text>().text = ((int)currentAmount).ToString() + "%";
            TextLoading.gameObject.SetActive(true);

        }else {
            TextLoading.gameObject.SetActive(false);
            TextIndicator.GetComponent<Text>().text = "DONE!";

        }
        LoadingBar.GetComponent<Image>().fillAmount = currentAmount / 100;
    }
}

6.將程式碼寫入後，再回到操作頁面，再將對應的圖層放入指定的欄位中。會需要將LoadingBar，TextIndicator，TextLoading拉入欄位中才能做動。
Current Amount會設定為0，代表起始點為0。

[小結]

透過圓形的progress bar練習，同理可知直線的bar也可以做到此效果等，以下為實作成果。