1

我用 javascript 构建一个 2d rpg 游戏并使用画布，有点像 browserquest。

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

但是为了在玩家四处移动等时获得更好的效果，我希望能够在 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
 }
4

2 回答 2

1

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

http://www.melonjs.org/

于 2013-03-24T17:51:45.490 回答
1

@Chris Nash 感谢您的建议！

我找到了一个关于使用来自 tiled 的 JSON 加载分层 tilemaps 的教程，我想我将遵循该教程。

如果有人使用 Json 加载器用于平铺地图编辑器

于 2013-03-27T17:09:44.963 回答