无法在 Phaser 中显示简单图像答案

【问题标题】：Unable to display a simple image in Phaser无法在 Phaser 中显示简单图像
【发布时间】：2022-10-13 00:55:45
【问题描述】：

所以我想将 Phaser 用于我正在尝试制作的项目。我正在按照他们网站上的教程进行操作，但后来我碰壁了。在我写的其中一行中，它是这样说的：

function create() {
  this.add.image(400, 300, 'sky');
}

我读了这篇文章，它应该显示一张天空的图片（我事先导入到我的项目中），但它仍然是一个空白屏幕。

到目前为止，我尝试了很多东西，但仍然无法正常工作。有人可以帮忙吗？

这是所有相关的配置：

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

和代码：

var game = new Phaser.Game(config);

//Loads in sprites
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,
  });
}

//Displays sprites
function create() {
  this.add.image(400, 300, 'sky');
}

//Update loop
function update() {}

【问题讨论】：

我感觉您没有共享所有相关代码。我要猜测一下……您没有加载图像，因此什么也看不到。
我实际上已经加载了图像。如前所述，屏幕上没有任何内容
显示所有相关代码。当我说负载时，我并不是说像你说的那样进口。
是的，我知道，现在所有代码都在帖子中
请提出一个好的问题标题。

标签： javascript html game-development phaser-framework

【解决方案1】：

检查网址在您的代码中，使用当前文件夹结构在playcode.io。试图在 playcode 上运行代码，它似乎有效：
（至少当你发布网站。 webpreview 冻结/崩溃，我必须假设这是codeplay.io 与移相器框架一起出现的问题）

编辑：

结果：

link to the working demo

更新（如果你需要预览）：

由于playcode.io 上的预览似乎使用了临时文件，并且 URL 与真实文件的结构并不真正匹配，因此您可以使用此解决方法来避开此问题。
只是：

对于要在移相器中加载的任何图像，只需在 html 中加载图像即可。
例如：<img id="sky" src="assets/sky.png" style="width:1px;height:1px;" />
并在移相器preload 函数中将所有this.load.image 替换为this.textures.addImage
这里是link to the documentation
这里有一个例子：

替换代码行：
```
this.load.image('sky', 'assets/sky.png');
```
有了这个：
```
this.textures.addImage('sky', document.getElementById('sky')); 
```
既然它似乎，播放代码预览无法处理生成图片网址从 javascript，您可以使用此解决方法。但仅用于 playcode 开发、生产或发布时使用原始 this.load.image(...)。该解决方法也适用于生产，但不是最佳的，不推荐。

【讨论】：