原文：https://forum.cocos.org/t/topic/90542

我憑借多年的游戲開發經驗，用cocoscreator2.13開發了一款web在線地圖編輯器，暫且命名為EasyMapEditor，用Google瀏覽器打開，提供了從在線地圖編輯到正式項目運行起來的完整流程，可用于RPG和SLG游戲開發。

在線地圖編輯地址
https://easymapeditor-1258223435.cos.ap-guangzhou.myqcloud.com/v1.0.0/web-mobile/index.html 2.4K
相關demo體驗地址
https://easymapeditor-1258223435.cos.ap-guangzhou.myqcloud.com/demo1/web-mobile/index.html 1.7K

地圖編輯器支持菱形，方形，六邊形A*尋路算法，支持在線編輯和在線運行測試，并且有項目源碼下載用于正式項目開發。

備注：菱形和方形尋路是八方尋路，六邊形是六方尋路。六邊形每次檢索周圍可行走路點時只用考慮六個方向，比八方尋路少檢索兩次，所以六邊形尋路效率是最高的。

在線地圖編輯器界面如下，用戶使用前最好先點擊工具欄的教程看如何使用。

QQ圖片20200324234551.png
1204×678 1.32 MB
編輯器默認自帶一張地圖，并且默認六邊形路點格子，用于給用戶體驗編輯器的使用。
用戶想編輯自己的游戲地圖的話，需要按以下步驟操作。

點擊新建按鈕打開新建面板，點擊瀏覽按鈕選擇自己電腦上的一張地圖底圖，再選擇一種路點格子類型，有菱形，方形，六邊形這三種類型可選，并且可以設置路點格子尺寸，點擊確定即可創建成功。

創建地圖成功后，默認空的路格子是不可行走的，需要用戶自己放置可行走路點，點擊工具欄的“添加可行走路點”，然后在編輯區點擊拖拽即可放置行走路點，其它類型的路點放置也一樣做法，各類型的路點可以通過快捷鍵切換，如Q,W,E,R。底圖太大可以打開小地圖切換區域編輯。

編輯完成后用戶可以點擊運行按鈕（或快捷鍵ctr + enter），在測試界面中會默認有一個角色，用戶點擊可行走路徑任何一個位置時，角色會自動尋路到點擊位置，如果角色初始位置不太好，用戶可以點擊角色拖拽到合適的位置，用戶還可以查看尋路過程用于校驗編輯的路徑是否合適。

運行測試效果圖如下

QQ圖片20200325003101.png
1202×673 1.34 MB
編輯完成后點擊保存按鈕，即可在用戶電腦的下載路徑下生成一個json格式的地圖數據文件，這個就是我們的地圖編輯文件。

拿到地圖數據后，接下來用戶在編輯器工具欄點擊下載源碼項目EasyMapEditorSource.zip，把該項目解壓后，得到一個cocoscreator2.13項目，用大于等于cocoscreator2.13版本打開它。

把編輯地圖運行到正式項目的操作流程

QQ圖片20200325133847.png
1218×752 1.33 MB
EasyMapEditorSource項目結果如下

QQ圖片20200325005124.png
803×780 51.1 KB
EasyMapEditorSource的資源目錄resource下有個子目錄map，map有兩個子目錄bg和data。
bg目錄是用來放游戲地圖的，data目錄是用來放編輯好的地圖數據的。EasyMapEditorSource的腳本目錄
script里的Main腳本是游戲入口程序，打開這個腳本。

打開Main腳本后，在start函數里，把變量mapName的值改成你添加進來的地圖數據文件的文件名，然后點擊運行游戲即可完成運行你用web在線地圖編輯器編輯的RPG地圖，地圖里默認有個角色，點擊可走路面會自動尋路行走到目標點，游戲地圖的源碼在腳本目錄下的map目錄里，用戶可以自己看。

Main腳本的修改如下

QQ圖片20200325010213.png
1238×747 35.9 KB
游戲最終運行結果如下

QQ圖片20200325010756.png
1002×625 1.09 MB
RPG游戲地圖的體驗路徑
https://easymapeditor-1258223435.cos.ap-guangzhou.myqcloud.com/demo1/web-mobile/index.html 1.7K

如有需要幫忙，請聯系QQ：583051842

總結

以上是生活随笔為你收集整理的【转载】RPG或SLG游戏在线地图编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。