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

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

1 个答案: