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

我在javascript中使用pixi.js渲染引擎来处理当前项目。我正在使用assetloader加载json中定义的spritesheet。问题是我需要在assetloader使用的onComplete事件完成之后很好地创建精灵或动画片段。然而，纹理缓存在该点之后似乎不可访问。以下是一些代码，演示了我遇到的问题。在pixi.js中初始加载后访问纹理

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

来源

2014-03-30 Qdot543

在将图像存储到缓存之前，必须完全加载精灵表。一旦加载了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); 
};

来源

2014-07-14 18:09:10 Karmacon

谢谢你回答这个问题。我有点困惑。我假设（'var sprite2 ..'）在精灵表被加载后执行，因为它是在（'loader.load（）'）之后执行的。有什么关于从全球范围调用我不知道的函数。 – Qdot543

也我刚才想出了如何使用'代码'标记。抱歉上面的可怕格式。 – Qdot543

调用load（）后创建Sprite是正确的，但图像加载过程是异步的。发生的事情是，在你调用load（）之后，但在纹理完成下载之前，Sprite会立即创建。 – Karmacon

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

回答

相关问题