Cocos2d-x CCProgressTo 進度條動作詳解：條形與扇形進度條完整實作範例

CCProgressTimer 核心概念

CCProgressTimer 是 Cocos2d-x 專為進度條設計的節點，繼承自 CCNode，內部包裝一個 CCSprite 作為進度圖片。支援兩種模式：
• Type Bar（條形）：水平或垂直填充
• Type Radial（扇形/環形）：以中心點為圓心旋轉填充

條形進度條 完整範例

// 1. 建立背景圖
CCSprite* proBack = CCSprite::create("barback.png");
proBack->setPosition(ccp(winSize.width/2 - 100, winSize.height/2));
addChild(proBack);

// 2. 建立進度計時器（使用前景圖）
CCProgressTimer* left = CCProgressTimer::create(CCSprite::create("bar.png"));
left->setPosition(ccp(winSize.width/2 - 100, winSize.height/2));
addChild(left);

// 3. 設定為條形模式
left->setType(kCCProgressTimerTypeBar);

// 4. 關鍵參數設定
// setMidpoint(ccp(x,y))：進度起始點，x,y ∈ [0,1]
// ccp(0,0) 左下角、ccp(1,0) 左上角、ccp(0,1) 右下角、ccp(1,1) 右上角
left->setMidpoint(ccp(1, 0));        // 從左邊開始向右

// setBarChangeRate(ccp(x,y))：水平/垂直方向填充比例
// ccp(1,0) 僅水平、ccp(0,1) 僅垂直、ccp(1,1) 同時
left->setBarChangeRate(ccp(1, 0));   // 純水平填充

// 5. 執行進度動作：2 秒從 0% 到 100%，並循環
CCProgressTo* to = CCProgressTo::create(2.0f, 100.0f);
left->runAction(CCRepeatForever::create(to));

扇形進度條 完整範例

CCSprite* proBack2 = CCSprite::create("radialback.png");
proBack2->setPosition(ccp(winSize.width/2 + 100, winSize.height/2));
addChild(proBack2);

CCProgressTimer* right = CCProgressTimer::create(CCSprite::create("radial.png"));
right->setPosition(ccp(winSize.width/2 + 100, winSize.height/2));
addChild(right);

right->setType(kCCProgressTimerTypeRadial);
// 扇形模式 midpoint 固定為中心點
right->setMidpoint(ccp(0.5f, 0.5f));

CCProgressTo* to2 = CCProgressTo::create(2.0f, 100.0f);
right->runAction(to2);  // 不循環，跑完停在 100%

關鍵參數對照表

常見應用場景與技巧

• 血條/經驗條：用 Bar 模式，setMidpoint(ccp(0,0)) + setBarChangeRate(ccp(1,0)) 從左往右。
• 倒數計時環：用 Radial 模式，搭配 CCProgressFromTo 做倒數動畫。
• 動態更新：隨時呼叫 setPercentage(val) 即時改變進度，無需重建動作。
• 反向填充：setMidpoint(ccp(1,0)) 從右向左；setMidpoint(ccp(0,1)) 從下往上。

完整標頭檔範例

// T17CCProgressTo.h
#ifndef __T17_CCPROGRESS_TO_H__
#define __T17_CCPROGRESS_TO_H__

#include "cocos2d.h"
using namespace cocos2d;

class T17CCProgressTo : public CCLayer {
public:
    virtual bool init();
    CREATE_FUNC(T17CCProgressTo);
};

#endif // __T17_CCPROGRESS_TO_H__