C# 開發 WPF/Silverlight 動畫與遊戲系列教程（三十四）：地圖編輯器誕生

前言

教程示例遊戲雖有 A* 但難以輕鬆設定障礙物；且地圖為整張大圖，移動導致頻繁切割，大地圖效能損耗明顯。切片處理可達最大優化：按需載入、依主角位置顯示特定區域。配合任意勾勒遮擋物，完美詮釋遊戲世界。開發地圖編輯器刻不容緩。

編輯器設計：雙 ScrollViewer 協同

用 ScrollViewer 載入地圖，HorizontalScrollBarVisibility/VerticalScrollBarVisibility 設 Auto 自適應。因單一 ScrollViewer 僅能承載一 Content，再加一背景透明的 ScrollViewer 承載障礙物 Grid，兩者尺寸、捲軸位置時刻同步：

private void ObstructionViewer_ScrollChanged(object sender, ScrollChangedEventArgs e) {
    ScrollViewer scrollViewer = sender as ScrollViewer;
    MapViewer.ScrollToVerticalOffset(scrollViewer.VerticalOffset);
    MapViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset);
}

核心功能實作

1. 載入地圖

OpenFileDialog 篩選 *.jpg、*.png。

2. 動態佈局 Grid 網格

依地圖尺寸與單元格大小動態加入 ColumnDefinition/RowDefinition。ShowGridLines 可顯示邊框但嚴重拖慢效能，後續將優化。

grid = new Grid() { ShowGridLines = ShowGrid.IsChecked.Value, Width = width, Height = height, ... };
for (int x = 0; x < grid.Width / gridWidth; x++) grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(gridWidth) });
for (int y = 0; y < grid.Height / gridHeight; y++) grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(gridHeight) });
scrollViewer.Content = grid;

3. 設定障礙物（繪製/擦除）

註冊滑鼠左鍵點擊與移動事件，配合邏輯實現：

Point p = e.GetPosition(ObstructionViewer);
if (p.X < 738 && p.Y < 551) {
    p = e.GetPosition(Map);
    SetObstructionMatrix((int)(p.X / GridWidthSlider.Value), (int)(p.Y / GridHeightSlider.Value), 0);
}

4. 模擬 A* 尋路

繪製起終點，引用教程 A* DLL 即可模擬：

IPathFinder pathFinder;
List<Rectangle> pathRect = new List<Rectangle>();
private void FindPath_Click(object sender, RoutedEventArgs e) {
    pathFinder = new PathFinderFast(ObstructionMatrix);
    List<PathFinderNode> path = pathFinder.FindPath(new Point(start_x, start_y), new Point(end_x, end_y));
    // 以白色小矩形標記路徑
}

5. 障礙物陣列導出/導入 XML

模板：<Item ID="Obstruction" Value="" />

導出：遍歷陣列，障礙(0)以 x_y 格式逗號分隔存入 Value。導入：解析 XML 還原繪製。導出範例：

編輯器初具雛形，後續將持續添加新功能（切片、遮擋物編輯等），目標：讓遊戲設計更輕鬆快速。敬請關注！

出處：https://alamiye010.cnblogs.com/