Cocos 2.x TileMap

一、编辑器版本

TileMap编辑器，建议下载1.2版本的。https://github.com/mapeditor/tiled/releases/tag/v1.2.0
刚开始我下载了1.7版本，cocos会提示：

cocos2d: TMXFormat: Unsupported TMX version: 1.5

至于为什么是1.2，参考官方文档https://docs.cocos.com/creator/manual/zh/asset-workflow/tiledmap.html

瓦片图资源是由 TiledMap 所导出的数据格式（Creator v2.1 及以下支持 TiledMap v1.0.0，Creator v2.2.0 及以上支持 TiledMap v1.2.0）。

另外可参考官方文档：TiledMap 组件参考
https://docs.cocos.com/creator/manual/zh/components/tiledmap.html

二、寻路

参考官方示例改 TiledMap 瓦片地图+寻路，这个帖子提供了正常角度的地图坐标转换。我现在想做斜45度的地图，需要修改坐标转换算法。

三、坐标

参考
笔记：TileMap坐标转换
 45度角地图坐标计算
 瓦片地图-坐标转换

1.地图类型

image.png

正常

斜45

45度交错

六角交错

所有地图类型的坐标都是格子数，X轴向右增加，Y轴向下增加
正常/45度交错/六角交错地图左上角第一个格子为起始点：(0,0)
45度地图上方顶点第一个格子为起始点：(0,0)

2.坐标系

image.png

TileMap坐标：以地图左上角为原点(0,0)，X轴向右增加，Y轴向下增加
OpenGL坐标：以地图左下角为原点(0,0)，X轴向右增加，Y轴向上增加
Creator坐标：以节点中心点为原点(0,0)，X轴向右增加，向左减少，Y轴向上增加，向下减少

3.引擎提供tiled格式转图层坐标

let Orientation = cc.Enum({
    /**
     * !#en Orthogonal orientation.
     * !#zh 直角鸟瞰地图（90°地图）。
     * @property ORTHO
     * @type {Number}
     * @static
     */
    ORTHO: 0,

    /**
     * !#en Hexagonal orientation.
     * !#zh 六边形地图
     * @property HEX
     * @type {Number}
     * @static
     */
    HEX: 1,

    /**
     * Isometric orientation.
     * 等距斜视地图（斜45°地图）。
     * @property ISO
     * @type {Number}
     * @static
     */
    ISO: 2
});

    /**
     * !#en Returns the position in pixels of a given tile coordinate.
     * !#zh 获取指定 tile 的像素坐标。
     * @method getPositionAt
     * @param {Vec2|Number} pos position or x
     * @param {Number} [y]
     * @return {Vec2}
     * @example
     * let pos = tiledLayer.getPositionAt(cc.v2(0, 0));
     * cc.log("Pos: " + pos);
     * let pos = tiledLayer.getPositionAt(0, 0);
     * cc.log("Pos: " + pos);
     */
    getPositionAt (pos, y) {
        let x;
        if (y !== undefined) {
            x = Math.floor(pos);
            y = Math.floor(y);
        }
        else {
            x = Math.floor(pos.x);
            y = Math.floor(pos.y);
        }
        
        let ret;
        switch (this._layerOrientation) {
            case cc.TiledMap.Orientation.ORTHO:
                ret = this._positionForOrthoAt(x, y);
                break;
            case cc.TiledMap.Orientation.ISO:
                ret = this._positionForIsoAt(x, y);
                break;
            case cc.TiledMap.Orientation.HEX:
                ret = this._positionForHexAt(x, y);
                break;
        }
        return ret;
    },

四、有做大型RPG或SLG游戏需求的朋友请进，有在线地图编辑器

作者QQ583051842
以下为评论区精选：

1.人物移动使用插值

从a点走到b的过程中突然又点击了c点，a到b点的行走被打断，改为当前位置到c点行走，用tween不好控制，而且tween性能消耗大。而插值可以轻松每时每刻的屏幕平滑移动。还有一种情况，arpg游戏，a点走到b点的过程中，角色中了一个晕眩技能，被迫停下，用tween就不好处理了。

2.想问下如果想在地图上添加NPC 怪物等等这个可以添加么然后如何触发事件

在地图上添加怪物和npc可以在cocoscreator里编辑。新建一个场景，把地图底图拉到场景里，然后把怪物和npc根据底图的位置拖放，在把这些怪物和npc一起生成一个预制体。运行游戏时，加载地图的同时顺便把这个预制体加载进来放置在底图上就可以了。

点击事件可以在怪物和npc的节点上添加事件监听

3.点击不能寻路的地方，现在是不会移动，可以改为跑到离这个点，最近的可移动的地方

修复了源代码项目用2.20以上的版本打开，角色动画不能播放的问题，并且添加了点击障碍点也可以行走到最靠近目标点最近的地方的功能

寻路算法添加了可以选择是否优化寻路路径的选项修改一下A*寻路脚本里的optimize属性，true为优化，会把路径里多余的路点清理掉，false为不优化，返回寻路的完整路径

4.大佬，地图图片太大了会不会加载慢？

很大的地图，最好先photoshop把大地图导出一张很小的地图，提前加载到游戏里，并且缩放大小和原始地图一样大小，这样就能作为马赛克地图。然后再用photoshop可以分片切割大图片成很多小图片（如每张256 * 256），玩家走到哪里就加载哪里的小图块，这样就不会影响加载速度了，就算是微信小游戏也能跑。以前网页游戏就是这种做法的

在线编辑器里新增了针对大地图的裁图工具，需要下载使用

5.笔刷

更新了功能，按住shitf拖动鼠标可以加大笔刷范围，按住鼠标“中键”或者“space + 鼠标左键”可以拖曳底图，

6.如果用tilemap那种像素风类型的,似乎不大适用

tilemap是以地砖的方式重复利用资源，优点节省资源大小，缺点画面太单一。我这种是传统的rpg地图原画，优点地图由美术原画自由发挥，画面比较精美。缺点是资源相对地砖地图大很多，不过可以通过切割地图，按视野分块加载地图片，效率不会受影响很多。如果tilemap需要做寻路，我的项目里自带的寻路系统是可以用的。

7.小地图寻路

游戏中点击显示缩略图（一般右上角显示小地图）需显示两点间虚线路线，并自动寻路过去(寻路过程中，缩略图虚线路线逐渐缩短且头像逐渐移动),请问楼主能否指点一下思路

缩略图可以自己用ps按比例缩小出一张小的地图，放在右上角，点击缩略图时，根据点击缩略图的位置按比例转化到场景地图的位置，并寻路到该位置，寻路会得到一条寻路路径，用绘图工具如graphic组件根据玩家行走的位置，再连接剩下没走完的路径，实时绘制就得到你要的结果了

8.请问大佬打开地图时读取本机文件并上传是如何做到的？有相关文档吗？

js配合html标签就可以做得到

五、其它优化

【Tiledmap】斜45度贴图利用率优化分享

slg系列（地图篇）3d透视无限地图完成……其他补充中..