Javascript 文本/图像相位器3渲染问题_Javascript_Image_Png_Phaser Framework

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

javascript image

Javascript 文本/图像相位器3渲染问题,javascript,image,png,phaser-framework,Javascript,Image,Png,Phaser Framework,我是第三阶段的新手。我有一个问题，当我在本地主机上运行游戏时，文本会出现，但图像不会出现。我尝试了多种方法来加载图像更改文件夹路径、更改与src文件夹相关的文件夹、重命名png、确保路径正确、确保标记正确，以及尝试其他png。开发工具在浏览器中不显示任何错误。我使用包裹作为捆绑包，不确定这是否是问题所在。下面是我的文件夹结构和浏览器外观的截图。你知道我做错了什么吗 main.js const Phaser= require('phaser'); const Game= require (&quo

我是第三阶段的新手。我有一个问题，当我在本地主机上运行游戏时，文本会出现，但图像不会出现。我尝试了多种方法来加载图像更改文件夹路径、更改与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, 250, "wind");
   }
}

module.exports = Game;

index.html

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

当你写作时

this.load.image（“wind”，“./assets/wind.png”）

，该路径与浏览器加载的文件的位置相关

浏览器（通常）从

dist

文件夹加载文件，而不是直接从

src

加载文件

我认为您可以通过更改资产文件夹并告诉包裹如何打包您的资产来解决问题，这样

xxx/assets

将位于

dist/assets

我通常使用，并与

src

一起创建一个

public

文件夹，并将其放入

package.json

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

文件夹结构

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

另一个解决方案可能是更改引用“提供”给Phaser的文件的方式（可能使用

require（…）

或其他方式）。我知道这在某种程度上是可能的，但第一个解决方案对我的目的来说已经足够了，所以我没有充分挖掘来解释它，但我认为值得一提。

谢谢你的建议。我确实试过了，但仍然得到了同样的结果。两个后续问题。我是否应该在package.json中的“static files”代码中放置一个特定的位置，以表示前后依赖关系？你能详细说明一下所需的解决方案吗？或者为我指明一个方向以查找更多信息？package.json不是一个有序列表，因此您可以将静态文件放在任何位置。但是我发现这个解决方案附带了一个插件“packet plugin static files copy”（对不起，我改进了我的答案）。关于

require

我想它应该是类似

this.image.load（'my-image'，require（'images/my image.png'））

,，我没有任何参考给你。我尝试了包裹插件静态文件复制，但没有工作。我不知道为什么。所需的建议已完成，非常感谢！你知道v2包裹的情况吗？我是否需要更新我的package.json中的包裹？如果是这样，如何安装？文档（）说使用

添加-D安装v2parcel@next

或

npm安装-Dparcel@next

但据我所知，它仍处于测试阶段。

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