ツクラーが始めるPixiJS v4入門 その6

はいどーもこんにちは。
今回はParticleContainerについて学んでみたいと思います。

ParticleContainerってなんやねん

ドキュメントによると、ParticleContainer内のスプライトは普通のコンテナよりも2倍から5倍の速さでレンダリングされるようです。
なぜこんなに早いのかと言えば、スプライトの位置がGPUで直接計算されるためです。
じゃあ全部これ使えばいいんじゃね? とか思っちゃうのですが、まあそうは問屋がおろさないのでしょうね。
見ていきます。

ParticleContainerの特徴

パーティクルコンテナは通常のコンテナと同じように宣言することができます。
すなわち

では通常のコンテナと何が違うのか?
まとめてみます。

・基本的ないくつかのプロパティしか持っていない(x,y,width,height,scale,pivot,alpha,visibleなど)
・パーティクルコンテナ内のスプライトは、自分自身に子要素を持つことができない
・Pixiの高度な視覚効果は使えない(フィルタやブレンドモードなど)
・パーティクルコンテナは1つのテクスチャしか使用できない

最初の3つはそのままですね。最後の「パーティクルコンテナは1つのテクスチャしか使用できない」についてはまだよくわかりませんでした。
普通のコンテナって複数のテクスチャ使えるんですかね?
使ったことないかも。

コンストラクタ

パーティクルコンテナのコンストラクタは引数を受け取ることができます。
すなわちこんな感じ。

第二引数のpropertiesは以下のようなオブジェクトを受け取ります。

position以外はデフォルトでfalseです。
すなわち、使用したいものがあれば自分でtrueを与えなければならないことを意味します。

uvsについても補足します。
これはパーティクルがアニメーションされている間、パーティクルが変更される場合にのみtrueにするようです。
いわゆるUVマッピングというやつですかね。
ただ僕はUVマッピングについてよく理解していないので、とりあえずスルーで……w

ちなみにbatchSizeとautoResizeについては公式で以下のように書かれています。

I’m not sure what exactly what those last two optional arguments, batchSize and autoResize, so if anyone knows, please us know in the Issues!

なんじゃそらという感じですが、使用しなくても普通は困らないと思っておきます。

使ってみる

というわけで使ってみます。
こんな感じのコードで。

普通のコンテナと同じように使えていると思います。
で、yellowSpriteとかでアルファ値を変えているのですが、本当はこれが反映されないはず……だったのですが、なんか普通に変更されています。
falseを与えても変更されました(回転も同様)。
何か違うもののことなんですかね……。
フィルタとかですかね?
よくわかりませんでした。

終わりに

パーティクルコンテナについては公式チュートリアルだけではいまいちよくわかりませんでした。
もう少し調べてみたいと思います。
ほなそんな感じでまた。

フォローする