Phaser3 图像资源未加载 | 404（未找到）

Question

我正在按照本教程使用 Phtomstorm 的样板构建多场景游戏模板。我在 GameScene.js 的 preload() 函数中添加的徽标图像收到 404 错误。我觉得我已经按照 T 的说明进行操作，但可能没有正确暴露 webpack 中的资源，因为我是这个工具的新手。

\n

我在让这个 logo.png 显示在屏幕上时做错了什么？

\n

教程 - https://phasertutorials.com/creating-a-phaser-3-template-part-1/

\n

项目模板 - https://github.com/photonstorm/phaser3-project-template.git

\n

索引.js

\n

import Phaser from "phaser";\nimport config from \'./Config/config\';\nimport GameScene from \'./Scenes/GameScene\';\n \nclass Game extends Phaser.Game {\n  constructor () {\n    super(config);\n    this.scene.add(\'Game\', GameScene);\n    this.scene.start(\'Game\');\n  }\n}\n \nwindow.game = new Game();\n

\n

配置文件

\n

import \'phaser\';\n \nexport default {\n  type: Phaser.AUTO,\n  parent: \'phaser-example\',\n  width: 800,\n  height: 600\n};\n

\n

游戏场景.js

\n

import \'phaser\';\n \nexport default class GameScene extends Phaser.Scene {\n  constructor () {\n    super(\'Game\');\n  }\n \n  preload () {\n    // load images\n    this.load.image(\'logo\', \'assets/logo.png\');\n  }\n \n  create () {\n    this.add.image(400, 300, \'logo\');\n  }\n};\n

\n

Webpack 基础.js

\n

const webpack = require("webpack");\nconst path = require("path");\nconst HtmlWebpackPlugin = require("html-webpack-plugin");\nconst { CleanWebpackPlugin } = require("clean-webpack-plugin");\nmodule.exports = {\n  mode: "development",\n  devtool: "eval-source-map",\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: "babel-loader"\n        }\n      },\n      {\n        test: [/\\.vert$/, /\\.frag$/],\n        use: "raw-loader"\n      },\n      {\n        test: /\\.(gif|png|jpe?g|svg|xml)$/i,\n        use: "file-loader"\n      }\n    ]\n  },\n  plugins: [\n    new CleanWebpackPlugin({\n      root: path.resolve(__dirname, "../")\n    }),\n    new webpack.DefinePlugin({\n      CANVAS_RENDERER: JSON.stringify(true),\n      WEBGL_RENDERER: JSON.stringify(true)\n    }),\n    new HtmlWebpackPlugin({\n      template: "./index.html"\n    })\n  ]\n};\n

\n

\n

npm 启动

\n

> phaser3-project-template@1.1.1 start\n> webpack-dev-server --config webpack/base.js --open\n\ni \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at http://localhost:8081/\ni \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\ni \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from C:\\Users\\xeonp\\Documents\\phaser.io\\phaser3-project-template\nBrowserslist: caniuse-lite is outdated. Please run next command `npm update`\ni \xef\xbd\xa2wdm\xef\xbd\xa3: wait until bundle finished: /\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Hash: a401be8d3773943c3f38\nVersion: webpack 4.41.2\nTime: 2313ms\nBuilt at: 12/06/2020 9:30:36 AM\n     Asset       Size  Chunks             Chunk Names\nindex.html  158 bytes          [emitted]\n   main.js   17.2 MiB    main  [emitted]  main\nEntrypoint main = main.js\n[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src 40 bytes {main} [built]\n[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]\n[./node_modules/phaser/dist/phaser.js] 5.99 MiB {main} [built]\n[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]\n[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]\n[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]\n[./node_modules/webpack/hot sync ^\\.\\/log$] (webpack)/hot sync nonrecursive ^\\.\\/log$ 170 bytes {main} [built]\n[./src/Config/config.js] 113 bytes {main} [built]\n[./src/Scenes/GameScene.js] 2.71 KiB {main} [built]\n[./src/index.js] 2.1 KiB {main} [built]\n    + 21 hidden modules\nChild html-webpack-plugin for "index.html":\n     1 asset\n    Entrypoint undefined = index.html\n    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 313 bytes {0} [built]\n    [./node_modules/lodash/lodash.js] 530 KiB {0} [built]\n    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]\n    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled successfully.\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiling...\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Hash: 210a30ea65002a251ebc\nVersion: webpack 4.41.2\nTime: 91ms\nBuilt at: 12/06/2020 9:30:55 AM\n     Asset       Size  Chunks             Chunk Names\nindex.html  158 bytes          [emitted]\n   main.js   17.2 MiB    main  [emitted]  main\nEntrypoint main = main.js\n[./src/index.js] 2.1 KiB {main} [built]\n    + 35 hidden modules\nChild html-webpack-plugin for "index.html":\n     1 asset\n    Entrypoint undefined = index.html\n       4 modules\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled successfully.\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiling...\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Hash: 46d83d562089e6944d44\nVersion: webpack 4.41.2\nTime: 118ms\nBuilt at: 12/06/2020 9:31:11 AM\n     Asset       Size  Chunks             Chunk Names\nindex.html  158 bytes          [emitted]\n   main.js   17.2 MiB    main  [emitted]  main\nEntrypoint main = main.js\n[./src/index.js] 2.08 KiB {main} [built]\n    + 35 hidden modules\nChild html-webpack-plugin for "index.html":\n     1 asset\n    Entrypoint undefined = index.html\n       4 modules\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled successfully.\n

\n

\n

\n

Answer 1

用下面的代码替换预加载函数，它将正常工作......

preload () {
    // load images
    this.load.image('logo', require('../assets/logo.png'));
  }