PixiJS V4限制幀率

Question

使用spritesheet，我試圖找出順暢通過，始終所有的幀動畫的最佳方式，但我需要的FPS降低60至30

嘗試使用AnimatedSprite始終默認爲60 fps，這會使我的動畫流動速度過快。

var frames = []; 

for (var i = 0; i < maxFrames; i++){ 
    frames.push(PIXI.Texture.fromImage("spriteFrame_"+ i)); 
} 

//// How to do it via AnimatedSprite 
var s = new PIXI.extras.AnimatedSprite(frames); 
s.play(); 
Stage.addChild(s); 

我現在做手動設置sprite的質感的方式，而且hackily減半的幀速率

// in bonusSymbol.js 
var curFrameNumber = 0; 

function nextFrame(){ 
    curFrameNumber ++; 

    if(curFrameNumber >= frames.length){ 
     curFrameNumber = 0; 
    } 

    sprite.texture = frames[curFrameNumber]; 
} 

// in game.js 
function gameLoop() { 
    //Loop this function at 60 frames per second 
    requestAnimationFrame(gameLoop); 

    // Force to only update on half frames (30fps) 
    if(frameCounter == 1){ 
     frameCounter = 0; 
     return; 
    } 
    frameCounter++; 


    bonusSym.NextFrame(); 
    Scene.Render() 
}; 

是否有任何替代或這樣做的更好的辦法？

Answer 1

AnimatedSprite有一個屬性叫做animationSpeed。

var frames = []; 

for (var i = 0; i < maxFrames; i++){ 
    frames.push(PIXI.Texture.fromImage("spriteFrame_"+ i)); 
} 

//// How to do it via AnimatedSprite 
var s = new PIXI.extras.AnimatedSprite(frames); 
s.animationSpeed = 0.5; 
s.play(); 
Stage.addChild(s); 

另外，而不只是紋理數組給予的AnimatedSprite，您可以通過FrameObject的數組，這給雙方的質地和多久應顯示爲毫秒。

var frames = []; 

for (var i = 0; i < maxFrames; i++){ 
    frame = { 
     texture: PIXI.Texture.fromImage("spriteFrame_"+ i), 
     time: 33 
    }; 
    frames.push(frame); 
} 

//// How to do it via AnimatedSprite 
var s = new PIXI.extras.AnimatedSprite(frames); 
s.play(); 
Stage.addChild(s);