PIXI.loader and multiple sprite sheets/json files - best practices

[effinrich]

Hi,

I'm new to PIXI and thus far really like working with it.  I posted this issue in response to a previous, unrelated issue, so I thought making a new topic made more sense.  To summarize my project, I'm I'm overlaying one sprite sheet animation with another, which works perfectly except for loading so many json and sprite files.  I'm currently working on optimizing that, but I'm not completely comfortable with the loader class just yet.  Maybe someone can make a suggestion as to more efficient coding.  Currently the following code is called on click of a thumbnail of which there are three, each loading a pair of sprite sheets overlaying each other.  It works, but I feel there must be a cleaner way of doing this without clearing the loader and reloading every time the user goes between the thumbnail options.  

 

Currently I'm making two arrays each containing multiple JSON files with sprite sheet data.  This works, but I'm having to call two separate functions for each load event.  I tried assigning an ID to each "add" method, but accessing it that way through an error, which I suspect is due to the URL's being in an array.  My questions are:

 

Is there a way to load all of the assets on page load, then access them via user click so as not to wait for the loader?  I assumed once they were loaded I wouldn't need to worry about it again, but got an error about reloading existing assets, hence the inclusion of "loader.reset();".

 

Finally, is there a method of taking care of all of the frames in one load event rather than calling two for each set of sprite sheets and JSON I'm loading?  I'm guessing adding an ID to the "add" methods on the loader would be involved.

 

The following code is working, but I feel I'm missing something and it could be far cleaner and more efficient.

var loader = new PIXI.loaders.Loader();


// draw spritesheets to canvas

var animate = function() {

    requestAnimationFrame(animate);

    renderer.render(stage);

};


function loadModels(modelName, spriteNumber, frameNumber) {

    var faceAssetsToLoad = [];

    var lipsAssetsToLoad = [];


    for (var i = 0; i < spriteNumber; i++) {

        faceAssetsToLoad[i] = './img/spritesheets/' + modelName + '/face/' + modelName + '_' + i + '.json';

        lipsAssetsToLoad[i] = './img/spritesheets/' + modelName + '/lips/' + modelName + '_' + i + '.json';

    }


    loader.reset();

    loader.add(faceAssetsToLoad).load(onFaceAssetsLoaded);

    loader.add(lipsAssetsToLoad).load(onLipsAssetsLoaded);


    function onFaceAssetsLoaded() {

        var faceFrames = [];


        for (var i = 0; i < frameNumber; i++) {

            var val = i < 10 ? '0' + i : i;


            if (val > 99) {

                faceFrames.push(PIXI.Texture.fromFrame('' + modelName + '_00' + val + '.jpg'));

            } else {

                faceFrames.push(PIXI.Texture.fromFrame('' + modelName + '_000' + val + '.jpg'));

            }

        }


        faceMovie = new PIXI.extras.MovieClip(faceFrames);

        faceMovie.position.x = 0;

        faceMovie.position.y = 0;


        faceMovie.anchor.set(0);

        faceMovie.animationSpeed = 0.417;


        stage.addChild(faceMovie);


        faceMovie.play();


        animate();

    }


    function onLipsAssetsLoaded() {

        var lipsFrames = [];


        for (var i = 0; i < frameNumber; i++) {

            var val = i < 10 ? '0' + i : i;


            if (val > 99) {

                lipsFrames.push(PIXI.Texture.fromFrame('' + modelName + '_00' + val + '.png'));

            } else {

                lipsFrames.push(PIXI.Texture.fromFrame('' + modelName + '_000' + val + '.png'));

            }

        }


        lipsMovie = new PIXI.extras.MovieClip(lipsFrames);


        lipsMovie.alpha = 0.6;

        lipsMovie.position.x = 0;

        lipsMovie.position.y = 0;


        lipsMovie.anchor.set(0);

        lipsMovie.animationSpeed = 0.417;


        lipsMovie.tint = currentShadeHex;


        stage.addChild(lipsMovie);


        lipsMovie.play();


        animate();

    }

}


// click event which starts the loader

$('#modelThumbs li').on("click", function() {

        var ID = this.id;


        switch (ID) {

            case "1":

                loadModels("1", 58, 521);

                break;


            case "2":

                loadModels("2", 26, 233);

                break;


            case "3":

                loadModels("3", 34, 304);

                break;

        }

    }); 

I know there's a lot going on there, but any help would be great.  This framework is awesome, btw.  For the sake of dispelling any talk from my team about using createjs for this project, I built a createjs version for comparison.  The Pixi version blew the doors off the createjs version.  

 

thanks,

Rich

[coter]

// click event which starts the loader$('#modelThumbs li').on("click", function() {var ID = this.id;switch (ID) {case "1":loadModels("1", 58, 521);break;case "2":loadModels("2", 26, 233);break;case "3":loadModels("3", 34, 304);break;}}); 

It needs to be replaced ... at least a list.

$('#modelThumbs li').on("click", function() {    var item = list[this.id];    if(typeof item === "undefined" || typeof item === "null"){        throw new Error("[oh no]");    }else{        loadModels(this.id, item...., item...);    }});var list = {    "1": {        ...: 58,        ...: 521    },    "2": {        ...: 58,        ...: 521    }};

all the repetitive code you need to make a separate methods

for (var i = 0; i < frameNumber; i++) {    insertFrameToArray(modelName, faceFrames, '.jpg');}for (var i = 0; i < frameNumber; i++) {    insertFrameToArray(modelName, lipsFrames, '.png'); // change array name}var count = 0;function insertFrameToArray (name, array, extension) {    array.push(name + '_' + '0000'.slice((count).toString().length) + (count++).toString());}

in extreme cases you can do this for each of your counter array and pass it in the args.

[effinrich]

Thanks, coter.  This will definitely help clean it up.

[xerver]

I think this might be the same question I cleaned up for you here:

http://www.html5gamedevs.com/topic/17396-rendering-many-pixels-efficiently-and-aesthetically/

The cleanup I did ended up being very similar to what coter posted.