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

はいどーもこんばんはですよ。
今回はSpriteのグループ化について学びたいと思います。

Spriteのグループ化とは

あるスプライトとあるスプライトをまとめておきたい場合があります。
例えばツクールMVだとメッセージウィンドウなどに使われているWindowオブジェクトは、複数のSpriteを組み合わせて作成されています。
この「複数のSprite」がもし完全にバラバラに動いていると、何かと面倒なことは容易に想像できるかと思います(例えば中身の座標を変更しても枠の座標は変更されていないまま、とか)。
というわけでPixiJSにはSpriteをまとめる方法が用意されており、それがContainerです。

Containerとは

SpriteとContainerの関係については「ウィンドウの下に画像を表示する方法【ツクールMV】」でも書きました。
PixiJSにおいてルートContainerはapp.stageのstageです。
この中に今までも複数のSpriteを追加していきましたね。
これと同じことをContainerクラスを使えばできる、ということです。
詳しい使い方については僕自信がすでにわりと知っているので、ここではサラッとだけ眺めていきます。

子要素を取得する

コンテナには子要素が複数入っていることが普通です。
そこでコンテナのchildrenプロパティを使用することで、配列として子要素を全て得ることができます。

コンテナを移動させる

コンテナはスプライトと同じように移動させることができます。
すなわちposition.set(x, y)ですね。
移動させると、全ての子要素が一緒に移動します。
また、幅と高さもきちんと持っています。

幅と高さ

コンテナはスプライトと同じように幅と高さを持っています。
すなわちwidthプロパティとheightプロパティで取得可能です。
もしもこのプロパティの値を変更すると、コンテナの中の小要素は親要素に引っ張られてサイズが変更されます。

一つの親にのみ属する

SpriteやContainerはDisplayObjectを継承しています。
このDisplayObjectは一度に一つの親にのみ属します。
だから例えばすでに別の親に所属しているSpriteを別の親にaddChildすると、PixiJSが自動で現在の親から該当するSpriteを削除し、新たに別の親へaddChildします。

LocalとGlobalな位置

コンテナの中にSpriteを入れると、そのSpriteの座標はコンテナの左上を基準とした数値になります。
また、Globalな位置とは、要はstageの左上を基準にした座標を意味します。
もしもコンテナの中のSpriteのグローバルな位置を知りたい場合、toGlobalメソッドを使用できます。
ですがこの方法はわりと不便なので、PixiJSではgetGlobalPositionメソッドを使うことを推奨しているようです。
両者の使い方を示します。

また、これと似たメソッドにtoLocalというものがあります。
これは二つのSpriteの距離を調べるのに役立ちます。
使い方としてはこんな感じ。

終わりに

今回はSpriteのグループ化もといContainerとの関係を見ていきました。
ここはしっかり理解しておかないと困る部分だと思ったので、僕も以前にきっちり勉強しておきました。

ほなそんな感じでまた。

フォローする