PIXI.loader.add with image instead of json file

[html5gamedev]

I have a couple of texture atlases. The order of textures that create animation is the same in all of them. In other words, my first frame of animation is always (0,0,100,100), my second frame is in all atlases (100,0,100,100) and so on. The only thing that changes is meta's image: "image1.png". It changes to "image3.png" and so on. Frames in all texture atlases are named the same

 

{
    "meta": {
        "image": "image1.png",
        "size": {"w"1000,"h":2000},
        "scale": "1"
    },
    "frames": {
        "image_0000.png":
        {
            "frame": {"x":0,"y":0,"w":100,"h":100},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":100,"h":100},
            "sourceSize": {"w":100,"h":100}
        },
        "image_0001.png":{...}

    }
}

 

It is kinda wasteful to load 10 different json files, because the positions and frame names are always the same for all of the animations. How can I load images instead of json files?

 

   

PIXI.loader .add(['assets/file1.json']); // don't wanna load 10 json files


function createFrames(name, imageToUse) {
    var frames = [];

    for (var i = 0; i < 30; i++) {
        var val = i < 10 ? '0' + i : i;
        frames.push(PIXI.Texture.fromFrame(name + val + '.png')); // use imageToUse to tell PIXI from which image should it create frames.
    }
    return frames;
}

 

[xerver]

The loader can load all kinds of stuff, including images. Just pass the image URLs to the loader .add() method.

It won't create all the frames for you if it doesn't load the json, but if you load it once you can do it yourself after that.