pixi.js에서 초기로드 후 텍스처에 액세스

Question

javascript에서 현재 프로젝트에 pixi.js 렌더링 엔진을 사용하고 있습니다. json에 정의 된 스프라이트 시트를 로딩 할 때, assetloader를 사용한다. 문제는 자산 로더가 사용하는 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

이미지가 캐시에 저장되기 전에 스프라이트 시트가 완전히로드되어야합니다. 스프라이트 시트가로드되면 해당 애셋은 삭제할 때까지 캐시에 존재합니다.

위 코드가 실패하는 이유는 스프라이트 시트로드가 완료되기 전에 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); 
};