C# 開發 WPF/Silverlight 遊戲教學（十七）：完美精靈之八面玲瓏（下）

素材準備完成，進入圖片合成階段

一切就緒後，接下來的工作是將主角 8 方向 5 動作的所有幀圖片（本例共 272 張）進行處理，最終合成一張按規律排列的 8 方向 5 動作整合圖。如何使用 WPF 類庫將這 272 張圖片合併為一張？請看本節精華方法 ComposeImage()：

/// <summary>
/// 將 N 幀圖片合成一張 8 方向角色各動作分布圖
/// </summary>
public static void ComposeImage(string SourcePath, string SavaToPath, int imgNum, int imgWidth, int imgHeight) {
    System.IO.FileStream fileStream = new System.IO.FileStream(SavaToPath, System.IO.FileMode.Create);
    DrawingVisual drawingVisual = new DrawingVisual();
    DrawingContext drawingContext = drawingVisual.RenderOpen();
    int count = 1;
    for (int i = 0; i < 8; i++) {
        for (int j = 0; j < imgNum / 8; j++) {
            drawingContext.DrawImage(new BitmapImage(new Uri(SourcePath + count + "-1.png")), 
                new Rect(j * imgWidth, i * imgHeight, imgWidth, imgHeight));
            count += 1;
        }
    }
    drawingContext.Close();
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap((imgNum / 8) * imgWidth, 8 * imgHeight, 0, 0, PixelFormats.Pbgra32);
    renderTargetBitmap.Render(drawingVisual);
    PngBitmapEncoder encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
    encoder.Save(fileStream);
    fileStream.Close();
}

此方法寫在名為 Super 的靜態類中，參數含義註釋已很清楚。關鍵算法邏輯在雙層循環中：外層 8 方向，內層每方向的幀數（imgNum / 8），按序號繪製到對應位置。檔名格式如 1-1.png、2-1.png…；若為 1.png、2.png… 格式，只需將 "-1.png" 換成 ".png" 即可。

合成結果展示

調用 Super.ComposeImage(@"E:\Body\", "Body0.png", 272, 150, 150) 得到寬 5100px（150×34）、高 1200px（150×8）的整合圖（圖片已縮小至 15% 供展示）：

局部放大圖清晰顯示排列規律：8 行 34 列。行對應 8 個方向（代號 0-7），列對應 5 大動作：1-5 列站立，6-13 列跑動，14-20 列攻擊，21-26 列施法，27-34 列死亡。理清規律後，下節將講解如何進行局部單圖截取。