I'm using the pixi.js render engine for my current project in javascript. I'm loading a spritesheet defined in json, using the assetloader. Problem is I need to create sprites or movieclips well after the onComplete event that the assetloader uses, finishes. However the texture cache seems to not be accessible after that point. Here is some of the code below demonstrating the problem I'm ing across.

var spriteSheet = [ "test.json" ];
loader = new PIXI.AssetLoader(spriteSheet); // only using the flappy bird sprite sheet as a test 
loader.onComplete = OnAssetsLoaded;
loader.load();

function OnAssetsLoaded() {
    var sprite = PIXI.Sprite.fromFrame("someFrame.png"); //this works
}

var sprite2 = PIXI.Sprite.fromFrame("someFrame2.png"); //This does not work, tells me "someFrame2" is not in the texture cache

I'm using the pixi.js render engine for my current project in javascript. I'm loading a spritesheet defined in json, using the assetloader. Problem is I need to create sprites or movieclips well after the onComplete event that the assetloader uses, finishes. However the texture cache seems to not be accessible after that point. Here is some of the code below demonstrating the problem I'm ing across.

var spriteSheet = [ "test.json" ];
loader = new PIXI.AssetLoader(spriteSheet); // only using the flappy bird sprite sheet as a test 
loader.onComplete = OnAssetsLoaded;
loader.load();

function OnAssetsLoaded() {
    var sprite = PIXI.Sprite.fromFrame("someFrame.png"); //this works
}

var sprite2 = PIXI.Sprite.fromFrame("someFrame2.png"); //This does not work, tells me "someFrame2" is not in the texture cache

• javascript
• caching
• textures
• sprite
• pixi.js

1 Answer 1

The sprite sheet must be fully loaded before the images get stored in the cache. Once the Sprite sheet has loaded, those assets will exist in the cache until you delete them.

The reason your code above fails is because the line var sprite2... executes before the sprite sheet has finished loading.

This example will continuously add a new Sprite to the stage every second.

//build stage
var stage = new PIXI.Stage(0x66FF99);
var renderer = PIXI.autoDetectRenderer(400, 300);
document.body.appendChild(renderer.view);

//update renderer
requestAnimFrame( animate );
function animate() {
    requestAnimFrame( animate ); 
    renderer.render(stage);
}

//Flag will prevent Sprites from being created until the Sprite sheet is loaded.
var assetsReadyFlag = false;

//load sprite sheet
var loader = new PIXI.AssetLoader([ "test.json" ]);
loader.onComplete = function(){
    assetsReadyFlag = true;
};
loader.load();

//Add a new bird every second
setInterval( addBird, 1000);
function addBird()
{
    //assets must be loaded before creating sprites
    if(!assetsReadyFlag) return;

    //create Sprite
    var bird = PIXI.Sprite.fromFrame("bird.png");
    bird.anchor.x = bird.anchor.y = 0.5;
    bird.x = Math.random() * stage.width;
    bird.y = Math.random() * height;
    stage.addChild(bird);
};