Loading custom spritesheets in two steps

[Iacus]

Hello,

I'm trying to load sprite sheets to build a tiling map in Pixi. I have my spritesheets defined in a custom data structure like so:

{
    "image": "../aside/tileset_1bit.png",
    "spacing": 0,
    "tile_height": 16,
    "tile_width": 16
}

Now, I add the json file to the loader, and hit loader.load(), calling an onComplete function:

let loader = new PIXI.Loader();
let path = './data/spritesheets/dev_tileset.json';

loader.add(path);
loader.onComplete.add((loader) => loadSpriteTextures(loader));
loader.load();

function loadSpriteTextures(loader) {
    for (let key in loader.resources) {
        if (loader.resources[key].extension == 'json') {
            let data = loader.resources[key].data;
            let {
                image,
                spacing,
                tile_height,
                tile_width,
            } = data;
            let sheet = new Spritesheet(image, spacing, tile_height, tile_width);
            spriteSheets.push(sheet);
            loader.add(sheet.image);
        }
    }
}

Except, when I call loader.add(sheet.image), I get an error:  "resource-loader.esm.js:1992 Uncaught Error: Resource named "../aside/tileset_1bit.png" already exists."

I know for a fact that the image "../aside/tileset_1bit.png" does *not* exist in the loader. If I don't call the add() and try looking, it's not there (as expected).
I need the second load() step to actually load the images into the loader, which I'd later reference from my Spritesheet object, but this error is baffling me.

Any ideas what cause this? Is it a bug?

[ivan.popelyshev]

1. if you add resources to loader inside a callback , you have to use "parentResource" field. Look how pixi does it: https://github.com/pixijs/pixi.js/blob/93835dbbecbd0b4f31c9533bde8386a71c5662e3/packages/spritesheet/src/SpritesheetLoader.ts#L45

2. I think your problem is actually contents of "image"  variable. It can be the same for two of your tilesets. I also recomment to use name of img resource according to names of tileset (use add() with two params, not one)

Edited May 2, 2020 by ivan.popelyshev

[Iacus]

56 minutes ago, ivan.popelyshev said:

1. if you add resources to loader inside a callback , you have to use "parentResource" field. Look how pixi does it: https://github.com/pixijs/pixi.js/blob/93835dbbecbd0b4f31c9533bde8386a71c5662e3/packages/spritesheet/src/SpritesheetLoader.ts#L45

2. I think your problem is actually contents of "image"  variable. It can be the same for two of your tilesets. I also recomment to use name of img resource according to names of tileset (use add() with two params, not one)

Ok, and what is parentResource and how should I use it?

And yes, the Image parameter could be the same for more than one tileset but in that case the error would make sense, as I'm not interested in loading the texture twice

[Iacus]

Ok, I suspect my onComplete function triggers twice, so when I load() the second step, it runs the callback again, trying to re-add the resources.

Is there any method to tell the loader I only want to run the onComplete once?

[ivan.popelyshev]

On both questions: those are questions for author of https://github.com/englercj/resource-loader/tree/release/3.x  , @xerver

resource-loader is an kind of independent lib, and every time I do any advanced operations with it - I look in the sources (in pixi case 3.x branch), because its really easy to look through it than to ask question of why it was done this way. If you ever made your own loader - it could look like that. Things like parentResource, how load event is emitter are not possible to memorize, its pure experience stuff.

The best way to solve issue fast is to go through issues in pixi with that filter: https://github.com/pixijs/pixi.js/issues?q=is%3Aissue+loader+

Pixi is not a black box - you can place breakpoints in certain places, look in sources, add watches, e.t.c. and in loader case its al. The most difficult loader middleware is spine - https://github.com/pixijs/pixi-spine/blob/master/src/loaders.ts , and even with docs that were made by people with experience https://github.com/pixijs/pixi-spine/tree/master/examples - every time something goes wrong and you have to debug it.

I dont believe its a fault of resource-loader itself, its just the whole topic of how to load stuff and parse it isn't theoretical, its pure practice and debug.

[Iacus]

I feel that should either be made into an API that behaved as you expect or at least documented better, so users know what to expect...

Anyway, it seems I've managed to solve it using an undocumented alternate sysntax that allows you to specify the callback at add time, but it would have taken a lot less if the documentation wasn't so lacking...

Edited May 3, 2020 by Iacus