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

或者，您可以传递一个 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);

PixiJS v4 限制帧率

PixiJS v4 Limiting Frame Rate

javascript

pixi.js