最近参与的一个项目中，大量用到了“血条”，我是通过Cocos2d-x中的CCProgressTime来实现的，下面来记录一下我的实现方法。


一、CCProgressTimer的基本使用步骤：

cocos2d-x的进度条函数CCProgressTimer,我们可以这样定义：

//s_pPathSister1为图片的路径CCProgressTimer *left = CCProgressTimer::create(CCSprite::create(s_pPathSister1));

然后我们设置进度条的属性1：

//kCCProgressTimerTypeBar为进度条的形式left->setType(kCCProgressTimerTypeBar);

cocos2d-x封装了2中显示方式：

条形：kCCProgressTimerTypeBar

圆弧形：kCCProgressTimerTypeRadial

属性2：

setMidpoint();

对圆弧来说，就是设置中心点，但对条形来说，它是设置进度条的起始点，（0,y）表示最左边，（1,y）表示最右边，（x,1）表示最上面，（x,0）表示最下面。

属性3：

setBarChangeRate();

用来设置进度条动画方向的，（1,0）表示横方向，（0,1）表示纵方向。

还有最重要的一个方法：

setPercentage();

用来设置进度条的当前进度，(100.0f)表示满值。


二、使用CCProgressTimer实现游戏人物血条：

//角色血条(空血框)CCSprite *pBloodKongSp = CCSprite::create("bloodKong.png");pBloodKongSp->setPosition(ccp(sizeSp.width/2, sizeSp.height+10));//绑到人物精灵上pSprite->addChild(pBloodKongSp);//满血条CCSprite *pBloodManSp = CCSprite::create("bloodMan.png");//创建用于表示人物当前血量的进度条CCProgressTimer *pBloodProGress = CCProgressTimer::create(pBloodManSp);//设置为条形pBloodProGress->setType(kCCProgressTimerTypeBar);//设置起始点为条形左下方pBloodProGress->setMidpoint(ccp(0,0));//设置为水平方向pBloodProGress->setBarChangeRate(ccp(1, 0));//设置初始进度为满血pBloodProGress->setPercentage(100.0f);//设置位置，与上面的空血框重叠，且居于其上pBloodProGress->setPosition(ccp(sizeSp.width/2, sizeSp.height+10));//绑到人物精灵上，并设置tag值，一遍之后获取进度条，并通过setPercentage改变当前血量pSprite->addChild(pBloodProGress, 1, 1);

实现原理其实很简单，就是一个用满的血条创建的进度条覆盖在一个用空的血框创建的精灵上，并通过进度条的setPercentage方法改变它自身的显示区域，当进度小于100%时，位于进度条底下的血框就被显示出了一部分，从而达到游戏中，我们常见的血条的效果。