Unity制作圓環進度條加載場景資源

第一步：場景内UI圓環的搭建

建立一張Panel作為背景圖，在Panel下建立一張Image命名為RoundImage作為外圓環，在外圓環下建立一張image命名為RoundLoading作為内圓環，用來顯示進度的，建立兩個Text文本，一個作為文字說明，一個作為進度值顯示用。調整每個圖的位置大小。大概如下圖：

第二步：關鍵的地方：Image的設定

外圓環和内圓環必須是大小一緻、有顔色差的圖檔。

RoundImage預設設定就好了，需要注意的是将RoundLoading屬性設定為如下圖：

第三步：代碼實作進度條的加載

[SerializeField] private Image LoadingImage;//
    [SerializeField] private Text LoadingText;
    private bool isLoading=false;
    private AsyncOperation asyn;
    private void Start()
    {
        StartCoroutine(LoadScene());
    }
    void Update()
    {
        if (isLoading&&LoadingImage!=null&&LoadingText!=null&&LoadingImage.fillAmount<1)
        {
            LoadingImage.fillAmount += Time.deltaTime * 0.05f * (asyn.isDone ? 10 : 1);
            LoadingText.text = string.Format("{0:P0}", LoadingImage.fillAmount);//對數值進行百分比格式化
        }
        else if (LoadingImage.fillAmount>=1)
        {
            asyn.allowSceneActivation = true;
            print("加載完成");
        }
    }
    IEnumerator LoadScene()
    {
        asyn = SceneManager.LoadSceneAsync("New");
        asyn.allowSceneActivation = false;
        yield return asyn;
    }
    private void OnGUI()
    {
        if (GUI.Button(new Rect (200,200,100,100),"加載環形進度條"))
        {
            isLoading = true;
        }
    }
           

實作的效果

初始：

加載：

加載完成跳轉場景：

這裡是為了友善測試用，是以使用了GUI的按鈕形式開啟加載進度條，加載一個簡單的場景，實際使用當中可以用來預加載資源用，寫一個狀态機輪詢加載資源，将代碼中的三目運算符改為到達相應狀态時将加載速度加快，則進度條加快完成加載，完成需求。

額外的知識點：

Image的顯示類型：圖檔的排列類型 Simple (普通模式)，Sliced (九宮格)，Tiled (平鋪),Filed (填充)

此處僅相似做一下Filed的筆記。

屬性	說明
Fill Method	填充的方法:Horizontal水準方向、Vertical垂直方向、Radial90度、Radial180度、Radial360度
Fill Origin	填充的起點：Top頂部、Bottom底部、Left左邊、Right右邊
Fill Amount	填充的量：是從0.00到1.00的數值
Clockwise	填充是否按順時針方向，勾選是順時針，不勾選為逆時針
Preserve Aspect	圖檔等比縮放
Set Native Size	設定圖檔以原始尺寸顯示