WPF/Silverlight 遊戲開發教程 (17)：打造八方向五動作完美精靈 — 素材整合與合成圖集

系列教程回顧與本章目標

前幾章已建立基礎精靈控件，但角色僅支援單一方向與單一動作。實戰遊戲中，角色需要八個方向（北、東北、東、東南、南、西南、西、西北，對應時鐘 0~7 點）與五大基礎動作（待機、跑步、攻擊、施法、特殊動作）。本章著重於美術素材標準化與圖集自動合成，為後續精靈控件的多方向多動作播放鋪路。

方向與動作定義規範

五大動作幀數配置（以《破天一劍》素材為例）：

• 待機：5 幀
• 跑步：8 幀
• 攻擊：7 幀
• 施法：6 幀
• 特殊（翹辮子）：8 幀

總計：(5+8+7+6+8) × 8 = 34 × 8 = 272 張單獨幀圖片。

美術素材預處理流程

1. 統一尺寸與錨點對齊

3D 渲染輸出或提取的素材，單幀尺寸往往不一。必須透過 Photoshop「動作」批次處理，將所有幀統一為固定畫布大小（本例 150×150 像素），並確保角色在畫布中水平垂直置中，腳部位置一致。這是後續播放不抖動、碰撞判定準確的基礎。

2. 幀對齊微調

將同一動作的連續幀疊加預覽，檢查角色輪廓是否重合。若有位移，需在 Photoshop 中逐幀微調，直到播放流暢無「殘影」或「跳動」。此步驟極度依賴美工細節，直接決定遊戲視覺品質。

核心技術：自動合成圖集 — ComposeImage 方法

將 272 張分散小圖合併為單一大圖（圖集 Atlas），運行時僅需載入一張圖片，再以 CroppedBitmap 截取所需幀，大幅減少 I/O 與記憶體碎片。

演算法邏輯

• 目標圖集：8 列（方向）× 34 行（動作幀）
• 每列寬 = 單幀寬 (150)；每列高 = 單幀高 (150)
• 總尺寸：5100 × 1200 像素
• 排列規則：
  行索引 i (0~7) → 方向 0~7
  列索引 j (0~33) → 依序為 待機 0~4、跑步 5~12、攻擊 13~19、施法 20~25、特殊 26~33

完整實作碼

public static class Super
{
    /// <summary>
    /// 將 N 幀圖片合成一張 8 方向角色各動作分布圖
    /// </summary>
    /// <param name="SourcePath">源文件目錄（含尾斜線）</param>
    /// <param name="SavaToPath">輸出圖集路徑</param>
    /// <param name="imgNum">總幀數（必須為 8 的倍數）</param>
    /// <param name="imgWidth">單幀寬度</param>
    /// <param name="imgHeight">單幀高度</param>
    public static void ComposeImage(string SourcePath, string SavaToPath, int imgNum, int imgWidth, int imgHeight)
    {
        using (FileStream fs = new FileStream(SavaToPath, FileMode.Create))
        {
            DrawingVisual dv = new DrawingVisual();
            using (DrawingContext dc = dv.RenderOpen())
            {
                int count = 1;
                int framesPerDir = imgNum / 8; // 34
                for (int dir = 0; dir < 8; dir++)
                {
                    for (int frame = 0; frame < framesPerDir; frame++)
                    {
                        // 假設檔名格式：1-1.png, 2-1.png ... 若為 1.png, 2.png 請將 "-1.png" 改為 ".png"
                        string fileName = SourcePath + count + "-1.png";
                        BitmapImage src = new BitmapImage(new Uri(fileName, UriKind.Absolute));
                        dc.DrawImage(src, new Rect(frame * imgWidth, dir * imgHeight, imgWidth, imgHeight));
                        count++;
                    }
                }
            }

            RenderTargetBitmap rtb = new RenderTargetBitmap(
                framesPerDir * imgWidth, 8 * imgHeight, 96, 96, PixelFormats.Pbgra32);
            rtb.Render(dv);

            PngBitmapEncoder encoder = new PngBitmapEncoder();
            encoder.Frames.Add(BitmapFrame.Create(rtb));
            encoder.Save(fs);
        }
    }
}

呼叫範例

// 素材目錄 E:\Body\ 下有 1-1.png ~ 272-1.png
Super.ComposeImage(@"E:\Body\", "Body0.png", 272, 150, 150);

圖集結構驗證

合成完成後，以圖片檢視器開啟 Body0.png，應可見：

• 橫向 34 格：每格 150px，對應單一動作幀序列
• 縱向 8 格：每格 150px，對應 8 個方向
• 第 0 行（最上）= 方向 0（北）的所有動作幀
• 第 1~5 格 = 待機；6~13 格 = 跑步；14~20 格 = 攻擊；21~26 格 = 施法；27~34 格 = 特殊

此規律化排列讓後續「根據方向與動作類型計算幀座標」變成簡單的數學運算：
X = frameIndex * frameWidth、Y = directionIndex * frameHeight。

效能與實務建議

若專案需支援雙平台，建議製作兩套素材（高/低幀數），或在 WPF 端動態降採樣。

下章預告

擁有合成圖集後，下一章將實作精靈控件的幀截取播放邏輯：根據當前方向、動作狀態、幀索引，從圖集中即時 CroppedBitmap 切出對應幀並指派給 Image.Source，實現流暢的八方向五動作切換。

1. 上一篇文章： Visual C# 實作資料庫記錄瀏覽器：DataBinding 與 BindingManagerBase 完整教學
2. 下一篇文章： WPF/Silverlight 遊戲開發教程 (16)：牽引式地圖移動模式 — A* 尋路整合與座標系轉換

關於C#

C# 委托在自定義用戶控件中的事件傳遞實戰

為什麼自定義控件需要委托？ 封裝登錄、查詢等通用界面為用戶控

C# 海量測試資料自動產生系統架構與實作：支援 MSSQL/MySQL/Oracle/SQLite 與批次寫入

單元測試與效能測試常需大量模擬資料，手工輸入極耗時。本文介紹

動態模型核心解析：狀態圖、事件追蹤圖、場景識別與一致性檢驗

動態模型核心定位 著重控制邏輯，考察物件狀態隨時間變化的序列

C# 擴展方法進階實戰：Enumerable.Cast<T> 實戰應用指南

前言 Enumerable.Cast<T>()