Phaser框架中无法显示简单图片的问题求助

我在项目中使用Phaser框架，跟着官方教程操作时遇到问题：编写的create函数本应显示提前导入的sky图片，但运行后屏幕仍是空白。

以下是我的代码：

配置代码 #

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('sky', 'assets/sky.png');
  this.load.image('ground', 'assets/platform.png');
  this.load.image('star', 'assets/star.png');
  this.load.image('bomb', 'assets/bomb.png');
  this.load.spritesheet('dude', 'assets/dude.png', {
    frameWidth: 32,
    frameHeight: 48,
  });
}

// 显示资源
function create() {
  this.add.image(400, 300, 'sky');
}

// 更新循环
function update() {}

排查方向及解决方法 #

• 核对资源路径
  确认assets/sky.png的路径和项目文件结构匹配。比如HTML文件在根目录的话，assets文件夹必须和HTML同级；若HTML在子目录，路径需对应调整。打开浏览器开发者工具的网络面板，查看sky.png的请求状态，若显示404则说明路径错误。

• 匹配Phaser版本
  不同版本的Phaser存在API细节差异，确保你使用的版本和教程一致。比如教程用Phaser 3.x，就不要引入2.x版本的脚本。

• 检查画布渲染状态
  打开浏览器开发者工具的元素面板，查看Phaser生成的canvas元素是否存在，宽高是否为设置的800x600。若canvas未生成，可尝试将type: Phaser.AUTO改为Phaser.CANVAS或Phaser.WEBGL测试渲染模式。

• 验证资源加载完成
  在preload函数末尾添加加载完成回调，确认资源是否成功加载：

  function preload() {
    this.load.image('sky', 'assets/sky.png');
    // 其他资源加载代码...
    this.load.on('complete', function() {
      console.log('所有资源加载完成');
    }, this);
  }
  

  打开控制台查看是否有该输出，若无则说明加载过程中出现异常。

• 替换测试图片
  换一张确定可用的小图片替换sky.png，排除图片本身损坏或格式不兼容的问题。

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