cocos creator实现自定义进度条

简介: cocos creator实现自定义进度条

在上篇文章我们说到了如何实现原生组件的进度条,我们将复用原来的js

自定义进度条组件分为2个素材,1:进度条外圈,2:进度条内部进度显示

image.png

image.png

image.png最后效果

通过外圈新增sprite组件,固定宽高和排版

image.png

使用内圈素材作为此节点的子节点:

将 type类型改为FILLED,Fill Type改为HORIZONTAL

注意,宽高需要比外圈小一点,要不然看不到外圈的框

image.png

之前的文字和原来一样,不做另外说明

脚本编写:

import log = cc.log;
const {ccclass, property} = cc._decorator;
@ccclass
export default class ProgressBar extends cc.Component {
    num = 0;//进度数据
    isShow = false;//是否显示
    show() {
        //显示
        this.isShow = true;
        this.node.active = true;
        cc.find("MainMenu/Mask").active = true;
    }
    hide() {
        //隐藏
        this.isShow = false;
        this.node.active = false;
        cc.find("MainMenu/Mask").active = false;
    }
    update() {
        let progressBar = cc.find('MainMenu/ProgressBar/Inside').getComponent(cc.Sprite);
        progressBar.fillRange = this.num;//更新进度条ui的图
        cc.find('MainMenu/ProgressBar/num').getComponent(cc.Label).string= Math.trunc(this.num*100)+'%';//更新进度条文字
    }
}
目录
相关文章
|
7月前
|
编解码 前端开发 UED
CocosCreator 面试题(十一)Cocos Creator 屏幕适配
CocosCreator 面试题(十一)Cocos Creator 屏幕适配
298 0
Cocos Creator3.8 项目实战(一)cocos creator prefab 无法显示内容解决
Cocos Creator3.8 项目实战(一)cocos creator prefab 无法显示内容解决
204 0
Cocos Creator3.8 项目实战(二)cocos creator编辑器中绑定事件引发的bug解决
Cocos Creator3.8 项目实战(二)cocos creator编辑器中绑定事件引发的bug解决
146 0
|
vlayout
Cocos Creator3.8 项目实战(六)Combobox控件的实现和使用
Cocos Creator3.8 项目实战(六)Combobox控件的实现和使用
260 0
|
Android开发 索引
Cocos Creator3.8 项目实战(七)Listview 控件的实现和使用(1)
Cocos Creator3.8 项目实战(七)Listview 控件的实现和使用
488 0
Cocos Creator3.8 项目实战(七)Listview 控件的实现和使用(2)
Cocos Creator3.8 项目实战(七)Listview 控件的实现和使用
146 0
|
C++
[✔️]cocos creator shader 入门教程2:Material / Effect
[✔️]cocos creator shader 入门教程2:Material / Effect
336 0
|
UED
cocos creator实现加载场景进度条
cocos creator实现加载场景进度条
593 1
cocos creator实现加载场景进度条
|
JavaScript
cocos creator实现自定义进度条
cocos creator实现自定义进度条
268 0
cocos creator实现自定义进度条
cocos creator锚点分析
锚点(Anchor) 是节点的另一个重要属性,它决定了节点以自身约束框中的哪一个点作为整个节点的位置。我们选中节点后看到变换工具出现的位置就是节点的锚点位置。
654 0
cocos creator锚点分析