cocoscreator之微信小游戏的进度条(填充模式)

JavaScript07

cocoscreator之微信小游戏的进度条(填充模式),第1张

图中将进度条背景和进度条分开,便于观察理解。

将进度条显示图的渲染模式改为Filled(填充模式),填充起始位置(Fill Start)改为0,填充总量(Fill Range)改为1(截图中为0.5,即进度条加载到50%):

//获取到进度条图片

let btn_leftPosition = cc.find("Canvas/ProgressBar_test/btn_leftPosition")

//将进度条图的填充总量置为0

this.btn_fillRange = btn_leftPosition._components[0].fillRange = 0

//将进度条图的填充起始位置置为0(可在编辑器直接置为0)       

btn_leftPosition._components[0].fillStart = 0

let self = this

this.schedule(function () {           

    //随机数字

    let math_random = Math.ceil(Math.random() * 1 + 1.5)

    //进度条填充总量增加           

    self.btn_fillRange = btn_leftPosition._components[0].fillRange += math_random / 100

    //判断进度条是否加载完全

    if (self.btn_fillRange >= 1.0) {

        //进行下一步操作

    }

console.log("self.btn_fillRange = ", self.btn_fillRange)

}, 0.1)

```

当然也可以自定义各种加载。

设置进度条的Mode属性为Filled(填充模式),进度属性Progress可以自主设定,也可以根据预加载设定,进度条的显示条设置参考方法1里面的第2条;

let jindutiao = this.schedule(function () {

    //随机数字 

    let math_random = Math.ceil(Math.random() * 1 + 1.5)

    //进度条填充总量增加 

    this.ProgressBar.progress += math_random / 100 

    //判断进度条是否加载完全

    if (this.btn_fillRange >= 1.0) {

        //进行下一步操作

        console.log("停止", jindutiao)

    }

}, 0.1)

运行效果如下:

如有问题,欢迎指正,共同学习,谢谢。

获取studio里demoHead里的进度条setPercent也是无效的。因为this._totalLength <= 0然后被返回了 var loadingBar = ccui.helper.seekWidgetByName(root, "blueBar")loadingBar.setPercent(75)studio用1.6和1.3都这样。引擎用的是Cocos2d-JS v3.0 RC2。想问下怎么更新成Final。双击了Final里的setup.py,又把frameworks复制到已创建的,结果还是显示旧版RC2。

支持js。虽然动态语言静态检查弱,小问题不断可能抵消灵活性的优势,但是在目前手游标配热更新的情况下,unity也不方便用c#。对3d的支持还需要很长时间,工具初期版本估计不稳定,资源插件社区这些是减分项。