繪製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