前言

因为引擎对tiledmap支持的非常差劲,所以能不用tiledmap就不要用了

tiledmap的路径问题

我使用的是2.4.5-2.4.6版本的CCC 在此版本下手动更改tsx文件里的图片路径会让引擎报gid的错误
所以最好在编辑地图的时候,就把图片和地图的相对路径给配置好,这样导入到CCC里后不会出现找不到图片

加载tiledmap文件

编辑器中组件

tiledmap.png

tiledmap在CCC中为cc.TiledMap组件

代码加载tiledmap

加载的资源格式为cc.TiledMapAsset

    loadMap(mapname){
        return new Promise<cc.TiledMapAsset>((resolve,reject)=>{
            cc.resources.load<cc.TiledMapAsset>('tiledmap/'+mapname,cc.TiledMapAsset,(err,asset)=>{
                if (err){
                    reject('瓦片地图不存在:'+mapname);
                    return;
                }
                resolve(asset)
            })
        })
    }

分析tiledLayer

layer.png

在tiledmap里已经配置好了层级,简单拿board举例

        let triLayer = this.map.getLayer('Board');
        let layerSize: cc.Size = triLayer.getLayerSize();
        let tileSize = triLayer.getMapTileSize();
        let { width, height } = layerSize;
        let collArray = []
        //获取图层的gid
        for (let i = 0; i < height; i++) {
            for (let j = 0; j < width; j++) {
                let gid = triLayer.getTileGIDAt(j, i);
                if (gid > 0) {
                    let tilePos = triLayer.getPositionAt(j, i);
                    let pos = cc.v2(tilePos.x - width * tileSize.width / 2, tilePos.y - height * tileSize.height / 2);
                    let node = null;
                    switch(gid){
                        case 136:
                            node = cc.instantiate(this.yuanjiao[0]);
                            break;
                        case 137:
                            node = cc.instantiate(this.yuanjiao[1]);
                            break;
                        case 168:
                            node = cc.instantiate(this.yuanjiao[2]);
                            break;
                        case 169:
                            node = cc.instantiate(this.yuanjiao[3]);
                            break;
                        default:
                            node = new cc.Node();
                            node.width = tileSize.width;
                            node.height = tileSize.height;
                            let rigidbody = node.addComponent(cc.RigidBody);
                            rigidbody.type = cc.RigidBodyType.Static;
                            let collider = node.addComponent(cc.PhysicsBoxCollider);
                            collider.size = tileSize;
                    }
                    node.group = 'Board';
                    node.x = pos.x+node.width/2;
                    node.y = pos.y+node.height/2;
                    node.parent = triLayer.node;
                    collArray.push(node);
                }
            }
        }

gid

在tiledmap的图集资源中,每个图片对应着一个编号,但是注意,在用gid找寻图片资源时,记住gid要减去1
在tmx文件中,gid为0时,表示该网格内无图片,但是在图集中,图片的编号是以0开始

节点的层级

在cc.TiledLayer组件中,提供了addUserNode这个api
在2.4.6版本上,每创建一个网格大小的节点,挂载上刚体后,使用adduserNode都会额外增加drawCall 1点.
创建100个节点就增加100, 所以使用node.parent = triLayer.node
(如果是创建的碰撞体,请先设置好position,再将节点添加到父节点下)

手动清除瓦片地图某网格

                let gid = layer.getTileGIDAt(j, i);
                if (gid > 0) {
                    layer.setTileGIDAt(0,j,i);
                }

使用setTiledGIDAt api,将gid设置成0即可

CocosCreator 简单使用tiledmap