Where to place image asset and audio files in project structure?

[xeonproc]

The preload in this example pulls images from http://labs.phaser.io in preload function.

When I create an assets directory in src, all my images return 404 when calling this.load.image.

Does webpack have to be modified to drop assets in this boilerplate?

[teletobbie]

Same problem did you found a solution?

[teletobbie]

Found it! You can just import a image using a import statement. See code example below.

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

[pmaxwellward]

In the README of this repo, it states "Loading images via JavaScript module import is also supported, although not recommended."

If loading images via module import is not recommended, what is recommended?

[bfelbo]

In the README of this repo, it states "Loading images via JavaScript module import is also supported, although not recommended."

If loading images via module import is not recommended, what is recommended?

@photonstorm, you added this to the README. Can you explain what the recommended approach is?

I get 404 errors when trying to use the atlas function such as this.load.atlas("assets", "./assets/games/breakout/breakout.png", "./assets/games/breakout/breakout.json").

[bfelbo]

#43 seems to have a decent solution for making the webserver redirect to the asset folder, thereby allowing the game to find the assets. That solution should work if you put your assets in src/assets.

[photonstorm]

This is fixed with v2.0.0 of this template (see the updated README and example code)