Phaser 3 Load Json File 404

[SkyWorld]

I used Phaser 3 and Webpack Development Server to create a game.

But when I used 

atlas(key [, textureURL] [, atlasURL] [, textureXhrSettings] [, atlasXhrSettings])

, the Chrome Develope tool show me: 

XHRLoader.js:57 GET http://10.10.0.10:8081/assets/jsons/login.json 404 (Not Found)

My code is:

function Preload() {

this.load.atlas('loginAtlas', './assets/images/login.png', './assets/login.json');

}

If my code is wrong?

[jdotr]

It's not possible to say whether or not this is correct without corresponding webpack config file and your project's directory structure.

The way webpack(-dev-server) works is that it reads your config and the packages all the relevant content into a directory (or maps URL paths to file paths in your dev tree). For a host of reasons (deployment size, security, etc) webpack won't package or expose the files that it doesn't know need to be included. It's very possible (likely) that what you're seeing is webpack not knowing that your login.json file needs to be bundled into deployment.

 

A second issue that may crop up with webpack is that it understands JSON natively and will often bundle an imported JSON file as a processed object instead of making it available by HTTP request. In other words if you have

import atlasImage from './assets/atlasImage.png'
import atlasKey from './assets/atlasKey.json'

...

this.load.atlas('loginAtlas', atlasImage, atlasKey)

then webpack will interpret that as an instruction that it should

1. make atlasImage.png available via HTTP request
2. process the file atlasKey.json and store the result into the object atlasKey

which is obviously not what you want because passing that to load.atlas an object instead of a URL.

 

If I were you I'd probably start without worrying with webpack or use one of the existing boilerplate projects that combines es6, webpack, and other modern JS tools into a configuration that is known to work together, e.g., like https://github.com/nkholski/phaser3-es6-webpack. If just using a prepackaged project to get started doesn't taste good I'd say step back for thinking of this as "my phaser code is bad" and more like "I should work through a webpack tutorial"

 

tl;dr:

1. I don't think your problem is the code based on what you've posted
2. It's not really possible to tell without digging into your webpack config / project structure
3. Honestly don't fight webpack right now unless you want to learn something else at the same time and use https://github.com/nkholski/phaser3-es6-webpack or similar

 

good luck!

[SkyWorld]

Thank you.

After read your suggestions, I found there is an error in webpack sconfig setting.

I don't copy the json file to the output folder.

[jdotr]

Awesome, I'm glad it worked out :)