PixiJS v4限制幀率

Question

盡管我需要將FPS從60降低到30，但我仍在嘗試使用Spritesheet找出最佳方法來平滑且一致地遍歷所有幀。

嘗試使用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的紋理，然后將幀速率降低一半

// 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數組，該數組既提供紋理又顯示應該以ms為單位的顯示時間。

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