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;
            }
        }
    },
});