cocos 实现环形血条（2d）

最近在搞一个小游戏（物理小），角色是圆形的，于是就想把血条也搞成环形的，环角色一圈。

实现

1. 圆形进度条

说到血条首先想到的是进度条，于是找了一下发送cocos有现成的进度条组件 ProgressBar。
但是它是直的，首先要把它变成圆的：

子节点Bar中的sprite也要做同样的设置。

2. 然后在进度条上层覆盖圆形的头像

就有了环形的效果：

3. 实现掉血、加血

这个就比较简单了，直接设置 ProgressBar 的 progress 属性就行了

this.bloodbar.progress = 0.3

4. 血条动画

一次将 progress 设置到目标位置显得生硬，这里加一个简单的动画。

• 掉血或加血时只处理数值：

setBlood(num: number) {
    this.currBlood += num;
    if (this.currBlood > this.maxBlood) this.currBlood = this.maxBlood;
    if (this.currBlood < 0) this.currBlood = 0;
}

• 在 update 中调用：

bloodAnim(){
    let speed = 30;//动画速度（即动画执行多少次完成一滴血的加减），值越小越快
    if(this.bloodbar.progress == (this.currBlood / this.maxBlood))return;
    let remain = this.bloodbar.progress - this.currBlood / this.maxBlood;
    if(Math.abs(remain) <= (1/ this.maxBlood/speed)){
        this.bloodbar.progress = this.currBlood / this.maxBlood;
        return;
    }
    if(remain > 0){
        this.bloodbar.progress -= (1/this.maxBlood/speed); //血条每次变化的量：一滴血的1/30
    }else{
        this.bloodbar.progress += (1/this.maxBlood/speed);
    }
}

完结。。。