Text/Image Phaser 3 渲染问题

Question

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

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, 250, "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

Answer 1

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

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

我想你可以通过更改资产文件夹并告诉 Parcel 如何打包资产来解决，这样 xxx/assets 就会在 dist/assets.

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

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

文件夹结构

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

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

Text/Image Phaser 3 渲染问题

Text/Image Phaser 3 render issue

javascript

png

image

phaser-framework