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

Question

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

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 表。加载 Sprite 表后，这些资源将存在于缓存中，直到您将其删除。

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

<小时/>

此示例将每秒不断地向舞台添加一个新的 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);
};