瓦片地图注意事项

瓦片地图（Tiled Map）系列文章：

• 斜45度瓦片地图（Staggered Tiled Map）里的简单数学

• 瓦片地图注意事项

承接上一篇文章，再来聊聊一些coding方面的tips：

TileMapAtlas、FastTMX和TMXTiledMap的选择

我们看到cocos2d-x提供了三个和TiledMap相关的类：TileMapAtlas、FastTMX和TMXTiledMap，那么应该采用哪个类呢？

• 首先，TileMapAtlas官方不建议使用。

• 剩下的两个C++类FastTMX和TMXTiledMap，分别绑定到lua的ccexp.TMXTiledMap和cc.TMXTiledMap。采用FastTMX的GL verts（顶点数）较少，可惜暂时不支持staggered类型。所以，staggered类型的Tiled Map只能用TMXTiledMap，其它类型的Tiled Map建议采用FastTMX。

-- NOTE: FastTMX doesn't support staggered tmx
-- ccexp.TMXTiledMap is faster, but the grid will not be displayed normally
local map = cc.TMXTiledMap:create("xxx.tmx")

如何判断tile坐标超出地图区域

FastTMX和TMXTiledMap提供了一个方法getMapSize()，需要注意的是这个函数和cocos2d-x其他getXXXSize的函数不同，返回的大小不是以像素值为单位，而是2D地图在两个维度的tile数目。

local function isTileInMap(map, tileCoord)
    -- NOTE: mapSize is measured in tile number
    local mapSize = map:getMapSize()

    return (tileCoord.x >= 0)
    and (tileCoord.x < mapSize.width)
    and (tileCoord.y >= 0)
    and (tileCoord.y < mapSize.height)
end

如何获取tile的标记

上一篇文章提到，对于不能放置在地图上禁止被编辑的区域，可以在相应的Tile做上标记。例如，我在Tiled Map里创建了一个叫"meta"的图层：

在TileSet Properties里设置一个标记"Collidable"，表示禁止被编辑：

接下来就是用这个TileSet来刷图啦！

那么我们如何在代码中获取这个标记呢？FastTMX和TMXTiledMap提供了一个方法getPropertiesForGID(GID)来获取GID所对应的tile的属性。

那么新的问题又来了，GID这个索引又如何获取呢？还有另一个函数getTileGIDAt()，传入的参数就是上次所讲的tile坐标啦！

现在你应该明白之前本渣为何要在那套坐标系下解决判断区域相交的问题了吧？

local function isValidTile(map, tileCoord)
    local metaLayer = map:getLayer("meta")
    local flags = 0
    local GID, flags = metaLayer:getTileGIDAt(tileCoord, flags)
    if not GID or GID <= 0 then
        return true
    end

    local property = map:getPropertiesForGID(GID)
    if property and property["Collidable"] then
        return false
    else
        return true
    end
end

关于tile的坐标

上回提到Staggered Tiled Map的坐标系，其实这套坐标还和你的配置有关。本渣采用的配置是：

如果改变上述参数，那么你所得到的坐标也会不同，你不妨多试试啦～

另外，即使上述参数不变，但如果你需要由某一点的坐标求出它所在tile的坐标的话，还需要注意Tiled Map的Y轴tile数目（之所以是Y轴，是因为上面Staggered Axis设置为Y）的奇偶性。这里也不解释了，直接上图最直观：

'Y轴有奇数个tile（图中是五个），这里tile个数是这么算的：从最底端的tile沿斜线算与它有一条公共边的tile、一直算到最顶端的tile，例如从坐标(0, 4)(0, 3)(1, 2)(1, 1)到没有显示的(2, 0)'

Y轴有偶数个tile（图中是六个）

更多Tiled Map Properties配置

Tile Layer Format最好选择压缩的格式，这样生成的tmx文件比较小。

关于遮挡关系的排序函数

上一篇文章还提到建筑及装饰物之间的遮挡关系处理，本渣制定了一套规则来对建筑及装饰物做排序。需要注意的是，lua的table.sort要求排序函数是stable的，所以最好给每个要被比较的对象（这里就是建筑或装饰物）一个独一无二的id，对于两者“相等”这种情况就定义为比较id大小即可。

以下给出示例的伪代码，其中building就是被封装过的建筑或装饰物对象：

local function getLineOfBuildingRegion(building)
    return {
        left = building:getRegionLeftPos(),
        right = building:getRegionRightPos(),
    }
end

local function getDistX(line)
    return line.right.x - line.left.x
end

local function getLowerPoint(line)
    if line.left.y < line.right.y then
        return line.left
    else
        return line.right
    end
end

local function getHigherPoint(line)
    if line.left.y > line.right.y then
        return line.left
    else
        return line.right
    end
end

local function isPointEqual(posA, posB)
    return posA.x == posB.x and posA.y == posB.y
end

local function isLineEqual(lineA, lineB)
    return isPointEqual(lineA.left, lineB.left) and isPointEqual(lineA.right, lineB.right)
end

local function getSlope(line)
    return (line.right.y - line.left.y) / (line.right.x - line.left.x)
end

local function isLineParallel(lineA, lineB)
    return getSlope(lineA) == getSlope(lineB)
end

local function isLowerThanLine(point, line)
    local y = getSlope(line) * (point.x - line.left.x) + line.left.y
    if point.y == y then
        return y > getLowerPoint(line).y
    else
        return point.y < y
    end
end

local function updateBuildingsZOrder(buildings)
    table.sort(buildings, function(a, b)
        if not isValidBuilding(a) then
            return false
        elseif not isValidBuilding(b) then
            return true
        end

        local lineA = getLineOfBuildingRegion(a)
        local lineB = getLineOfBuildingRegion(b)

        if getDistX(lineA) > getDistX(lineB) then
            return isLowerThanLine(getLowerPoint(lineB), lineA)
        elseif getDistX(lineA) == getDistX(lineB) then
            if isLineEqual(lineA, lineB) then
                return a.id < b.id
            elseif isLineParallel(lineA, lineB) then
                if getLowerPoint(lineA).y == getLowerPoint(lineB).y then
                    return a.id < b.id
                else
                    return getLowerPoint(lineA).y > getLowerPoint(lineB).y
                end
            else
                if getLowerPoint(lineA).y > getLowerPoint(lineB).y then
                    return isLowerThanLine(getLowerPoint(lineB), lineA)
                elseif getLowerPoint(lineA).y == getLowerPoint(lineB).y then
                    if getHigherPoint(lineA).y > getHigherPoint(lineB).y then
                        return isLowerThanLine(getLowerPoint(lineB), lineA)
                    elseif getHigherPoint(lineA).y == getHigherPoint(lineB).y then
                        return a.id < b.id
                    else
                        return not isLowerThanLine(getLowerPoint(lineA), lineB)
                    end
                else
                    return not isLowerThanLine(getLowerPoint(lineA), lineB)
                end
            end
        else
            return not isLowerThanLine(getLowerPoint(lineA), lineB)
        end
    end)

    for i, building in ipairs(buildings) do
        building:setLocalZOrder(i)
    end
end