渲染循環

既然您已了解系統的主要部分，讓我們來看看這些部分如何協同作業，將您的專案放到螢幕上。與網頁不同，PixiJS 會不斷更新和重新繪製自身。您更新物件，PixiJS 會將它們渲染到螢幕上，然後重複這個程序。我們將此循環稱為渲染循環。

大部分 PixiJS 專案都包含在此更新 + 渲染循環中。您撰寫更新碼，PixiJS 負責處理渲染。

讓我們了解一下渲染循環的每個畫面中會發生什麼事。共有三個主要步驟。

執行計時器回呼

第一步是計算自上一個畫面以來經過多少時間，然後使用該時間差值呼叫 Application 物件的計時器回呼。這允許專案的程式碼在準備渲染時在舞台上為精靈等物件加入動畫和更新。

更新場景圖形

我們將在下一份指南中詳細說明場景圖形是什麼，以及它的組成，但就目前而言，您只需要知道它包含您正在繪製的物件（精靈、文字等），而且這些物件位於樹狀層級中。在您透過移動、旋轉等方式更新遊戲物件後，PixiJS 需要計算場景中每個物件的新位置和狀態，然後才能開始繪製。

渲染場景圖形

我們的遊戲狀態已經更新，現在是時候將它繪製到螢幕上了。渲染系統從場景圖形的根 (app.stage) 開始，並開始渲染每個物件及其子物件，直到所有物件都已繪製完畢。此程序不包含任何廢棄或其他智慧功能。如果畫面可見範圍以外有很多物件，您將需要調查將其停用作為最佳化方法。

影格率

有關幀數的注意事項。渲染迴圈無法無限快速執行 - 將項目繪製到螢幕需要一點時間。此外，通常不需要在每次螢幕更新時更新幀超過一次（一般為 60 fps，但較新的螢幕可支援 144fps 及更高）。最後，PixiJS 在 Chrome 或 Firefox 等網路瀏覽器內執行。瀏覽器本身必須針對各種內部作業所需的平衡，來服務所有已開啟的分頁。總結來說，判斷何時繪製一幀是一個複雜的問題。

在您想要調整該行為的狀況下，您可以在 Ticker 上設定 minFPS 和 maxFPS 屬性，來提供 PixiJS 提示，讓它了解您想要支援的滴答速度範圍。請注意，由於環境複雜，您的專案無法保證特定 FPS。請在您的滴答時間回呼中使用傳遞的 ticker.deltaTime 值，以調整任何動畫來確保播放順暢。

自訂渲染迴圈

我們剛剛介紹的是 Application 輔助類別現成的預設渲染迴圈。還有許多建立渲染迴圈的方法，這對於想要解決特定問題的高階使用者來說可能會有幫助。在您製作原型和學習 PixiJS 的同時，建議的方法是沿用 Application 所提供的系統。