在 pixi.js 中初始加载后访问纹理

Question

我正在为我当前的 javascript 项目使用 pixi.js 渲染引擎。我正在使用assetloader加载在json中定义的spritesheet。问题是我需要在资产加载器使用的 onComplete 事件完成之后创建精灵或影片剪辑。但是，在那之后似乎无法访问纹理缓存。下面是一些代码，演示了我遇到的问题。

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

Answer 1

必须先完全加载精灵表，然后才能将图像存储到缓存中。加载 Sprite 表后，这些资源将存在于缓存中，直到您将其删除。

您上面的代码失败的原因是因为var sprite2... 行在精灵表完成加载之前执行。

---

此示例将每秒不断地向舞台添加一个新的 Sprite。

//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);
};