Unity加载界面制作

时间：2024-10-23 08:37:55

效果

UI部分

结构

说下思路:

        因为是加载界面,所以最上层是一个Panel阻止所有的UI交互,这个Panel如果有图片就加一个图片,如果没有可以把透明度调到最大,颜色设为黑色.

        下面最核心的就是一个进度条了,有图片的话,将进度条的底放进来,将进度条锚点设为下中,将滑动块的尺寸设为0.

        然后将Handle的image组件移除,因为不使用这个展示滑块UI,而只使用它的功能.

        因为我将一个滑块图片放入之后使用Set Native Size来恢复尺寸,锚点将发生变化(我遇到的锚点变为左下),然后保存设置滑块会变回默认的锚点导致滑块变形,如下锚点

        这会导致位置偏差,即便我在保存前将锚点设为和此相同的情况,也不行.所以我直接将滑块尺寸设为0,将Handle的Image组件移除,在Handle下面再设置一个Image和Text,这样就避免的我们自身的滑块UI受到影响,最后调整一下我们的滑块位置.

        最后就是加载条了,如下结构设置一个image,尺寸和滑动条尺寸相同,但是:将Pivot设置为0, 0.5就是将自身中心设为最左端.将scale的x设为0.这样我们就可以通过将滑动条的滑动值设置给x,让加载条和加载进度保持一致

UI拼接部分就完毕了,你可以在Panel下继续添加其他装饰组件.

脚本部分

这样命名

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

namespace JKD_Config.UI
{
    public class PopPanel_showScrollbar : MonoBehaviour
    {
        public Scrollbar scrollbar;

        public Transform img_loadingBottom;
        public TextMeshProUGUI text_showLoadingValue;

        Progress<float> progress;
        float currentProgress = 0;

        public void Init(IProgress<float> loadingProgress)
        {
            scrollbar = transform.GetComponentInChildren<Scrollbar>();
            scrollbar.value = 0;

            img_loadingBottom = scrollbar.transform.Find("img_loadingBottom");
            img_loadingBottom.localScale = new Vector3(0, 1, 1);

            text_showLoadingValue = transform.GetComponentInChildren<TextMeshProUGUI>();
            text_showLoadingValue.text = "";

            gameObject.SetActive(true);
            progress = ((Progress<float>)loadingProgress);
            progress.ProgressChanged += OnValueChanged;//注意线程安全
        }

        private void OnValueChanged(object _, float progress)
        {
            currentProgress = progress;
        }

        private void Update()
        {
            scrollbar.value = currentProgress;
            img_loadingBottom.localScale = new Vector3(currentProgress, 1, 1);
            text_showLoadingValue.text = string.Format("{0:P}", currentProgress);

            if (currentProgress >= 0.9f)
            {
                gameObject.SetActive(false);
                progress.ProgressChanged -= OnValueChanged;
                progress = null;
                currentProgress = 0;
            }
        }
    }
}

        这个脚本很简单,初始化的时候就激活这个面板,进入加载界面,接受一个IProgress<float> loadingProgress对象,这是.net中常用的报告进度的对象,我们获取这个对象目的是为了将我们的回调方法注册进去(即OnValueChanged方法).

        这里你可能疑惑为什么我的回调里面只是传递了一个float,而UI相关的更新却放在了Update中,而不是将UI更新直接放到回调方法中.为了保证线程安全,IProgress<float> loadingProgress对象拿到我们的回调是在后台线程执行的,而Unity的组件只能在主线程执行,所以才"多此一举".

示例

private IProgress<float> loadingProgress = new Progress<float>(); 
private void OnProgress(AssetLoaderContext assetLoaderContext, float progress)
        {
            Debug.Log($"Loading Model. Progress: {progress}");
            if (!Fm_BackModLib.Inst.popPanel_showScrollbar.gameObject.activeInHierarchy)
            {
                Fm_BackModLib.Inst.popPanel_showScrollbar.Init(loadingProgress);
            }

            loadingProgress.Report(progress);
        }

        假设你在进行一个耗时操作,这个OnProgress会不停地调用来传递一个float告知进度,这时我们就可以new一个进度对象,初始化我们的进度面板,然后因为OnProgress会不停地调用,进度对象的Report方法会传递进度.

相关文章