javascript - 移相器 : how to display another map using the json file?

Question

上下文

我在 Phaser 下工作(这是一个用于游戏开发的 Javascript 框架)，我遵循了 this教程。所有代码都完美运行。但为了制作 map ，教程使用 .json 文件，其中包含 data 部分以显示 map 。

<小时/>

问题

我想更改 map 并显示我自己的 map 。这是显示 map 的 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
}

我知道用于显示 map 的部分是layers.data。

这些字母到底是什么意思？是一种我迄今为止从未听说过的特殊格式吗？

我怎样才能知道哪些字母对应哪些图 block ？

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

Answer 1

该 map 是使用 Tiled 制作的它允许您使用一组图 block (又名 Sprite )制作平铺 map 。以 json 格式导出可以让您轻松地将其导入到游戏引擎中，在本例中为 Phaser。

手动完成这些可能会很麻烦，因此像 Tiles 这样的图 block map 编辑器可以帮助您加速 map 开发。您还可以以编程方式创建和放置每个图 block ，但这取决于您的目标游戏类型。

here's关于如何使用 Tiled 创建 map 的入门教程。请务必将其保存为 json 而不是 .tmx，以便您可以将其导入到 Phaser 中。