时间戳

首页 > 解决方案 > Phaser：如何使用 json 文件显示另一张地图？

javascript - Phaser：如何使用 json 文件显示另一张地图？

问题描述

语境

我在Phaser（这是一个用于游戏开发的 Javascript 框架）下工作，我遵循了这个教程。所有代码都能完美运行。但是为了制作地图，教程使用了一个包含部分.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.

这些信是关于什么的？是一种我迄今为止从未听说过的特殊格式吗？

我怎样才能知道哪些字母对应哪些瓷砖？

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

标签： javascriptjsonphaser-frameworkgame-developmenttiled

解决方案

该地图是使用Tiled制作的，它允许您使用一组瓷砖（又名精灵）制作平铺地图。以 json 格式导出它可以让您轻松地将其导入游戏引擎，在本例中为 Phaser。

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

这是关于如何使用 Tiled 创建地图的介绍性教程。请务必将其保存为 json 而不是 .tmx，以便您可以将其导入 Phaser。

推荐阅读