Unity | Loading Bar 如何制作一个进度条

文字教程
Implementing a Loading Bar in Unity
视频教程
How to make a LOADING BAR in Unity (youtube)

---

1 设置场景

在 Scene 文件夹中新建两个场景，分别命名为 LoadLevel 和 Level 1， LoadLevel 为开始的场景， Level 1 为需要加载的场景

添加场景， 导航栏 file - >build settings -> add open scenes
点击 add open scenes 将当前所选场景加入


加入后，拖动场景可以调整顺序，右边的数字代表场景所代表的的索引值，将 LevelLoader 场景放在最前面

---

2 加载场景的过程

首先，进度条只是提供了一个可视化的效果，先来看一下载入场景的流程

使用
AsyncOperation operation = SceneManager.LoadSceneAsync(sceneIndex);
载入场景，返回值中的 operation.progress 代表当前加载的进度，取值为 [0,1]

---

SceneManager.LoadSceneAsync(sceneIndex)
Loads the Scene asynchronously in the background.

---

阶段1 LOADING = 0 ~ 0.9

载入场景内的所有物体，占用大部分的时间

该阶段完成，operation.isDone 为 True

阶段2 ACTIVATION = 0.9 ~ 1

删除所有旧场景中的物体，用新的物体替换

---

在知道了基本的原理后，写一个简单的版本，输出当前的场景载入进度

1.1 创建脚本

设置脚本 LevelLoader.cs，挂载到空对象上 LevelLoader

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;// *场景载入一定要加入

public class LevelLoader : MonoBehaviour
{
    public void LoadLevel(int sceneIndex)
    {
        StartCoroutine(LoadAsynchronously(sceneIndex));
    }

    IEnumerator LoadAsynchronously(int sceneIndex)
    {
        AsyncOperation operation = SceneManager.LoadSceneAsync(sceneIndex);

        while (!operation.isDone)
        {
        	Debug.Log(operation.progress);// *output the current loading progress
        	
            yield return null;// wait a frame, and do it again
        }
    }
}

---

简单解释一下 StartCoroutine 和 IEnumerator

StartCoroutine() 为启动协同程序，其中的函数返回值必须为 IEnumerator，每帧只执行一次

yield return 返回数值，并在下一次执行时从上次执行的地方继续执行

上面的脚本意思是，加载场景，每帧返回加载的进度，输出到控制台

---

1.2 创建按钮，触发加载脚本

2D UI 编辑可以通过Scene 视窗，设置 2D 编辑

新建一个按钮 LoadLevel，设置按钮的 OnClick 事件

在 Inspector 视窗中查看，将空对象 LevelLoader 拖到圆点处的方框内，选择事件

---

我们可以看到控制台只输出了 0 和 0.9 两个值，和预期一样

使用 Mathf.Clamp01(operation.progress / .9f) 将原来 [0,0.9] 的值转化到 [0,1]

---

Mathf.Clamp01(value) - 将比0小的值换为0，大于1的值换为1
if value <= 0, return 0
if value >= 1, return 1
else return value

---

3 进度条效果

设置一个 slider，删除 Handle Slide Area

调整 Background 和 Fill 组件的颜色（即背景色和前景色，或者进度为0%时的进度条颜色和100%时的颜色）

3.1 填充效果调整

将 Slider 的 value 值设置到最大值 1 时，发现白色部分并没有填满背景

重新设置 Fill Area 的 Rect Transform 的大小，使白色区域覆盖到背景

3.2 新建空对象管理进度条的显示

新建空对象 LoadingScreen，将 Slider 放入空对象中

空对象用来管理进度条的显示，使用 SetActive() 控制

---

3.3 新建文本框显示数字

新建一个文本框 progressText，调整字体大小和位置，用来显示当前载入百比分 xx%

3.4 脚本更新

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

public class LevelLoader : MonoBehaviour
{
    public GameObject loadingScreen;
    public Slider slider;
    public Text progresstext;

    public void LoadLevel(int sceneIndex)
    {
        StartCoroutine(LoadAsynchronously(sceneIndex));
    }

    IEnumerator LoadAsynchronously(int sceneIndex)
    {
        AsyncOperation operation = SceneManager.LoadSceneAsync(sceneIndex);

        loadingScreen.SetActive(true);

        while (!operation.isDone)
        {
            float progress = Mathf.Clamp01(operation.progress / .9f);

            slider.value = progress;

            progresstext.text = progress * 100f + "%";

            yield return null;// wait a frame, and do it again
        }
    }
}

如图挂载游戏对象，从 Hierarchy 视窗将对应的游戏对象分别拖入方框

---

查看效果
（由于场景内过少，使用了0.5x速率，不过也很难看清）

可以从 Asset Store 中找做好的场景，做加载的尝试

---

其他效果

还可以通过调整 fill 的形状，做出圆形的进度条

---

小结

加载场景主要分为两个阶段：导入物体 -> 刷新场景

获取当前的载入进度，主要使用 AsyncOperation operation = SceneManager.LoadSceneAsync(sceneIndex);
以及operation.progress 赋给 slider.value 改变滑动条的显示效果