绘制二维分层地图javascript答案

【问题标题】：Draw 2d layered map javascript绘制二维分层地图javascript
【发布时间】：2013-03-24 17:37:03
【问题描述】：

我用javascript和canvas构建了一个2d rpg游戏，有点像browserquest。

我知道如何绘制一个简单的二维数组以在画布上显示单层平铺地图。

但是为了在玩家四处移动等时获得更好的效果，我希望能够在 Tiled 中创建分层瓦片地图。我在考虑这些层：

用于保存地面信息和草、岩石等的背景层

玩家/对象层保存玩家所在位置和对象所在位置的信息。

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

前景层用于保存玩家可以移动到后面的瓷砖，即。树顶、屋顶等。

这听起来好吗？

我的问题：

如何从平铺地图编辑器加载保存为 JSON 的地图数据？然后我如何使用这些信息在画布上显示它？

另外，我如何从我的玩家级别检查图层的详细信息？例如，当它们位于不同的层时，我将如何检查碰撞？

提前感谢您的帮助

汤姆

编辑：我使用 TILED 创建了一个 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
 }

【问题讨论】：

谁能帮忙？谢谢

标签： javascript 2d layer tiles

【解决方案1】：

javascript框架“Melon JS”可以导入Tiled TMX地图。最好使用类似的东西（而不是重新发明轮子）。这是一个链接：

http://www.melonjs.org/

【讨论】：

我实际上是在构建自己的引擎，因此我想要这些信息，谢谢
您仍然可以使用 Melon JS 将 TMX 文件加载到对象模型中，但使用您自己的引擎进行渲染。我快速浏览了 TMX 文件，发现它们相当复杂，因此提出了这个建议。

【解决方案2】：

@Chris Nash 感谢您的建议！

我找到了一个使用 tiled 中的 JSON 加载分层瓦片地图的教程，我想我会遵循这个教程。

如果有人 wJson loader for tiled map editor

【讨论】：