Problem using load.multiatlas() and load.setPath()

Phaser 3
1

I’m having a strange issue and I can’t find where exactly is the problem/bug.

When I use load.setPath() in combination with load.multiatlas() I can’t use load.setPath() again AFTER the call to multiatlas. That last call to setPath seems to override the previous values meant for the multiatlases.

For example, I have this in my PreloaderScene:

		this.load.setPath('assets/entities');
		this.load.atlas('Player_Atlas');

		this.load.setPath('assets/common/');
		this.load.atlas('ElementsAtlas');

		this.load.setPath('assets/level1/'); 
		this.load.multiatlas('Level1_Atlas', 'Level1_Atlas.json');
		this.load.multiatlas('Level1_BG_Atlas', 'Level1_BG_Atlas.json');

        // THIS LAST CALL TO setPath() messes up 
        // the previous multiatlas paths
        this.load.setPath('assets/level2/');
		this.load.atlas('Level2_BG_Atlas');

Now, the LoadManager attempts to load

assets/level2/Level1_Atlas-0.png
assets/level2/Level1_Atlas-1.png
assets/level2/Level1_BG_Atlas-0.png

instead of

assets/level1/Level1_Atlas-0.png
assets/level1/Level1_Atlas-1.png
assets/level1/Level1_BG_Atlas-0.png

The atlas and mutialtas json files load properly, it’s the atlas texture’s paths that gets corrupted.

Any ideas where should I look to try a workaround?

PS: Multi atlases files were generated by latest version of TexturePacker.

2

I guess this is an async problem. It sets the path to assets/level2/ before all level 1 assets are loaded.

I’m not sure how to solve this. Unfortunately this.load.something does not return a promis :thinking:

4

This does work:

async preload() {

  const asyncLoader = loaderPlugin => {
    return new Promise(resolve => {
      loaderPlugin.on('filecomplete', () => resolve()).on('loaderror', () => resolve())
    })
  }

  this.load.setPath('assets/entities')
  await asyncLoader(this.load.atlas('Player_Atlas'))

  this.load.setPath('assets/common/')
  await asyncLoader(this.load.atlas('ElementsAtlas'))

  this.load.setPath('assets/level1/')
  await asyncLoader(this.load.multiatlas('Level1_Atlas', 'Level1_Atlas.json'))
  await asyncLoader(this.load.multiatlas('Level1_BG_Atlas', 'Level1_BG_Atlas.json'))

  this.load.setPath('assets/level2/')
  await asyncLoader(this.load.atlas('Level2_BG_Atlas'))
}
5

If you want to load multiple assets on the same path (like for ‘assets/level1/’), use Promise.all

this.load.setPath('assets/level1/')
await Promise.all([
  asyncLoader(this.load.multiatlas('Level1_Atlas', 'Level1_Atlas.json')),
  asyncLoader(this.load.multiatlas('Level1_BG_Atlas', 'Level1_BG_Atlas.json'))
])

I hope this helps :slight_smile:

6

Meant to say: try the path property in MultiAtlasFileConfig.

7

Hi @jackfreak,
In the game configuration there is an object called loaderConfig.
You could try changing the async parameter to false, or perhaps the maxParallelDownloads parameter to 1, or both at the same time. The downside is that the game would take a little longer to load the assets.
Regards.

8

Thank you all for your answers :slight_smile:

I can’t use async await cause I need some old browsers compatibility (and to be honest I haven’t worked much with them, so I don’t feel comfortable using them yet).

I did tried the MultiAtlasConfig parameter, set the “path” property like this:

    path = 'assets/level1/';
	this.load.multiatlas({
		key: 'Level1_Atlas',
		atlasURL: path + 'Level1_Atlas.json',
		path: path,
	});

	this.load.multiatlas({
		key: 'Level1_BG_Atlas',
		atlasURL: path + 'Level1_BG_Atlas.json',
		path: path,
	});

That caused a strange error when loading the json files, the LoadManager tried to load them from the root folder:

/Level1_BG_Atlas.json
instead of
/assets/level1/Level1_BG_Atlas.json

I have a deadline soon so I don’t have the time to try different things and get to the bottom of it as I would like. For now I’ve found that not using setPath() and setting the full relative urls manually works properly:

path = 'assets/common/';
this.load.atlas('ElementsAtlas', path + 'ElementsAtlas.png', path + 'ElementsAtlas.json');

path = 'assets/level1/';
this.load.multiatlas('Level1_Atlas', path + 'Level1_Atlas.json', path);
this.load.multiatlas('Level1_BG_Atlas', path + 'Level1_BG_Atlas.json', path);

path = 'assets/level2/';
this.load.atlas('Level2_BG_Atlas', path + 'Level2_BG_Atlas.png', path + 'Level2_BG_Atlas.json');
this.load.multiatlas('Level2_Atlas', path + 'Level2_Atlas.json', path);

Notice that I had to set the “path” parameter of this.load.multiatlas(), otherwise the multiatlas textures are loaded from the root folder instead of being loaded from the same folder as the json file (as I assumed they would be).

One thing I have yet to try is to set the async parameter to false as suggested by @jjcapellan, just out of curiousity :wink: