探索小游戏（一）：地图编辑

制作一个探险小游戏，首先根据配置数据生成一张地图，可以用瓦片地图编辑器。这里通过代码来生成地图。

地图的json数据：

{"map":"0,0,0,0,0,0#1,0,0,5,0,0#0,0,2,4,0,0#0,0,0,0,4,0#0,0,0,6,4,0#0,3,3,3,3,4"}

瓦片的json数据：

{"0":"dipi","1":"liaowang","2":"xianjing","3":"zhangai","4":"zhangai_1","5":"zhangai_2","6":"baoxiang"}

每一个数字对应一张图片，地图的坐标以左上角为原点。

代码：

local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:ctor()
    local mapDataStr = cc.FileUtils:getInstance():getStringFromFile('res/MapData.json')
    local mapData = json.decode(mapDataStr)

    local mapStr = mapData['map']
    local mapInfo = self.split(mapStr,'#')

    local mapLayer = require('app/views/MapEditor').new(mapInfo)
    self:addChild(mapLayer)

    local winSize = cc.Director:getInstance():getWinSize()
    mapLayer:setPosition(winSize.width/2-mapLayer:getMapWidth()/2,winSize.height/2-mapLayer:getMapHeight()/2)
end

function MainScene.split(str,reps)
    local resultStrList = {}
    string.gsub(str,'[^'..reps..']+',function (w)
        table.insert(resultStrList,w)
    end)
    return resultStrList
end

return MainScene

地图编辑类：

local MapEditor = class('MapEditor',function () 
    return cc.Layer:create() 
end)

function MapEditor:ctor(mapInfo)
    -- 行数
    self.R = #mapInfo

    local tileDataStr = cc.FileUtils:getInstance():getStringFromFile('res/TileData.json')
    local tileData = json.decode(tileDataStr)

    for i=1,#mapInfo do
        local c = self.split(mapInfo[i],',')
        for j=1,#c do
            local img = tileData[c[j]]
            local tile = require('app/views/TileNode').new(c[j],img)

            if i==1 and j==1 then
                -- 列数
                self.C = #c
                self:setMapWidth(tile:getNodeSize().width * #c)
                self:setMapHeight(tile:getNodeSize().height * #mapInfo)
            end

            self:addChild(tile)

            local _x = (j*2-1) * (tile:getNodeSize().width/2)
            local _y = (#mapInfo-i) * (tile:getNodeSize().height)

            tile:setPosition(_x,_y)
            tile:setMyTag(i,j)
        end
    end
end

function MapEditor.split(str,reps)
    local resultStrList = {}
    string.gsub(str,'[^'..reps..']+',function (w)
        table.insert(resultStrList,w)
    end)
    return resultStrList
end

function MapEditor:setMapWidth(_w)
    self.mapWidth = _w
end

function MapEditor:setMapHeight(_h)
    self.mapHeight = _h 
end

function MapEditor:getMapWidth()
    return self.mapWidth
end

function MapEditor:getMapHeight()
    return self.mapHeight
end

return MapEditor

瓦片节点类：

local TileNode = class('TileNode',function ()
    return cc.Node:create()
end)

function TileNode:ctor(id,img)
    local sp = cc.Sprite:create('res/dipi.png')

    if id ~= 0 then
        local sp1 = cc.Sprite:create('res/'..img..'.png')
        sp:addChild(sp1,2)
        sp1:setPosition(sp:getContentSize().width/2,sp:getContentSize().height/2)
    end

    sp:setAnchorPoint(0.5,0)
    self:addChild(sp)
    self:setNodeSize(sp:getContentSize())
end

function TileNode:setNodeSize(_size)
    self.nodeSize = _size
end

function TileNode:getNodeSize()
    return self.nodeSize
end

function TileNode:setMyTag(_x,_y)
    self.x = _x
    self.y = _y 
end

function TileNode:getMyTag()
    return self.x , self.y
end

return TileNode

生成的地图：