（可能又是版本缘故导致产生挺多问题，cocos引擎用的3.8）
分层绘制
绘制地图的时候，由于资源功能和诉求不一样，所以可能会需要切不同大小的素材，比如小点的地板，大点的树，大点的建筑等，可以分层去绘制（注意前面说的，每个层只能用一个图块集，不然渲染会出问题）
分成绘制导致的问题：
-
1.编辑器里显示正常，但是游戏里有偏差，据测试偏差产生的原因是由于图片的绘制偏移导致的。
image.png
解决办法：代码里手动调整了层的位置，只有x就是图片的偏移量，y是偏移量的相反数（负的）
（这样处理后，点击判断也会正常，不然那边也有偏移）
self.BuildLayer:setPositionX(-190)
self.BuildLayer2:setPositionX(-190)
self.GroundLayer:setPositionX(-52)
self.GroundLayer:setPositionY(-28)
tilemap:getLayer("GroundFront"):setPositionX(-60)
tilemap:getLayer("GroundFront"):setPositionY(10)
- 图片层：编辑器里正常，游戏里不正常，会受图块裁剪的影响，显示的很怪，建议代码自己加背景图吧
- 地板层的思考：如果图块情况复杂，可以考虑用透明地板+背景图片的模式来实现。（为什么还要地板？地板得画路，判断路能不能走，这个地方是不是建筑.....顿悟，这不是就是个逻辑层吗，为什么能叫地板呢......）
- 4.把地板层变成逻辑层（思考ing）:
-
透明的地块：通过类型来控制功能
地块类型
- 类型设置：目前用到了以下类型：Road(普通的路) ，Bd+num(如Bd1，Bd2...)可以表示不同类型的建筑，
组合地块{Four_Bd1_down，Four_Bd1_up，Four_Bd1，Four_Bd1}四个的组合建筑，同理设置了7或9的组合建筑{Seven_center，Seven}，Bd1_Road （能穿过的建筑），两个的组合加能传过的建筑{Two_Bd1Road_down ，Two_Bd1Road_up} 。。。（只有你做不到，没有策划想不到...T_T...） - 类型处理 （原谅我用js了，因为要导出建筑数据给服务端，所以就放一起实现了，然后客户端也存了个配置）
没有什么技巧，纯用if找有没有关联点，根据地图的类型找的方向会不一样
当然如果不需要组合地块，这个部分可以忽略
-
function checkClickType( tilePos ){
let tiles = new Array()
let centerPos =tilePos
let center
let fourCenter
let TwoUp
let type
let clickType = getTileGIDAt(tilePos)
if (clickType) {
let specl = SpecailTile(clickType)
if (specl== "stone") {
} else if (specl.indexOf("Seven")>=0){
if (specl.indexOf("center")>=0){
center = tilePos
} else {
for(let i=-1;i<=1;i++) {
let x = tilePos.x+i
let y = tilePos.y
if( x>-1 && y>-1 && x<TileCol && y<TileRow) {
let tileP = {"x":x,"y":y}
let tmpType = getTileGIDAt(tileP)
if (SpecailTile(tmpType).indexOf("center")>=0) {
center = tileP
break
}
}
}
if(!center){
for(let j=-1;j<=1;j++) {
let ad = tilePos.y%2==1 ? 1 :-1
let x = tilePos.x+ad
let y = tilePos.y+j
if( x>-1 && y>-1 && x<TileCol && y<TileRow) {
let tileP = {"x":x,"y":y}
let tmpType = getTileGIDAt(tileP)
if (SpecailTile(tmpType).indexOf("center")>=0) {
center = tileP
break
}
}
}
}
if(!center){
for (j=-2;j<=2;j++) {
let x = tilePos.x
let y = tilePos.y+j
if( x>-1 && y>-1 && x<TileCol && y<TileRow) {
let tileP = {"x":x,"y":y}
let tmpType = getTileGIDAt(tileP)
if (SpecailTile(tmpType).indexOf("center")>=0) {
center = tileP
break
}
}
}
}
}
} else if (specl.indexOf("Four")>=0){
let tStr = specl.lastIndexOf('_');
let typeName = specl
if(tStr>4){
typeName = specl.substring(0,tStr)
}
let upType = typeName+"_up"
let downType = typeName+"_down"
if (specl== typeName) {
let addX= tilePos.y%2
let y= tilePos.y+1
for (let i=0;i<=1;i++) {
let x = tilePos.x-1+addX+i
if (x>-1 && y>-1 && x<TileCol && y<TileRow) {
let tileP = {"x":x,"y":y}
let tmpType = getTileGIDAt(tileP)
if (tmpType && SpecailTile(tmpType)==downType) {
let tmpType2 = getTileGIDAt({"x":tmpType.x,"y":tmpType.y-2})
if (tmpType2 && SpecailTile(tmpType2)==upType) {
fourCenter = tileP
}
break
}
}
}
} else if (specl== downType) {
let tmpType = getTileGIDAt({"x":tilePos.x,"y":tilePos.y-2})
if (tmpType && SpecailTile(tmpType)==upType) {
fourCenter = tilePos
}
} else if (specl== upType) {
let tmpType = getTileGIDAt({"x":tilePos.x,"y":tilePos.y+2})
if (tmpType && SpecailTile(tmpType)==downType) {
fourCenter = {"x":tilePos.x,"y":tilePos.y+2}
}
}
}else if (specl.indexOf("Two")>=0){
let tStr = specl.lastIndexOf('_');
let typeName = specl
if(tStr>4){
typeName = specl.substring(0,tStr)
}
let upType = typeName+"_up"
let downType = typeName+"_down"
if (specl== downType) {
let tmpType = getTileGIDAt({"x":tilePos.x,"y":tilePos.y-2})
if (tmpType && SpecailTile(tmpType)==upType) {
TwoUp = tilePos
}
} else if (specl== upType) {
let tmpType = getTileGIDAt({"x":tilePos.x,"y":tilePos.y+2})
if (tmpType && SpecailTile(tmpType)==downType) {
TwoUp = {"x":tilePos.x,"y":tilePos.y+2}
}
}
}
if (center!= undefined) {
centerPos = center
tiles = getNeighbors(center)
tiles.push({"x":center.x,"y":center.y})
} else if (fourCenter) {
centerPos = {"x":fourCenter.x,"y":fourCenter.y-2}
if (fourCenter.y%2 ==1) {
tiles.push({"x":fourCenter.x,"y":fourCenter.y-1})
tiles.push({"x":fourCenter.x+1,"y":fourCenter.y-1})
}else{
tiles.push({"x":fourCenter.x,"y":fourCenter.y-1})
tiles.push({"x":fourCenter.x-1,"y":fourCenter.y-1})
}
tiles.push({"x":fourCenter.x,"y":fourCenter.y-2})
tiles.push({"x":fourCenter.x,"y":fourCenter.y})
} else if (TwoUp) {
centerPos = {"x":TwoUp.x,"y":TwoUp.y-2}
tiles.push({"x":TwoUp.x,"y":TwoUp.y-2})
tiles.push({"x":TwoUp.x,"y":TwoUp.y})
}else{
tiles.push(tilePos)
}
type = SpecailTile(getTileGIDAt(centerPos))
if (type == undefined){
type= 2 //战场
}else{
for (const key in typeRedefine) {
if(type.indexOf(key)>=0){
type=typeRedefine[key]
break
}
}
}
}
return {tiles,type,centerPos}
}
-5.添加sprite到层
问题又来了，添加的时候会报错，同一个层必须用同样的纹理来绘制sprite，如果你自己外面画个小人想加进去，就抱歉了。
解决办法：
--动画层 动态变化层
local nd = cc.Node:create()
nd:setLocalZOrder(1)
tilemap:addChild(nd)
机智的我加了个node在tilemap上，同时可以设置它的zorder 决定了它能插在哪些层中间，比如我写1 ，就插在了1和2中间
image.png
网友评论