WPF/Silverlight 遊戲開發教程 (4)：2D 角色動畫實作一 — 圖片切換法、DispatcherTimer 幀驅動、素材標準化

動畫實作兩大主流路線

1. 圖片切換法 (本章)：每幀獨立檔案，DispatcherTimer 循環切換 Image.Source
2. 圖集裁切法 (第 5 章)：單一大圖集，CroppedBitmap 區域裁切

Silverlight 僅支援方法一；WPF 推薦方法二但方法一入門更簡單。

素材標準化規範 (關鍵前置作業)

1. 3D Max 等工具渲染輸出：每個動作 × 8 方向 × N 幀
2. Photoshop 批次處理：
   - 統一畫布尺寸 (本教程 150×150)
   - 角色置中、腳底對齊
   - 背景 Alpha 透明 (PNG 格式)
   - 檔名有序：0.png~7.png (8 幀跑步)
3. 專案建立 Player 資料夾，存入標準化素材

「工欲善其事，必先利其器」——素材品質直接決定遊戲視覺上限，批次標準化不可省略。

DispatcherTimer 幀動畫完整實作

int count = 1;
Image Spirit;

public Window4()
{
    InitializeComponent();
    Spirit = new Image { Width = 150, Height = 150 };
    Carrier.Children.Add(Spirit);

    var dt = new DispatcherTimer();
    dt.Tick += (s, e) => {
        Spirit.Source = new BitmapImage(new Uri(@$"Player\{count}.png", UriKind.Relative));
        count = count == 7 ? 0 : count + 1;
    };
    dt.Interval = TimeSpan.FromMilliseconds(150); // ~6.67 FPS
    dt.Start();
}

count 循環 0→7→0，對應 8 幀跑步動畫。UriKind.Relative 解析相對專案輸出目錄路徑。

執行效果

按 Ctrl+F5，角色在畫面左上角 (0,0) 原地播放跑步循環動畫。雖未移動，但「動起來」的關鍵一步已完成。

常見坑點與避雷指南

• 路徑錯誤：確認圖片已設為「內容」複製到輸出目錄，或手動放入 bin\Debug\Player\
• 幀率過高/低：150ms 為經驗值，動作類型不同需調整（攻擊較快、施法較慢）
• 尺寸不一致：未標準化導致播放抖動，務必批次統一 150×150
• 錨點偏移：腳底未對齊導致移動時「滑步」，需在 Photoshop 逐幀對齊

下章預告

下一章介紹圖集裁切法：將 10 幀合成 1500×150 單一大圖，用 CroppedBitmap 瞬時裁切，大幅降低 IO 開銷，並示範施法動畫播放。