欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Unity | Loading Bar 进度条

程序员文章站 2022-07-02 10:03:01
...

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


1 设置场景

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

添加场景, 导航栏 file - >build settings -> add open scenes
点击 add open scenes 将当前所选场景加入
Unity | Loading Bar 进度条
Unity | Loading Bar 进度条
加入后,拖动场景可以调整顺序,右边的数字代表场景所代表的的索引值,将 LevelLoader 场景放在最前面
Unity | Loading Bar 进度条


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.isDoneTrue

阶段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
        }
    }
}

简单解释一下 StartCoroutineIEnumerator

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

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

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


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

2D UI 编辑可以通过Scene 视窗,设置 2D 编辑
Unity | Loading Bar 进度条

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

Inspector 视窗中查看,将空对象 LevelLoader 拖到圆点处的方框内,选择事件
Unity | Loading Bar 进度条
Unity | Loading Bar 进度条


Unity | Loading Bar 进度条
我们可以看到控制台只输出了 00.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

调整 BackgroundFill 组件的颜色(即背景色和前景色,或者进度为0%时的进度条颜色和100%时的颜色)

3.1 填充效果调整

Slidervalue 值设置到最大值 1 时,发现白色部分并没有填满背景

重新设置 Fill AreaRect Transform 的大小,使白色区域覆盖到背景
Unity | Loading Bar 进度条

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 视窗将对应的游戏对象分别拖入方框
Unity | Loading Bar 进度条


查看效果
(由于场景内过少,使用了0.5x速率,不过也很难看清)
Unity | Loading Bar 进度条
可以从 Asset Store 中找做好的场景,做加载的尝试


其他效果

还可以通过调整 fill 的形状,做出圆形的进度条
Unity | Loading Bar 进度条
Unity | Loading Bar 进度条


小结

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

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