Iacus

Loading custom spritesheets in two steps

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Iacus

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.