Cocos2d-x中类CCProgressTimer实现游戏人物血条

最近参与的一个项目中，大量用到了“血条”，我是通过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%时，位于进度条底下的血框就被显示出了一部分，从而达到游戏中，我们常见的血条的效果。