Phaser无法加载多图层：仅渲染地面tiles，平台不显示求助

核心问题分析 #

1. 仅渲染了Ground图层，平台所在的Platform、MossPlatform、BigMossPlatform图层未被创建。
2. 缺失部分tileset资源的加载与关联，比如jungle-platform、large-platform对应的图片未在代码中加载。

修复步骤 #

1. 补充缺失的资源加载

在preload函数中添加未加载的平台图片：

function preload ()
{
   this.load.image('sky', require('../assets/sky.png'));
   this.load.image('jungle', require('../assets/jungle.png'));

   this.load.image('ground', require('../assets/tiles/ground-transp.png'));
   this.load.image('small-platform', require('../assets/tiles/small-platform-removebg-preview.png'));
   // 补充缺失的平台资源加载
   this.load.image('jungle-platform', require('../assets/tiles/jungle-platform.png'));
   this.load.image('large-platform', require('../assets/tiles/large-platform-removebg-preview.png'));
   
   this.load.tilemapTiledJSON('Ground', require('../assets/tutorial-level.json'));
}

2. 创建所有需要的图层并关联tileset

修改create函数，为每个图层执行创建操作，并关联对应的tileset：

function create () {
   this.bg = this.add.image(windowWidth / 2, widnowHeight / 2, 'sky');
   this.bg = this.add.image(windowWidth / 2, widnowHeight / 2, 'jungle');
   this.bg.setDisplaySize(windowWidth, widnowHeight);

   const map = this.make.tilemap({ key: 'Ground' });

   // 关联所有tileset，名称必须与Tiled JSON中的tileset.name完全匹配
   const groundTileset = map.addTilesetImage('ground', 'ground');
   const junglePlatformTileset = map.addTilesetImage('jungle-platform', 'jungle-platform');
   const smallPlatformTileset = map.addTilesetImage('small-platform', 'small-platform');
   const largePlatformTileset = map.addTilesetImage('large-platform', 'large-platform');

   // 创建每个图层，图层名称与Tiled JSON中的layer.name一致
   map.createStaticLayer('Ground', groundTileset);
   map.createStaticLayer('Platform', junglePlatformTileset);
   map.createStaticLayer('MossPlatform', smallPlatformTileset);
   // BigMossPlatform层同时使用了small-platform和large-platform，需传入数组
   map.createStaticLayer('BigMossPlatform', [smallPlatformTileset, largePlatformTileset]);
}

关键注意事项 #

• 图层名称必须与Tiled导出的JSON中layers数组里的name字段完全一致，大小写敏感。
• 单个图层使用多个tileset时，需将对应的tileset对象放入数组传入createStaticLayer。
• tileset的第一个参数是Tiled中定义的tileset名称，第二个参数是preload时设置的图片key，两者需一一对应。

内容的提问来源于stack exchange，提问作者Jordan