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数组来传递一个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);

PixiJS v4限制帧率

1 个答案: