Cocos Creator个性化时间进度条实现
在Cocos Creator游戏开发中，经常需要使用个性化时间进度条，下面，我们就一起来封装下自己的个性化时间进度条组件。
一、 个性化时间进度条
1: 编写脚本, 来使用sprite的扇形来显示当前的进度:
属性: time_sec: 定时器的时间
clockwise: 是否为顺时针或逆时针;
reverse: 是否反转
startClockAction: 开始累积时间，看时间过去的百分比,来改变精灵显示的百分比;
stopClockAction: 停止计时累积;
二、 计时器控制组件
const {ccclass, property} = cc._decorator;
@ccclass
export default class ClockCtrl extends cc.Component {
@property({tooltip:"计时时长"})
actionTime : number = 10;
@property({tooltip:"是否逆时针"})
clockWise : boolean = false;
@property({tooltip:"计时方向"})
reverse : boolean = false; // false，由少变多
@property({tooltip:"是否在加载的时候就开始计时"})
playOnLoad : boolean = false;
private nowTime : number = 0; // 用于记录已经过去的时间
private isRuning : boolean = false; // 计时器是否正在行走
private sprite : cc.Sprite;
private endFunc : Function = null;
onLoad () {
this.node.active = false;
// 获取子节点上的Sprite组件
this.sprite = this.node.getChildByName("TimerBar").getComponent(cc.Sprite);
if(this.playOnLoad){
this.startClockAction(this.actionTime, this.endFunc);
}
}
startClockAction(actionTime : number, endFunc : Function){
if(actionTime <= 0){
return;
}
this.endFunc = endFunc;
this.node.active = true;
this.actionTime = actionTime;
this.nowTime = 0;
this.isRuning = true;
}
stopClockAction(){
this.node.active = false;
this.isRuning = false;
}
update (dt : number) {
if(!this.isRuning){
return;
}
this.nowTime += dt;
// 将时间转换为百分比，设置给this.sprite的FillRange属性
let per : number = this.nowTime/this.actionTime;
if(per > 1){
per = 1;
this.isRuning = false;
if(this.endFunc){
this.endFunc();
}
}
// 进度条 由多变少的控制
// per : 0 0.5 1
// 1-per:1 0.5 0
if(this.reverse){
per = 1 - per;
}
// 顺时针和逆时针的控制
if(this.clockWise){
per = -per;
}
this.sprite.fillRange = per;
}
}
三、 UI组件
四、 组件的使用测试GameMgr.ts
import ClockCtrl from "./ClockCtrl";
const {ccclass, property} = cc._decorator;
@ccclass
export default class GameMgr extends cc.Component {
@property({type:ClockCtrl, tooltip:"计时器组件"})
clock : ClockCtrl = null;
@property({tooltip:"计时器计时时长"})
actionTime : number = 5;
private endFunc(){
console.log(this.actionTime,"秒倒计时完成！");
}
start(){
this.clock.startClockAction(this.actionTime, this.endFunc);
}
}
