本文へスキップ
バージョン: v8.x

パフォーマンスのヒント

一般​

  • 必要な場合にのみ最適化してください！PixiJSは、最初からかなりの量のコンテンツを処理できます。
  • シーンの複雑さに注意してください。オブジェクトを追加するほど、処理速度が遅くなります。
  • 順番も重要です。たとえば、スプライト/グラフィック/スプライト/グラフィックは、スプライト/スプライト/グラフィック/グラフィックよりも遅くなります。
  • 一部の古いモバイルデバイスでは、処理速度が少し遅くなります。レンダラーまたはアプリケーションに`useContextAlpha: false`と`antialias: false`のオプションを渡すと、パフォーマンスが向上する可能性があります。
  • カリングはデフォルトで無効になっています。アプリケーションレベルでこれを行う方が良い場合や、オブジェクトを`cullable = true`に設定する場合が多いからです。GPUバウンドの場合はパフォーマンスが向上しますが、CPUバウンドの場合はパフォーマンスが低下します。

スプライト​

  • 可能な限りスプライトシートを使用し、テクスチャの総数を最小限に抑えてください。
  • スプライトは、最大16個の異なるテクスチャでバッチ処理できます（ハードウェアに依存）。
  • これはコンテンツをレンダリングする最速の方法です。
  • 古いデバイスでは、解像度の低い小さなテクスチャを使用してください。
  • 50％縮小されたスプライトシートに`@0.5x.png`という拡張子を追加すると、PixiJSが自動的に視覚的に2倍にします。
  • 描画順序が重要になる場合があります。

グラフィック​

  • グラフィックオブジェクトは、常に変更されない場合（トランスフォーム、アルファ、またはティントを除く！）が最も高速です。
  • グラフィックオブジェクトは、特定のサイズ（100ポイント以下）以下の場合にバッチ処理されます。
  • 小さなグラフィックオブジェクトは、スプライト（長方形、三角形）と同じくらい高速です。
  • 何百もの複雑なグラフィックオブジェクトを使用すると速度が遅くなる可能性があります。この場合は、スプライトを使用してください（テクスチャを作成できます）。

テクスチャ​

  • テクスチャは、テクスチャガベージコレクタによって自動的に管理されます。
  • `texture.destroy()`を使用して、自分で管理することもできます。
  • 一度に複数を破棄する予定がある場合は、フリーズを防ぐために破棄にランダムな遅延を追加してください。
  • 自分で多くのテクスチャを削除する予定がある場合は、テクスチャの破棄を遅延させてください。

テキスト​

  • 毎フレーム変更するとコストが高くなるため避けてください（毎回キャンバスに描画してからGPUにアップロードするため）。
  • 動的に変化するテキストには、ビットマップテキストの方がパフォーマンスがはるかに優れています。
  • テキストの解像度はレンダラーの解像度と一致します。`resolution`プロパティを設定して自分で解像度を下げると、メモリ消費量を削減できます。

マスク​

  • マスクは、数が多すぎるとコストが高くなる可能性があります。たとえば、何百ものマスクを使用すると、処理速度が大幅に低下します。
  • 軸に沿った長方形マスクが最も高速です（シザー矩形を使用するため）。
  • グラフィックマスクは2番目に高速です（ステンシルバッファを使用するため）。
  • スプライトマスクは3番目に高速です（フィルターを使用します）。非常にコストが高いため、シーンで多く使用しないでください！

フィルター​

  • メモリを解放する：`container.filters = null`
  • サイズがわかっている場合：`container.filterArea = new Rectangle(x,y,w,h)`。これにより、オブジェクトの測定が不要になるため、速度が向上する可能性があります。
  • フィルターはコストが高く、多用すると速度が低下し始めます！

ブレンドモード​

  • 異なるブレンドモードを使用すると、バッチが中断され（最適化が解除され）、パフォーマンスが低下します。
  • ScreenSprite / NormalSprite / ScreenSprite / NormalSpriteは4回の描画呼び出しになります。
  • ScreenSprite / ScreenSprite / NormalSprite / NormalSpriteは2回の描画呼び出しになります。

イベント​

  • オブジェクトにインタラクティブな子がない場合は、`interactiveChildren = false`を使用してください。これにより、イベントシステムはオブジェクト内をクロールするのを回避できます。
  • 上記のように`hitArea = new Rectangle(x,y,w,h)`を設定すると、イベントシステムがオブジェクト内をクロールするのを防ぐことができます。