cococs creator学习笔记——进度条（计时器实现、update实现）

最新推荐文章于 2024-06-12 09:45:09 发布

不许胖~

最新推荐文章于 2024-06-12 09:45:09 发布

阅读量3.9k

点赞数 2

分类专栏： cocos-creator学习文章标签： cocos-creator

本文链接：https://blog.csdn.net/weixin_46835101/article/details/122498518

版权

这篇博客介绍了在Cocos Creator中如何使用计时器和update方法来创建和控制进度条。首先，通过在Canvas上创建ProgressBar和Label节点，然后设置进度条为填充模式。接着，分别展示了两种实现方式：一是通过计时器，每0.1秒增加进度，3秒内达到100%并循环；二是利用update函数持续更新进度条和文本信息。文章还提到了在实现过程中遇到的问题及解决办法。

摘要由CSDN通过智能技术生成

实现以下功能

进度条3秒内达到100%，并使上方数字加1，一直循环下去

在canva下创建一个进度条（ProgressBar）和一个Lable节点

ProgressBar组件
在属性检查器中设置进度条的大小，提前在资源管理器中添加进度条样式，然后将提前加好的图片拖到进度条的Sprite中
在这里插入图片描述

将进度条的渲染模式修改为填充（FILLED）

在这里插入图片描述

一、用计时器实现

新建一个脚本文件

设置一个计时器，每0.1秒执行一次，进图条填充量每次增加10/3，3秒后fillRange为1（进度条达到100%），如果fillRange>1，则充重置为零，计数加一。

cc.Class({
   
    extends: cc.Component,

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

 onLoad (){
   
    
    //将进度条的填充量设为0
    let up_fillRange = this.progress.node.getComponent(cc.Sprite).fillRa