creator製作進度條

登錄界面的主場景

進度條的prefab 

登錄的JS文件

cc.Class({
    extends: cc.Component,

    properties: {
        backGround: cc.Node, //背景圖的節點
        progressBarPrefab: cc.Prefab //進度條的prefab
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        this.loading = cc.instantiate(this.progressBarPrefab); //拿到progressBarPrefab這prefab
        this.backGround.addChild(this.loading); //將progressBarPrefab這prefab加載到背景上
        this.loading.y = -250; //調整進度條的位置，如果在creator中位置已經調整好了，這裏可以不用寫的
        this.loading = this.loading.getComponent('loading'); //拿到loading的腳本
        this.loading.setProgress(1);
    },

    start() {

    },

    // update (dt) {},
});

 

進度條loading的JS文件

cc.Class({
    extends: cc.Component,

    properties: {
        proImage: cc.Node, //進度條圖片
        proMaxLen: cc.Integer, //進度條的最大長度，看creator中設置的長度
        speed: cc.Integer //進度條的加載速度,在creator中設置的
    },

    ctor() {
        this.progressIng = false; //ctor：構造函數，初始化定義進度條是沒有的
    },

    // 規定進度條整體長度百分比0-1
    setProgress: function(pro) {
        if (pro > 1 || pro < 0) return;
        var width = this.proMaxLen * pro;
        if (width < this.setWidth) return;
        this.setWidth = this.proMaxLen * pro;
        this.proImage.width = 0;
        this.progressIng = true;
    },
    // LIFE-CYCLE CALLBACKS:

    onLoad() {

    },

    start() {

    },

    update(dt) {
        if (this.progressIng) {
            if (this.proImage.width < this.setWidth) {
                this.proImage.width += dt * this.speed;
            } else if (this.proImage.width >= this.proMaxLen) {
                this.progressIng = false;
            }
        }
    },
});