地圖移動時角色跟隨邏輯 地圖牽引時 Canvas.GetLeft(Map)、Canvas.GetTop(Map) 即時更新。已知角色在地圖上的座標 (Spiri

背景問題 上節實現地圖牽引移動，遺留主角/障礙物跟隨移動問題。最簡單法：座標存 Tag 屬性（如 rect.Tag = x + , + y），取用時 Split

精靈控件 XAML 結構 <UserControl x:Class=WPFGameCourse.Controls.QXSpirit xmlns=h

文字描邊效果驗證 WPF/Silverlight 中 12px 文字顯示模糊。自製 QXControl:BorderText 增加 Stroke（描邊顏色）、S

第一種方法：實體滾動介質 建立 8 個全透明 Rectangle 佈局地圖邊緣 8 區域（相對視窗固定），CompositionTarget 即時判斷滑鼠懸停觸

地圖相對移動原理 地圖向上移 → 視窗向下取景視覺效果。實體介質法直觀、代碼簡單但效能較差。 第二種方法：滑鼠邊緣區域檢測 不建立滾動介質，即時判斷滑鼠所在

副本地圖概念 左：表現層地圖 (800×600)。右：PS 勾勒副本地圖 (800×600)，純色調、極小體積，符合 Silverlight 網頁遊戲需求。

混合移動優勢 可結合 A* 創造優美移動（如帝國時代改進型 A*）。回顧第七節：純 A* 路徑無障礙時仍有折疊（見下圖）。 核心洞察：雙座標系一一映射 主角

代碼邏輯說明 滑鼠點擊判斷副本地圖該點是否黑色（障礙物），是則不移動，否則啟動直線移動。變量儲存副本圖片源、主角精確座標、目標點。介面執行緒即時取得主角座標檢測

地圖引擎三層架構 前幾章講表現層（視覺介面），簡單遊戲足矣。為真實光影、虛擬世界，需深耕地圖。將地圖引擎分三層： 表現層（中間）：視覺介面，前章詳講。

實現原理 從地圖表現層見到遮擋物（如樹木） → 用 Photoshop 精確剪裁 → 存為背景透明 PNG → 多個遮擋物依序命名儲存。將遮罩層置頂層、地圖底層

截圖略顯粗糙，請見諒。兩棵樹長相奇特請包涵。 障礙物構建（三區域，基於第九節修改） // 區域 1 for (int y = 22; y <= 24;

障礙物構建（三段式，熟悉邏輯） // 三個循環構建三處障礙物，代碼略... 遮擋物：兩棵樹 用 Image 控件承載： Image Mask1 = new

任意點擊地圖，主角經過兩棵樹處均被 0.7 透明度遮擋，障礙物同步生效，主角繞行。障礙物、角色、遮罩三層次分明、互不干擾、完美並行。 總結 地圖引擎基本完成

兩類斜度地圖 偽斜度地圖：表現層圖片斜視，但障礙物等基底仍為正方形（第九節即此類）。優點：構建簡單、畫面漂亮。缺點：繞避不規則障礙物時行為別扭。若有優秀編

核心座標轉換算法 // 視窗座標系 → 遊戲座標系（縮小） private Point getGamePosition(double x, double y)

菱形障礙物視覺化 使用 SkewTransform + RotateTransform 組合模擬菱形視覺效果。 滑鼠事件座標轉換整合 在上節代碼基礎上，將滑鼠

斜度地圖驗證 A* 尋路清晰繪製路徑，主角沿斜度 60° 繞過菱形障礙物區。因 W(0,0) 與 G(0,0) 同定位於視窗左上，紅色負值區域不被識別，點擊會提

地圖背景載入 Image Map = new Image(); private void InitMap() { Map.Width = 800;

GridSize=20 時障礙物呈方塊狀，勉強達標。驗證 GridSize 越小定位越精確。 三段式障礙物構建算法 // 區塊 1：矩形區域 for (in