javascript - 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 的纹理，并粗略地将帧速率减半

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

或者，您可以传递一个 FrameObject 数组，而不是仅提供给 AnimatedSprite 的纹理数组，该数组提供纹理及其应显示的时间(以毫秒为单位)。

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