cocosCreator 实现加载场景进度

当某个场景的东西太多 通过 各种优化还是 不能达到 切换 特别顺畅的情况下（一般是h5端） 我们可能需要 给玩家一些 假象 或者 使切换场景 “卡得理所当然” ，于是通过 cocoscreator的预加载 增加一个加载场景进度功能 是一个不错的选择呢

当前版本是cocoscreator 2.4.x

思路：通过预加载的 回调函数 实现 一个进入场景的 进度功能

首先先看一下 preloadScene的实现

preloadScene (sceneName, onProgress, onLoaded) {
        var bundle = cc.assetManager.bundles.find(function (bundle) {
            return bundle.getSceneInfo(sceneName);
        });
        if (bundle) {
            bundle.preloadScene(sceneName, null, onProgress, onLoaded);
        }
        else {
            cc.errorID(1209, sceneName);
            return null;
        }
    },
    

参数列表：

sceneName: String 要加载的场景名字

onProgress: Function 回调函数，当加载资源进度变化时调用

completedCount: Number 当前已经加载完的资源数目

totalCount: Number 要加载的总资源数

onLoaded: Function 回调函数, 场景加载完成后调用.

然后我们可以 在进入该场景之前 在onProgress回调中实现 加载进度功能，加载完毕 隐藏相关组件。

代码：

TS实现

 joinScene(eventMsg) {
        cc.find("Canvas/di").active = true;
        cc.director.preloadScene("GameScene", this.onProgress.bind(this), ()=>{    
            console.log("加载成功")
            cc.find("Canvas/di").active = false;
            cc.director.loadScene("GameScene");
        })
        
    }
    onProgress(completedCount,totalCount,item){
        //可以把进度数据打出来
        console.log("completedCount",completedCount)
        console.log("totalCount",totalCount)
        
        this.loading.progress = completedCount/totalCount;
        this.loadLabel.string = Math.floor(completedCount/totalCount * 100) + "%";
    }

阅读更多技术