2D 遊戲動畫播放系統設計思路：參考 Flash 架構的輕量實作

背景與定位

大廠有完整編輯器（時間軸、圖層、狀態機），中小團隊需低成本、可維護的方案。本文提出參考 Flash「圖層→動作→幀序列」層級結構的資料驅動動畫系統，無需圖形化編輯器，純腳本/資料定義即可。

核心資料模型

// 偽代碼結構
AnimationSet = {
    layers: [           // 圖層列表，索引 0 為最底層
        {
            id: "bg",
            actions: {  // 動作映射表
                "idle":   { frames: [0,1,2,3],   fps: 8 },
                "shine":  { frames: [4,5,6,7,8], fps: 12 }
            }
        },
        {
            id: "character",
            actions: {
                "walk":   { frames: [10,11,12,13], fps: 10 },
                "attack": { frames: [20..30],      fps: 15 }
            }
        }
        // 更多圖層...
    ]
}

關鍵概念

• 圖層：繪製順序（Painter's Algorithm），下層先畫。
• 動作：邏輯狀態（idle、walk、attack），對應一組幀索引序列。
• 幀序列：引用圖集中的圖片索引，支援循環、單次、鏈接下一動作。
• 時間控制：每動作可獨立設定 FPS 或每幀持續幀數。

播放器核心邏輯

class AnimationPlayer {
    AnimationSet set;
    int currentLayer = 0;
    String currentAction = "idle";
    int frameIndex = 0;
    int frameTimer = 0;

    void update() {
        for (Layer layer : set.layers) {
            Action act = layer.actions.get(layer.currentAction);
            if (act == null) continue;
            frameTimer++;
            if (frameTimer >= act.frameDelay) { // frameDelay = 1000/fps 或幀數
                frameTimer = 0;
                frameIndex = (frameIndex + 1) % act.frames.length;
                // 可檢查單次播放結束觸發回調/切換動作
            }
            // 繪製當前幀
            int imgIdx = act.frames[frameIndex];
            drawImage(layer, imgIdx);
        }
    }
}

優勢與擴展

落地建議

1. 美術輸出：單張大圖集 + 定義檔（JSON/自訂二進位）。
2. 工具鏈：簡單 Python/JS 腳本將 Flash/Spine/TexturePacker 輸出轉為引擎格式。
3. 引擎端：AnimationSet 載入 → AnimationPlayer 實例化 → 每幀 update(delta) + render(g)。
4. 效能：合併同圖層同圖集繪製呼叫，減少 drawImage 次數。

總結

「思想比代碼重要」。參考 Flash 成熟架構，以圖層-動作-幀序列三級結構建立資料模型，配合極簡播放器，即可在無編輯器環境下實現專業級動畫表現。適合 2D RPG、ACT、STG 等專案快速落地。