CocosCreator之KUOKUO带你实现预加载的进度条

引擎版本

CocosCreator v2.0.9

实现效果

预加载进度条

先讲讲进度条组件

• 先来个粉嫩的背景
  
• 添加个进度条和文本组件
  
• 提示下长度问题，应该匹配父节点的宽度，我先把父节点宽改400，之后我应该把长度也改为400，然后调整位置为-200
  
  
  
• 接下来就是可以代码访问属性，动态更改进度。

cc.Class({
    extends: cc.Component,

    properties: {
        // 声明进度条
        progress: cc.ProgressBar,
        // 进度显示文本
        text: cc.Label
    },

    start () {
        // 假设是80%进度
        let j = 0.8;
        this.progress.progress = j;
        this.text.string = j * 100 + '%';
    },

});

预加载

• 新建游戏场景，由test场景进入。
• 让我们从test场景中先预加载game场景，然后等加载完毕跳过去。用到了预加载API

cc.Class({
    extends: cc.Component,

    properties: {
        // 声明进度条
        progress: cc.ProgressBar,
        // 进度显示文本
        text: cc.Label
    },

    start () {
        // 先设置0%
        this.text.string = '0' + '%';
        this.progress.progress = 0;
        // 预加载，第一个是场景名，第二个callback中3个参数，第三个callback是完成回调
        cc.director.preloadScene('game',(completedCount, totalCount, item) => {
            let p = completedCount/totalCount;
            this.progress.progress = p;
            this.text.string = parseInt(p * 100) + '%';
            // 打印观察
            console.log(this.text.string);
        },() => {
            cc.director.loadScene('game');
        });
    },

});

• 为了方便观察，我给game场景扔了50张图片，，，但还是太快了，一闪而过。所以我给大家打印了下。
  
  
  好了，分享结束，有没有收获呢！
  O(∩_∩)O~~
  顺手点个赞吧！

加我QQ群：（博客里面的项目，群文件里都有哦）
706176551
我们一起学习！
O(∩_∩)O~~