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%時，位于進度條底下的血框就被顯示出了一部分，從而達到游戲中，我們常見的血條的效果。