Cocos2d-x 遊戲開發教學：自定義幀動畫系統的設計與實現（二）

繼上一篇搭建主界面後，本篇著手構建遊戲核心的幀動畫系統。許多新人入職時動畫模塊已封裝完畢，導致不理解「幀」「動作」「動畫」的層級關係，遇到策劃需求「攻擊第 3 幀發射子彈」時一臉懵圈。因此我們拋棄 Cocos2d-x 內建 Animation，從零實現一套可控、可擴展的動畫系統。

核心概念釐清

關鍵洞察：同一類動畫的「動作-幀-紋理」元數據是共享的，不應隨每個實例重複存儲。因此引入 FrameAnimationBase（元數據）與 FrameAnimation（運行時實例）分離設計。

類結構設計

1. FrameAnimationBase（元數據容器，單例/共享）

• 存儲：action_name → Vector 映射
• 提供：AddFrame(action, frameName)、GetFrame(action, index)
• 記錄：defaultAction（首個添加的動作）

2. FrameAnimation（運行時實例，繼承 CCNode）

• 持有：base 指針、currentAction、currentFrameIndex、內部 CCSprite
• 核心介面：
  • Play(actionName)：切換動作，重置幀索引為 0
  • Step()：推進到下一幀，循環播放，調用 sprite->setDisplayFrame()

3. AnimationManager（全局管理，下一篇實現）

• 資源加載、實例創建、自動定時調用 Step()

代碼實現片段

FrameAnimationBase

class FrameAnimationBase : public CCObject {
    friend class FrameAnimation;
    CCDictionary* actionDic;      // actionName -> CCArray
    string defaultAction;
public:
    static FrameAnimationBase* create();
    void AddFrame(string actionName, CCSpriteFrame* frame);
    void AddFrame(string actionName, string frameName); // 從緩存獲取 frame
    CCSpriteFrame* GetFrame(string actionName, int index);
};

FrameAnimation

class FrameAnimation : public CCNode {
    FrameAnimationBase* base;
    string currAction;
    int currFrameIndex;
    CCSprite* sprite;
public:
    static FrameAnimation* create(FrameAnimationBase* base);
    void Play(string actionName); // 切換動作
    void Step();                  // 推進幀
};

Step() 邏輯

void FrameAnimation::Step() {
    CCArray* frames = base->GetFrames(currAction);
    if (++currFrameIndex >= frames->count()) currFrameIndex = 0; // 循環
    sprite->setDisplayFrame(base->GetFrame(currAction, currFrameIndex));
}

測試場景驗證

在 TestLayer 中構建：

1. 手動添加幀：base->AddFrame("run", "land_boss_pink01.png")…
2. 創建實例：ani = FrameAnimation::create(base)
3. 按鈕觸發 ani->Step() 觀察幀切換
4. XML 驅動加載：解析 luobo.xml 構建 Base，支持「happy/run/attack」多動作

下一步優化方向

• 將 XML 解析封裝進 FrameAnimationBase::createFromFile()
• 實現 AnimationManager：單例、資源緩存、全局定時器驅動 Step()
• 擴展播放模式：單次、來回、停留末幀、幀事件回調（如第 3 幀發射子彈）

原則：無需求不擴展。每個功能皆因具體遊戲需求而生，經版本迭代沉澱，而非憑空設計「通用大而全」組件。