Phaser 3 can not load assets

Question

I have a problem with Phaser3 framework. I can´t import spritesheet with

this.load.multiatlas('cowboy', 'assets/Character_Json.json', 'assets');

It looks like assets folder does not import to browser but I am sure it exists.

I checked in chrome developer tools on network tab; it says can't import assets, but I don't know why.

/*Game Settings*/

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {y: 0},
            debug: false
        }
    }
};


/*Game Globals*/

var game = new Phaser.Game(config);
var Scene;


function preload()
{
    Scene = this;

    this.load.multiatlas('cowboy', 'assets/Character_Json.json', 'assets');

    this.load.image('tiles', 'assets/Dungeon_Tileset.png');
    this.load.tilemapTiledJSON('json_map', 'assets/MapFinal.json');

}


/*This create MAP in the scene with JSON-MAP and create Layeres*/

function createMap(Scene){
     map = Scene.make.tilemap({key: 'json_map'});
     var tiles = map.addTilesetImage('Dungeon_Tileset', 'tiles');

     map.Layers = createLayers(map,tiles);

     return map;

}

/*Create layers for the map with tiles ( JSON )*/

function createLayers(map,tiles)
{
    backgroundLayer = map.createDynamicLayer('Background', tiles, 0, 0);

    collisionLayer = map.createDynamicLayer('Collision', tiles, 0, 0);

    slowLayer = map.createDynamicLayer('Slow', tiles, 0, 0);
    fastLayer = map.createDynamicLayer('Fast', tiles, 0, 0);
    itemLayer = map.createDynamicLayer('Item', tiles, 0, 0);
    //collisionLayer.setCollisionByExclusion([-1]);
    return Layers = {
        backgroundLayer : backgroundLayer,
        collisionLayer : collisionLayer,
        slowLayer : slowLayer,
        fastLayer : fastLayer,
        itemLayer : itemLayer
    };
}

/*Create annimations in scene*/

function createAnimations(Scene)
{
    Scene.anims.create({
        key: 'run',
        frames: Scene.anims.generateFrameNumbers('cowboy', {start: 0, end: 16}),
        frameRate: 20,
        repeat: -1
    });
}

/*Create all objects for our game and return them*/

function createGameObjects(Scene){
    return GameObjects = {
        player : Scene.physics.add.sprite(40, 40, 'cowboy', "Idle__001.png"),
        score : 0,
        cursor : Scene.input.keyboard.createCursorKeys()
        //textScore : Scene.add.text(200, 0, "Score: " + this.score, {font: "25px Impact"})
    };
}

/*CreatePhysics for objects (collisions)*/

function createPhysics(Scene,GameObjects,map)
{
   player = GameObjects.player;

   collisionLayer = map.Layers.collisionLayer;


   Scene.physics.add.collider(player, collisionLayer, collisionWithCollisionLayer);

}

function create()
{
   /*create Map with layers and save it to map variable (map.Layers)*/
   map = createMap(Scene);

   createAnimations(Scene);
   //create all GameObjects for this Scene
   var GameObjects = createGameObjects(Scene);

//create Physic for all ours game Objects
   createPhysics(Scene,GameObjects,map);

}

function update()
{
    //player.anims.play('run', true);

}

NetBeans Code

Console Output

Network Output

Answer 1

I don't think it's a big error but just how to use this.load.multiatlas(...)

So, I guess you want to load the atlas from the folder assets/ so try it this way :

this.load.setPath('assets/');
this.load.multiatlas('cowboy', 'Character_Json.json');

If it still doesn't want to load please let me know maybe the json file is not correct