Error loading files from Multiatlas in Phaser3

Question

Trying to use the multiatlas feature in Phaser and TexturePacker.

Getting this error:

VM32201:1 GET http://localhost:8080/bg-sd.json 404 (Not Found)
Texture.js:250 Texture.frame missing: 1/1.png

The JSON file actually resides at http://localhost:8080/dist/img/bg-sd.json and I can browse to it. I can also browse to http://localhost:8080/dist/img/bg-1-sd.png.

I'm loading the atlas like:

    scene.load.multiatlas({
        key: 'bg-sd', 
        atlasURL: 'dist/img/bg-sd.json', 
        baseURL: 'dist/img'
    });

The 1/1.png frame is also in the file:

{
    "textures": [
        {
            "image": "bg-1-sd.png",
            "format": "RGBA8888",
            "size": {
                "w": 1924,
                "h": 2039
            },
            "scale": 0.5,
            "frames": [
                {
                    "filename": "1/1.png",
                    "rotated": false,
                    "trimmed": false,
                    "sourceSize": {
                        "w": 960,
                        "h": 540
                    },
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 960,
                        "h": 540
                    },
                    "frame": {
                        "x": 1,
                        "y": 1,
                        "w": 960,
                        "h": 540
                    }
                },

I've tried various combinations of the path and baseURL settings but it will not load the file from dist/img.

Answer 1

I think providing both a baseURL and an atlasURL might be conflicting. The baseURL is attached in front of the atlasURL value so you're probably loading something like dist/img/dist/img/bg-sd.json.

Have you tried without the configuration object, like:

this.load.multiatlas('bd-sd', './dist/img/bg-sd.json');