转载RPG或SLG游戏在线地图编辑器

Posted 2021-06-29 asmcvc

原文：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