PixiJS v8 は、新しい ParticleContainer のリリースにより、スピードを次のレベルに引き上げました。この新機能は、10万以上の要素を難なくレンダリングできる、驚異的なパフォーマンス向上をもたらします。画面上に大量の要素を配置する必要がある場合は、きっとご満足いただけるでしょう！
🚀 新しい ParticleContainer の設計
PixiJS v8 の重要な違いは、ParticleContainer がスプライトを扱わなくなったことです。代わりに、軽量な **パーティクル** を扱うようになりました。パーティクルは、テクスチャ、位置、アンカー、スケール、回転、アルファ、色など、スプライトと多くのプロパティを共有していますが、不要なオーバーヘッドを削減しています。その結果、純粋でシンプルな **スピード** が実現しました。
どのくらい速いか？私のマシン（Macbook Pro M3）での結果を見てください。
- スプライト + コンテナ: 200,000個を60fpsで表示。
- パーティクル + ParticleContainer: 1,000,000個を60fpsで表示！
そうです、画面上に _100万匹_ のウサギがいて、正直なところ、その時点での主なボトルネックはレンダリングではなく、跳ね返る動きの背後にあるロジックでした！ぜひ試してみてください。
重要なのは、**大量の要素** を驚くほど高速にレンダリングできるようになったことです。これにより、PixiJS v8 は、高性能ゲームや視覚的に集中的なプロジェクトに最適な選択肢となります。そして、これは v7 のパーティクルコンテナよりも **3倍以上** 高速です！
新しいパーティクルコンテナへのコードの移行方法の詳細については、移行ガイド をご確認ください。
スピードの秘密：静的プロパティと動的プロパティ
このパフォーマンスの獣を最大限に活用するには、**静的** プロパティと **動的** プロパティを理解することが不可欠です。PixiJS では、どのプロパティを毎フレーム更新（動的）するか、どのプロパティを常に更新する必要がないか（静的）を完全に制御できます。それらの仕組みは次のとおりです。
- 静的プロパティ: 一度設定すると、明示的に変更しない限り、同じ状態を保ちます。静的な状態を維持することで、計算負荷が軽減され、レンダリングが高速化されます。これは、あなたが更新する責任があります :)
- 動的プロパティ: これらは、毎フレーム再計算され、GPUにアップロードされます。
デフォルトでは、**位置のみ** が動的ですが、必要に応じて他のプロパティも設定できます。動的プロパティが少ないほど、レンダリングは高速になります！
PixiJS v8 ParticleContainer の使用方法
開始方法の簡単な例を見ていきましょう。
import { ParticleContainer, Particle, Texture } from 'pixi.js';
// Create a particle container with default options
const container = new ParticleContainer({
// this is the default, but we show it here for clarity
dynamicProperties: {
position: true, // Allow dynamic position changes (default)
scale: false, // Static scale for extra performance
rotation: false, // Static rotation
color: false // Static color
}
});
// Add particles
const texture = Texture.from('path/to/bunny.png');
for (let i = 0; i < 100000; ++i) {
let particle = new Particle({
texture,
x: Math.random() * 800,
y: Math.random() * 600,
});
container.addParticle(particle);
}
// Add container to the Pixi stage
app.stage.addChild(container);
この例では、ParticleContainer を作成し、可能な場合はプロパティを静的に設定し、10万個のパーティクルを生成します。共有テクスチャ（スプライトシート）を使用することで、すべてのパーティクルが同じグラフィカルアセットを共有するようにし、レンダリングをさらに効率化します。
ParticleContainer を使用する理由
ParticleContainer は、画面上に **膨大な数** の視覚要素が必要な場合に、特にそれらをリアルタイムで移動およびインタラクションさせたい場合に威力を発揮します。パーティクルエフェクト、キャラクターの群れ、抽象的なアートインスタレーションを作成する場合でも、PixiJS v8 が対応します。静的プロパティと動的プロパティのシステムにより、パフォーマンスを細かく制御できるため、柔軟性とスピードのバランスを微調整できます。
これは基本的に、異なるテクスチャ（スプライトシートを介して）を許可し、開発者がJSを介してパーティクルを操作できるようにし、動きをGPUに移動させる必要がない（これはより高速になる可能性がありますが、より複雑で柔軟性が低い）ようにしながら、実現できる最速の方法です。そのため、パーティクルと呼んでいますが、従来のパーティクルと古典的なスプライトの中間のようなものです。
これは、ゲーム、インタラクティブアプリ、大量のデータ視覚化など、フレームレートとレンダリング量が重要なプロジェクトに最適です。パーティクルの動的プロパティを制御することで、アプリケーションのパフォーマンスをニーズに合わせて最適化できます。
次のステップ
新しい ParticleContainer はゲームチェンジャーですが、改善の余地はまだあります。1つは、プロパティの静的アップロードをさらに最適化する余地があります（上記の例では、ウサギを追加するときに速度が遅いことに気付くかもしれませんが、安定すると速度が上がります）。開発者がバッチから属性を追加/削除して、さらに高速化したり、柔軟性とカスタマイズ性を高めたりできるように、パーティクルがどのようにバッチ処理されるかを公開する予定です。しかし、今のところ、これは素晴らしい出発点であり、新しい ParticleContainer を楽しんでいただければ幸いです！
🎉 結論
PixiJS v8 の ParticleContainer は、大規模なレンダリングにおいてゲームチェンジャーです。フルスピードで **数百万個** のパーティクルをプッシュできる機能により、ゲーム開発者、アニメーター、クリエイティブコーダーにとって、可能性の世界が広がります。新しいAPIを試して、あなたのビジュアルがどれほど速く飛べるかをご覧ください！
試してみる準備はできましたか？PixiJS v8 で新しい ParticleContainer を試して、プロジェクトのパフォーマンスの限界を押し広げてください！
🌐 繋がりを保つ
最新情報については、Doormat23 と PixiJS をソーシャルメディアでフォローしてください。リアルタイムなディスカッションとサポートについては、Discord で活気のあるコミュニティに参加してください。