Phaser3 Image Assets Not Loading | 404 (Not Found)

Question

I'm following this tutorial to use Phtomstorm's boilerplate build a multi-scene game template. I'm getting a 404 for my logo image that I add in the preload() function of GameScene.js. I feel like I have followed the instructions to the T but am possibly not exposing the asset in webpack properly as I'm new to this tool.

What am I doing wrong here in getting this logo.png to show on the screen?

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

Project Template - https://github.com/photonstorm/phaser3-project-template.git

index.js

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

config.js

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

GameScene.js

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

Webpack base.js

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

npm start

> phaser3-project-template@1.1.1 start
> webpack-dev-server --config webpack/base.js --open

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

Phaser3 Image Assets Not Loading | 404 (Not Found)

Answers (1)

Related Questions