前言
因为引擎对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即可
