C# 開發 WPF/Silverlight 遊戲教學（十六）：牽引式地圖移動模式（下）

精靈控件讓遊戲開發更完美

經過前幾節的學習，我們已經掌握了如何創建一個初具雛形的精靈控件。有了它，完成牽引式地圖移動模式已經近在咫尺，只剩最後一個關鍵環節，請大家繼續加油！

回顧與分析：主角跟隨地圖移動的原理

在上一節（C# 開發 WPF/Silverlight 遊戲教學（十五）：精靈控件橫空出世！（下））中，我在 UI 線程中通過不斷設置 Canvas.SetLeft(Spirit, mapLeft + Spirit.X) 和 Canvas.SetTop(Spirit, mapTop + Spirit.Y) 來實現主角跟隨地圖移動。從這個公式可以分析出影響主角在視窗中顯示位置的兩個關鍵因素：

• 地圖圖片相對於視窗的位置（Canvas.GetLeft(Map), Canvas.GetTop(Map)）：這是在滑鼠拖拽地圖移動時不斷改變的，與主角在地圖上的行走無關。
• 主角自身的 X、Y 座標屬性（Spirit.X, Spirit.Y）：當主角在地圖上行走時，這些值會不斷更新。

由此得出結論：要實現主角在此模式下的移動，只需在它行走時不斷更新其座標 Spirit.X 和 Spirit.Y，UI 線程會同步更新主角在視窗中的位置，從而達到完美的遊戲動畫銜接。

改進 A* 尋路算法以適配牽引式模式

找到切入點後，實現起來就簡單多了。首先需要對前面章節中的 A* 尋路方法進行改進。在之前的章節中，由於地圖固定不動且尺寸等同於視窗大小，我們將地圖和視窗視為一體，因此在 A* 尋路過程（AStarMove()）中同時實現了主角相對於地圖的移動——即基於依賴屬性 PropertyPath("Canvas.Left"), PropertyPath("Canvas.Top") 的 Storyboard 動畫。

但在牽引式地圖移動模式中不能這樣做。根據前面的分析，必須改為基於依賴屬性 PropertyPath("X"), PropertyPath("Y") 的 Storyboard 動畫。此時的動畫更貼切地理解為：從尋路得到的路徑序列點中連續取出座標的計時器，因為它只負責改變 Spirit 的 X、Y 屬性，而不負責在介面中更新 Spirit 的位置實現動畫。但這已經足夠了，因為它滿足了更新精靈座標的目的（剩下的任務交由 UI 線程處理，代碼與上一節相同，我們不需關心）。

座標系轉換輔助函數

首先定義兩個函數 SpiritGameX、SpiritGameY，用於將主角在地圖座標系中的座標換算成遊戲尋路座標系中的座標：

int GridSize = 20; // 單位格子大小
int SpiritCenterX = 4; // 主角腳底離主角圖片左邊的距離（尋路座標系中）
int SpiritCenterY = 5; // 主角腳底離主角頂部的距離（尋路座標系中）

// 將主角的座標換算成遊戲座標系中的座標（縮小操作）
int GameSystemX {
    get { return ((int)(Spirit.X) / GridSize) + SpiritCenterX; }
}
int GameSystemY {
    get { return ((int)(Spirit.Y) / GridSize) + SpiritCenterY; }
}

這兩個屬性獲取器將主角在畫布上的像素座標除以格子大小，再加上中心點偏移，得到遊戲邏輯座標系中的格子索引，供 A* 算法使用。