凭借多年的游戏开发经验,用cocoscreator2.13开发了一款web在线地图编辑器,暂且命名为EasyMapEditor,用Google浏览器打开,提供了从在线地图编辑到正式项目运行起来的完整流程,可用于RPG和SLG游戏开发。

在线地图编辑地址
https://easymapeditor-1258223435.cos.ap-guangzhou.myqcloud.com/v1.0.0/web-mobile/index.html861
相关demo体验地址
https://easymapeditor-1258223435.cos.ap-guangzhou.myqcloud.com/demo1/web-mobile/index.html666

地图编辑器支持菱形,方形,六边形A*寻路算法,支持在线编辑和在线运行测试,并且有项目源码下载用于正式项目开发。

备注:菱形和方形寻路是八方寻路,六边形是六方寻路。六边形每次检索周围可行走路点时只用考虑六个方向,比八方寻路少检索两次,所以六边形寻路效率是最高的。

在线地图编辑器界面如下,用户使用前最好先点击工具栏的教程看如何使用。

编辑器默认自带一张地图,并且默认六边形路点格子,用于给用户体验编辑器的使用。
用户想编辑自己的游戏地图的话,需要按以下步骤操作。

  1. 点击新建按钮打开新建面板,点击浏览按钮选择自己电脑上的一张地图底图,再选择一种路点格子类型,有菱形,方形,六边形这三种类型可选,并且可以设置路点格子尺寸,点击确定即可创建成功。

  2. 创建地图成功后,默认空的路格子是不可行走的,需要用户自己放置可行走路点,点击工具栏的“添加可行走路点”,然后在编辑区点击拖拽即可放置行走路点,其它类型的路点放置也一样做法,各类型的路点可以通过快捷键切换,如Q,W,E,R。底图太大可以打开小地图切换区域编辑。

  3. 编辑完成后用户可以点击运行按钮(或快捷键ctr + enter),在测试界面中会默认有一个角色,用户点击可行走路径任何一个位置时,角色会自动寻路到点击位置,如果角色初始位置不太好,用户可以点击角色拖拽到合适的位置,用户还可以查看寻路过程用于校验编辑的路径是否合适。

运行测试效果图如下

  1. 编辑完成后点击保存按钮,即可在用户电脑的下载路径下生成一个json格式的地图数据文件,这个就是我们的地图编辑文件。

  2. 拿到地图数据后,接下来用户在编辑器工具栏点击下载源码项目EasyMapEditorSource.zip,把该项目解压后,得到一个cocoscreator2.13项目,用大于等于cocoscreator2.13版本打开它。

把编辑地图运行到正式项目的操作流程

EasyMapEditorSource项目结果如下

  1. EasyMapEditorSource的资源目录resource下有个子目录map,map有两个子目录bg和data。
    bg目录是用来放游戏地图的,data目录是用来放编辑好的地图数据的。EasyMapEditorSource的脚本目录
    script里的Main脚本是游戏入口程序,打开这个脚本。

  2. 打开Main脚本后,在start函数里,把变量mapName的值改成你添加进来的地图数据文件的文件名,然后点击运行游戏即可完成运行你用web在线地图编辑器编辑的RPG地图,地图里默认有个角色,点击可走路面会自动寻路行走到目标点,游戏地图的源码在脚本目录下的map目录里,用户可以自己看。

Main脚本的修改如下

游戏最终运行结果如下

RPG游戏地图的体验路径
https://easymapeditor-1258223435.cos.ap-guangzhou.myqcloud.com/demo1/web-mobile/index.html666

 

Logo

这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!

更多推荐