WPF/Silverlight 遊戲開發教程 (9)：2D 角色在地圖上移動 — 真實腳底定位、直線與 A* 雙模式移動

場景構建：地圖背景與障礙物矩陣

Image Map = new Image();
private void InitMap()
{
    Map.Width = 800; Map.Height = 600;
    Map.Source = new BitmapImage(new Uri(@"Map\Map.jpg", UriKind.Relative));
    Carrier.Children.Add(Map);
    Canvas.SetZIndex(Map, -1);
}

障礙物以 GridSize=20 矩陣 Matrix[x,y] 標記（0=阻擋，1=通行），並同步建立半透明綠色 Rectangle 視覺化於 Carrier，三重迴圈構建不規則障礙物群。

角色真實腳底定位邏輯

Image 控件預設以左上角定位，導致角色「腳底」非圖片中心。引入兩套座標系互轉屬性：

int SpiritCenterX = 4; // 腳底距圖片左側格數
int SpiritCenterY = 5; // 腳底距圖片頂部格數

// 遊戲邏輯座標 (格子單位)
int SpiritGameX => (int)Canvas.GetLeft(Spirit) / GridSize + SpiritCenterX;
int SpiritGameY => (int)Canvas.GetTop(Spirit) / GridSize + SpiritCenterY;

// 視窗像素座標
int SpiritWindowX => (SpiritGameX - SpiritCenterX) * GridSize;
int SpiritWindowY => (SpiritGameY - SpiritCenterY) * GridSize;

所有邏輯判定（A* 起點、碰撞檢測）使用 SpiritGameX/Y；視覺定位使用 SpiritWindowX/Y 或直接 Canvas.GetLeft/Top。

DispatcherTimer 驅動幀動畫

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

角色持續播放 8 幀跑步動畫，無論是否移動（後續優化：靜止時切待機幀）。

滑鼠點擊觸發移動：Storyboard 雙軸動畫

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point p = e.GetPosition(Carrier);
    Move(p);
}

private void Move(Point p)
{
    var sb = new Storyboard();

    var animX = new DoubleAnimation(
        Canvas.GetLeft(Spirit), p.X,
        new Duration(TimeSpan.FromSeconds(1)));
    Storyboard.SetTarget(animX, Spirit);
    Storyboard.SetTargetProperty(animX, new PropertyPath("(Canvas.Left)"));
    sb.Children.Add(animX);

    var animY = new DoubleAnimation(
        Canvas.GetTop(Spirit), p.Y,
        new Duration(TimeSpan.FromSeconds(1)));
    Storyboard.SetTarget(animY, Spirit);
    Storyboard.SetTargetProperty(animY, new PropertyPath("(Canvas.Top)"));
    sb.Children.Add(animY);

    if (!Resources.Contains("rectAnimation")) Resources.Add("rectAnimation", sb);
    sb.Begin();
}

角色在 1 秒內線性移動至點擊處，同時幀動畫持續播放，形成「跑步移動」視覺。

三大缺憾與優化方向

下章預告

下一章引入斜度 α 地圖，將直角網格升級為菱形網格，重構座標轉換與 A* 尋路，邁向真正的 2.5D 遊戲地圖引擎。

1. 上一篇文章： WPF/Silverlight 遊戲開發教程 (10)：斜度 α 地圖構造與座標系轉換算法 — 菱形網格、60 度投影
2. 下一篇文章： WPF/Silverlight 遊戲開發教程 (8)：完美實現 A* 尋路動態動畫 — PathFinderFast、關鍵幀平滑銜接、軌跡視覺化

關於C#

C# 自動讀寫設定檔開源元件：XML/INI/Registry 三模式支援

專案目標 建立一個基類 Configuration，讓開發者

C# ClickOnce 與 requireAdministrator 衝突解決：取消啟用 ClickOnce 安全性設定即可

專案屬性 → 安全性 分頁勾選「啟用 ClickOnce 安

ASP.NET AJAX 實現無刷新圖片切換輪播特效：預載與轉場動畫

前言 本文示範結合 ASP.NET AJAX (AjaxPr

Visual Studio 2010 安裝失敗終極排查指南：從日誌分析到乾淨重裝完整流程

Visual Studio 2010 (VS2010) 安裝