Phaser 未加载多层 tilemap

Question

我正在制作 Phaser 游戏。我正在尝试加载在 Tiled 中制作的具有 2 个不同图层的 Tilemap。第一层加载正确，而另一层未加载。我的代码看起来像这样：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload() {
    this.load.image("tiles", "assets/Tilesheet/tilesheet.png");
    this.load.image("background", "assets/Backgrounds/backgroundEmpty.png")
    this.load.tilemapTiledJSON("world", "assets/Maps/map.json");
}

function create() {
    var map = this.make.tilemap({key: "world"});
    var tileset = map.addTilesetImage("tiles", "tiles");
    var background = map.addTilesetImage("background", "background");
    var Layer1 = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);
    var Layer2 = map.createStaticLayer("Background Layer", background, 0, 0);
}

这是控制台中的结果：

这是平铺层：

我不明白我哪里出错了。谁能指出问题。

编辑：好的，所以我将 JSON 粘贴到此处：

{ "backgroundcolor":"#00cece",
 "compressionlevel":-1,
 "editorsettings":
    {
     "export":
        {
         "format":"json",
         "target":"map.json"
        }
    },
 "height":14,
 "infinite":false,
 "layers":[
        {
         "id":7,
         "image":"backgroundEmpty.png",
         "name":" Background Layer",
         "opacity":1,
         "type":"imagelayer",
         "visible":true,
         "x":0,
         "y":0
        }, 
        {
         "compression":"",
         "data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHQAAAB0AAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAQAAAABAAAAAAAAAAAAAAAEAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdAAAAHQAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAQAAAAEAAAABAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAEwAAABMAAAATAAAAEwAAABMAAAATAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAABMAAAATAAAAEwAAABMAAAATAAAAEwAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAEAAABMAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAATAAAAEwAAABMAAAATAAAAEwAAABMAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAEwAAABMAAAATAAAAEwAAABMAAAATAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAA=",
         "encoding":"base64",
         "height":14,
         "id":1,
         "name":"Tile Layer 1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":25,
         "x":0,
         "y":0
        }],
 "nextlayerid":8,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.4.2",
 "tileheight":64,
 "tilesets":[
        {
         "columns":14,
         "firstgid":1,
         "image":"..\/Tilesheet\/tilesheet.png",
         "imageheight":448,
         "imagewidth":896,
         "margin":0,
         "name":"tiles",
         "spacing":0,
         "tilecount":98,
         "tileheight":64,
         "tiles":[
                {
                 "id":0,
                 "objectgroup":
                    {
                     "draworder":"index",
                     "name":"",
                     "objects":[
                            {
                             "height":64,
                             "id":1,
                             "name":"",
                             "rotation":0,
                             "type":"",
                             "visible":true,
                             "width":64,
                             "x":0,
                             "y":0
                            }],
                     "opacity":1,
                     "type":"objectgroup",
                     "visible":true,
                     "x":0,
                     "y":0
                    }
                }, 
                {
                 "id":17,
                 "objectgroup":
                    {
                     "draworder":"index",
                     "name":"",
                     "objects":[
                            {
                             "height":64,
                             "id":1,
                             "name":"",
                             "rotation":0,
                             "type":"",
                             "visible":true,
                             "width":64,
                             "x":0,
                             "y":0
                            }],
                     "opacity":1,
                     "type":"objectgroup",
                     "visible":true,
                     "x":0,
                     "y":0
                    }
                }, 
                {
                 "id":42,
                 "objectgroup":
                    {
                     "draworder":"index",
                     "name":"",
                     "objects":[
                            {
                             "height":32,
                             "id":1,
                             "name":"",
                             "rotation":0,
                             "type":"",
                             "visible":true,
                             "width":64,
                             "x":0,
                             "y":0
                            }],
                     "opacity":1,
                     "type":"objectgroup",
                     "visible":true,
                     "x":0,
                     "y":0
                    }
                }],
         "tilewidth":64
        }],
 "tilewidth":64,
 "type":"map",
 "version":1.4,
 "width":25
}

Answer 1

您的图块集 json 中有一个额外的 space 作为背景层名称。在这一行："name":" Background Layer".

白色space 可能已包含在它希望创建图层的名称中。您可以删除 whitespace 并尝试。此外，根据 createStaticLayer Docs，您可以使用层的索引或名称。试试用索引看看是不是白space让这一层无效

 var Layer2 = map.createStaticLayer(1, background, 0, 0);

this post 上还有一个当前未被接受的答案，表明在创建初始层后您可能不需要剩余层的变量。我也建议探索该解决方案。

Phaser 未加载多层 tilemap

Phaser is not loading multiple layers of tilemap

javascript

phaser-framework