Phaser:如何使用 json 文件显示另一张地图?

Phaser: how to display another map using the json file?

上下文

我在 Phaser (which is a Javascript Framework for game development) and I followed this totorial 下工作。所有代码都完美运行。但是为了制作地图,本教程使用 .json 文件,其中包含 data 部分以显示地图。


问题

我想更改地图并显示我自己的地图。这是显示地图的map.json

{ "backgroundcolor":"#000000",
 "height":10,
 "infinite":false,
 "layers":[
        {
         "data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAADwAAAA8AAAAPAAAADwAAAA8AAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAA",
         "encoding":"base64",
         "height":10,
         "name":"World",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":30,
         "x":0,
         "y":0
        }],
 "nextobjectid":31,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"2018.03.21",
 "tileheight":70,
 "tilesets":[
        {
         "columns":4,
         "firstgid":1,
         "image":"tiles.png",
         "imageheight":280,
         "imagewidth":280,
         "margin":0,
         "name":"tiles",
         "spacing":0,
         "tilecount":16,
         "tileheight":70,
         "tilewidth":70
        }, 
        {
         "columns":1,
         "firstgid":17,
         "image":"coinGold.png",
         "imageheight":70,
         "imagewidth":70,
         "margin":0,
         "name":"coin",
         "spacing":0,
         "tilecount":1,
         "tileheight":70,
         "tilewidth":70
        }],
 "tilewidth":70,
 "type":"map",
 "version":1.2,
 "width":30
}

我知道为了显示地图使用的部分是layers.data

这些字母是什么意思?是一种我从来没有听说过的特殊格式吗?

我怎么知道哪些字母对应哪些方块?

如果您需要更多信息或有任何疑问,请告诉我,谢谢!

该地图是使用 Tiled 制作的,它允许您使用一组图块(又名精灵)制作图块地图。在 json 中导出它可以让您轻松地将其导入游戏引擎,在本例中为 Phaser。

手动执行这些操作可能很麻烦,因此像 Tiles 这样的地图编辑器可以帮助您加速地图开发。您还可以通过编程方式创建和放置每个图块,但这取决于您所针对的游戏类型。

here's 介绍如何使用 Tiled 创建地图的入门教程。请务必将其保存为 json 而不是 .tmx,以便您可以将其导入 Phaser。