Cocos Creator之瓦片地图

---

一、Tiled Map 的制作

首先下载Tiled，然后新建一张地图，在这里你可以设置地图的块数，每个块的大小。

新地图.png

然后鼠标右键，可以建立新的图层，添加新的块(barrier,bg)，添加对象图层等操作

添加块.png

最后可以保存地图为tmx格式.

---

二、在Cocos Creator中使用制作的tmx格式的Tiled Map

1. 添加组件，选择TiledMap，然后将生成的地图资源拖入Tmx asset。可以查看官方文档TileMap
   
   

   TiledMap.png

2、创建js脚本然后在脚本中获取指定内容

        //获取指定名称的图层
        var layer = this.tileMap.getLayer('图层名');

        //获取左上角瓦片坐标为（x,y）的图块的像素坐标
        var pos = layer.getPositionAt(x,y);

        //获得当前该图块的id,注意:这里的id是从1开始的,与TiledMap Editor中显示的不同,如果返回值为0,则为空）
        var gid = layer.getTileGIDAt(0,0);

//将像素坐标转化为瓦片坐标
        getTilePos: function (posInPixel) {
            var mapSize = this.map.node.getContentSize();
            var tileSize = this.map.getTileSize();
            var x = Math.floor(posInPixel.x / tileSize.width);
            var y = Math.floor((mapSize.height - posInPixel.y) / tileSize.height);
            return cc.p(x, y);
        },

编写障碍物思路和注意事项

思路
1.用Tiled编辑器创建障碍物图层。
2.控制角色移动时候判断移动瓦块坐标的gid是否为0，不为0表示有障碍物。
注意事项
1.物体的位置位移都基于像素坐标，一定注意转换关系。
2.tmx文件保存的图块是映射关系，所以图块文件和地图文件始终要放在一起。