PixiJS - 設置固定幀速率

正如標題所說，您如何爲PixiJS設置25幀/秒的固定幀速率？PixiJS - 設置固定幀速率

這裏是我的設置：

g_App = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 
document.getElementById("canvas-div").appendChild(g_App.view);

我不想做任何比這更多的幀。

來源

2017-04-14 Rewind

@ wavemode關於使用requestAnimationFrame的PixiJS的評論後，我想我可能需要做以下事情。（注意：如果有更好的解決方案，請將其張貼出來，否則我會將其標記爲答案。）

基本上，如果我們超出幀速率停止任何動畫。

var g_TICK = 40; // 1000/40 = 25 frames per second 
var g_Time = 0;

再後來，當我們設置了動畫：

// Listen for animate update 
g_App.ticker.add(function (delta) { 
    // Limit to the frame rate 
    var timeNow = (new Date()).getTime(); 
    var timeDiff = timeNow - g_Time; 
    if (timeDiff < g_TICK) 
     return; 

    // We are now meeting the frame rate, so reset the last time the animation is done 
    g_Time = timeNow; 

    // Now do the animation 

    // rotate the container! 
    // use delta to create frame-independent tranform 
    container.rotation -= 0.01 * delta; 
    g_Bunny0.x += 1; 
});

來源

2017-04-15 13:08:48 Rewind

25 FPS每幀40毫秒。因此，每一幀，你應該，如果你想在屏幕更新每秒25次調用

的setTimeout（myRenderFunction，40）

。

來源

2017-04-14 18:06:23 wavemode

這不正常使用的'g_App.ticker.add（函數（增量）{/ *我的動畫在這裏* /}） ;'事情的方式。那麼我在myRenderFunction中如何在PixiJS環境中實際繪製畫布？ – Rewind

@Rewind'myRenderFunction'應該包含遊戲循環中的所有內容。 Pixi.JS Ticker使用'requestAnimationFrame'，它總是以顯示器的刷新率運行（可能爲60 fps）。如果你想要25，那麼你必須用'setTimeout'或'setInterval'以25fps的速度手動繪製。 – wavemode

我在myRenderFunction中調用什麼來實際繪製PixiJS場景？如何阻止PixiJS自動執行自己的操作並在setTimeout之外繪製場景？ – Rewind

PixiJS - 設置固定幀速率

回答

相關問題