绘制2D分层地图javascript

即时建立一个2d RPG游戏在JavaScript和使用画布，有点像browserquest。绘制2D分层地图javascript

我知道如何绘制一个简单的二维数组来显示一个单层瓷砖地图到画布。

但是为了在玩家四处移动时获得更好的效果，我希望能够在Tiled中创建分层的贴图贴图。我正想着这些层：

背景层举行地面信息和草地，岩石等

播放器/对象层保持玩家为哪里对象信息。

碰撞层保存位用户将和不会碰撞的位。

前景图层保存瓷砖，玩家可以在后面移动，即。树顶和屋顶等。

听起来不错？

我的问题：

我怎么会加载从瓷砖的地图编辑器保存为JSON的地图数据？然后，如何使用此信息将其显示在画布上？

另外我如何检查我的播放器级别的图层上的细节？例如，我将如何检查碰撞，当他们在不同的层？

预先感谢任何帮助

汤姆

编辑：我已经使用创造了一个JSON tilemap的瓷砖：

{ "height":15, 
"layers":[ 
    { 
    "data":[79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 12, 13, 13, 13, 13, 111, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 29, 29, 29, 29, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 128, 45, 45, 45, 45, 46, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 12, 13, 13, 13, 13, 13, 111, 29, 112, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 79, 28, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 79, 28, 29, 128, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79], 
    "height":15, 
    "name":"background", 
    "opacity":1, 
    "type":"tilelayer", 
    "visible":true, 
    "width":20, 
    "x":0, 
    "y":0 
    }, 
    { 
    "data":[0, 0, 0, 0, 0, 149, 150, 151, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 166, 167, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 181, 182, 183, 0, 0, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 222, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 237, 0, 0, 0, 245, 246, 247, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 222, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 149, 150, 151, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 166, 167, 0, 0, 0, 152, 0, 237, 0, 0, 0, 0, 0, 0, 245, 246, 247, 0, 168, 181, 182, 183], 
    "height":15, 
    "name":"background_objects", 
    "opacity":1, 
    "type":"tilelayer", 
    "visible":true, 
    "width":20, 
    "x":0, 
    "y":0 
    }, 
    { 
    "height":15, 
    "name":"collisions", 
    "objects":[ 
      { 
      "height":32, 
      "name":"", 
      "properties": 
       { 

       }, 
      "type":"", 
      "visible":true, 
      "width":100, 
      "x":-3, 
      "y":192 
      }, 
      { 
      "height":31, 
      "name":"", 
      "properties": 
       { 

       }, 
      "type":"", 
      "visible":true, 
      "width":32, 
      "x":159, 
      "y":448 
      }, 
      { 
      "height":30, 
      "name":"", 
      "properties": 
       { 

       }, 
      "type":"", 
      "visible":true, 
      "width":94, 
      "x":385, 
      "y":448 
      }, 
      { 
      "height":31, 
      "name":"", 
      "properties": 
       { 

       }, 
      "type":"", 
      "visible":true, 
      "width":33, 
      "x":511, 
      "y":160 
      }, 
      { 
      "height":27, 
      "name":"", 
      "properties": 
       { 

       }, 
      "type":"", 
      "visible":true, 
      "width":32, 
      "x":320, 
      "y":258 
      }, 
      { 
      "height":30, 
      "name":"", 
      "properties": 
       { 

       }, 
      "type":"", 
      "visible":true, 
      "width":31, 
      "x":128, 
      "y":97 
      }], 
    "opacity":1, 
    "type":"objectgroup", 
    "visible":true, 
    "width":20, 
    "x":0, 
    "y":0 
    }, 
    { 
    "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 197, 198, 199, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213, 214, 215, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 221, 0, 0, 0, 229, 230, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 197, 198, 199, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213, 214, 215, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 221, 0, 0, 0, 0, 0, 0, 229, 230, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
    "height":15, 
    "name":"foreground", 
    "opacity":1, 
    "type":"tilelayer", 
    "visible":true, 
    "width":20, 
    "x":0, 
    "y":0 
    }], 
"orientation":"orthogonal", 
"properties": 
{ 

}, 
"tileheight":32, 
"tilesets":[ 
    { 
    "firstgid":1, 
    "image":"..\/..\/..\/..\/..\/..\/..\/xampp\/htdocs\/DIS\/images\/mountain_landscape_23.png", 
    "imageheight":512, 
    "imagewidth":512, 
    "margin":0, 
    "name":"level_1", 
    "properties": 
     { 

     }, 
    "spacing":0, 
    "tileheight":32, 
    "tilewidth":32 
    }], 
"tilewidth":32, 
"version":1, 
"width":20 
}

来源

2013-03-24 Tom Burman

任何人都可以帮忙吗？谢谢 – 2013-03-25 17:14:58