文本/图像移相器 3 渲染问题

如何解决文本/图像移相器 3 渲染问题

我是 Phaser 3 的新手。我遇到了一个问题，当我在本地主机上运行我的游戏时，文本会出现，但图像不会。我尝试了多种方法来加载图像，更改文件夹路径，更改与 src 文件夹相关的文件夹，重命名 png，确保路径正确，确保标签正确，尝试其他 png。开发工具在浏览器中没有显示错误。我使用包裹作为我的打包器，不确定这是否是问题所在。这是我的文件夹结构和浏览器外观的屏幕截图。关于我做错了什么的任何想法？

main.js

const Phaser= require('phaser');
const Game= require ("../src/scenes/Game")
  var config = {
    width: 800,height: 500,type: Phaser.AUTO,};
var game = new Phaser.Game(config);
game.scene.add("game",Game);
game.scene.start("game");`

Game.js

const Phaser = require("phaser");
class Game extends Phaser.Scene {
   preload() {
   this.load.image("wind","../assets/Wind.png");
   }
   create() {
   const text = this.add.text(400,250,"hello world");
   text.setorigin(0.5,0.5);
   this.add.image(400,"wind");
   }
}

module.exports = Game;

index.html

<html>
  <head>
   <title>A Storm's a Brewin</title>
  </head>
<body>
  <script src="./main.js"></script>
</body>`

package.json

    {
  "name": "stormbrewer","version": "1.0.0","description": "","main": "index.js","scripts": {
    "start": "parcel src/index.html","test": "echo \"Error: no test specified\" && exit 1"
  },"author": "","license": "ISC","dependencies": {
    "parcel-bundler": "^1.12.5","phaser": "^3.54.0"
  }
}

Folder Structure

What the browser looks like

解决方法

当你写 this.load.image("wind","../assets/Wind.png")，该路径相对于浏览器加载的文件的位置。

浏览器（通常）从 dist 文件夹加载文件，而不是直接从 src 加载。

我认为您可以通过更改资产文件夹并告诉 Parcel 如何打包您的资产以便 xxx/assets 位于 dist/assets 中来解决。

我通常使用parcel-plugin-static-files-copy，并与public一起创建一个src文件夹并将其放入package.json

...
"staticFiles": {
  "staticPath": "public"
},...

文件夹结构

package.json
public
| assets
| | any.png
src
| Game.js

另一种解决方案可能是更改引用“提供”给 Phaser 的文件的方式（可能带有 require(...) 或其他内容）。我知道这是有可能的，但第一个解决方案足以满足我的目的，所以我没有深入解释它，但我认为值得一提。