レンダーループ

システムの主要部分を理解したところで、これらの部分がどのように連携してプロジェクトを画面に表示するのかを見てみましょう。Webページとは異なり、PixiJSは常に自身を更新し、繰り返し再描画しています。オブジェクトを更新すると、PixiJSがそれらを画面にレンダリングし、そのプロセスが繰り返されます。このサイクルをレンダーループと呼びます。

PixiJSプロジェクトの大部分は、この更新+レンダリングサイクルに含まれています。更新をコーディングし、PixiJSがレンダリングを処理します。

レンダーループの各フレームで何が起こるかを順を追って見ていきましょう。主な手順は3つあります。

Tickerコールバックの実行

最初の手順は、最後のフレームから経過した時間を計算し、その時間差とともにApplicationオブジェクトのTickerコールバックを呼び出すことです。これにより、プロジェクトのコードは、レンダリングの準備として、ステージ上のスプライトなどをアニメーション化および更新できます。

シーングラフの更新

シーングラフとは何か、そしてそれが何でできているのかについては、次のガイドで詳しく説明しますが、ここでは、描画しているもの（スプライト、テキストなど）が含まれており、これらのオブジェクトがツリーのような階層構造になっていることだけを知っておけば十分です。移動、回転などによってゲームオブジェクトを更新した後、PixiJSは描画を開始する前に、シーン内のすべてのオブジェクトの新しい位置と状態を計算する必要があります。

シーングラフのレンダリング

ゲームの状態が更新されたので、画面に描画します。レンダリングシステムは、シーングラフのルート（`app.stage`）から開始し、すべてのオブジェクトが描画されるまで、各オブジェクトとその子をレンダリングします。このプロセスには、カリングなどの巧妙な処理は組み込まれていません。ステージの可視部分の外側に多数のオブジェクトがある場合は、最適化としてそれらを無効にすることを検討してください。

フレームレート

フレームレートに関する注意。レンダーループは無限に高速に実行することはできません。画面に描画するには時間がかかります。さらに、一般的に、画面の更新ごとに1回以上フレームを更新する必要はありません（一般的には60fpsですが、新しいモニターは144fps以上をサポートできます）。最後に、PixiJSはChromeやFirefoxなどのWebブラウザのコンテキストで実行されます。ブラウザ自体は、さまざまな内部操作のニーズと、開いているタブの処理のバランスを取る必要があります。つまり、フレームをいつ描画するかを決定することは複雑な問題です。

その動作を調整したい場合は、Tickerの`minFPS`属性と`maxFPS`属性を設定して、サポートしたいTick速度の範囲をPixiJSにヒントとして与えることができます。ただし、複雑な環境のため、プロジェクトで特定のFPSを*保証*することはできません。Tickerコールバックで渡された`ticker.deltaTime`値を使用してアニメーションをスケーリングし、スムーズな再生を確保してください。

カスタムレンダーループ

これまでに説明したのは、Applicationヘルパークラスによってデフォルトで提供されるレンダーループです。特定の問題を解決しようとする上級ユーザーには、レンダーループを作成する他の多くの方法があります。PixiJSのプロトタイピングと学習中は、Applicationが提供するシステムを使用することをお勧めします。