Phaser 3如何在Scene.preload执行前完成JSON文件加载

你原来的写法不生效是因为init生命周期中触发的加载任务不会阻塞后续preload生命周期的执行，所以preload运行时JSON还未加载完成，拿到的就是undefined。
下面两种实现方案都满足所有逻辑封装在场景内部的要求：

方案1：使用场景pack配置（推荐） #

Phaser官方提供了pack场景配置项，专门用来定义需要在preload生命周期之前完成加载的资源，正好适配你的需求。
代码示例：

var config = { 
  scene: { 
    preload: preload, 
    create: create,
    // pack内定义的资源会在preload前自动加载完成
    pack: {
      files: [
        { type: 'json', key: 'scenedata', url: 'scene.json' }
      ]
    }
  } 
}
var game = new Phaser.Game(config)

function preload () {
  // 进入preload时JSON已经加载完成，可以直接读取
  const sceneData = this.cache.json.get('scenedata')
  
  // 根据JSON内容批量预加载图片
  sceneData.imageList.forEach(imgItem => {
    this.load.image(imgItem.key, imgItem.path)
  })
}

function create () {
  // 此时JSON和所有图片资源都已加载完成，可直接使用
  console.log(this.cache.json.get('scenedata'))
}

方案2：preload阶段动态追加加载任务 #

如果不想用pack配置，也可以在preload阶段先加载JSON，监听加载完成事件后动态添加后续需要加载的图片资源，Phaser的preload阶段会自动等待队列内所有任务完成后才进入create生命周期。
代码示例：

var config = { scene: { preload: preload, create: create } }
var game = new Phaser.Game(config)

function preload () {
  // 第一步：加载场景配置JSON
  this.load.json('scenedata', 'scene.json')

  // 监听JSON加载完成事件
  this.load.once('filecomplete-json-scenedata', (key, type, sceneData) => {
    // 第二步：根据JSON内容追加需要预加载的图片
    sceneData.imageList.forEach(imgItem => {
      this.load.image(imgItem.key, imgItem.path)
    })
  })
}

function create () {
  // 所有资源都已加载完成
  console.log(this.cache.json.get('scenedata'))
}

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