cocos creator实现加载场景进度条

仙士可

发布于 2021-10-22 02:15:17

4K00

代码可运行

文章被收录于专栏：仙士可博客仙士可博客

运行总次数：0

代码可运行

游戏加载场景一直很慢,为了用户体验,增加一个加载进度条显示加载进度,

我们需要用到2个方法:

preloadScene 和 loadScene

2种节点:

遮罩和进度条

遮罩:

通过单色精灵直接制作一个黑色节点(需要完全覆盖界面,透明度改为100,纯黑色):

进度条:

直接使用cocos官方节点的进度条,额外增加个label组件显示文字,也可自行使用图片,然后使用填充类型实现进度条需要注意使用widget进行定位组件位置

编写代码:

首先给进度条组件编写脚本:

import log = cc.log;

const {ccclass, property} = cc._decorator;

@ccclass
export default class ProgressBar extends cc.Component {
    num = 0;//进度数据
    isShow = false;//是否显示
    show() {
        //显示
        this.isShow = true;
        this.node.active = true;
        cc.find("MainMenu/Mask").active = true;
    }
    hide() {
        //隐藏
        this.isShow = false;
        this.node.active = false;
        cc.find("MainMenu/Mask").active = false;
    }

    update() {
        let progressBar = this.node.getComponent(cc.ProgressBar);
        progressBar.progress = this.num;//更新进度条ui的图
        cc.find('MainMenu/ProgressBar/num').getComponent(cc.Label).string= Math.trunc(this.num*100)+'%';//更新进度条文字
    }
}

在需要加载场景的地方调用:

playGame() {
    let progressBarNode = cc.find('MainMenu/ProgressBar');
    let progressBar = progressBarNode.getComponent('ProgressBar');
    //预加载场景并获得加载进度
    cc.director.preloadScene('Game', function (completedCount, totalCount, item) {
        //可以把进度数据打出来
        progressBar.num = completedCount / totalCount;
        progressBar.show();
    }, function () {
        progressBar.hide();
        //加载场景
        cc.director.loadScene("Game", function (a, b, c) {
            СameraСontrol.newGame();
        });
    });
}