コンテナ

コンテナ クラスは、その名前が示すように、子オブジェクトのセットをまとめて収集する単純な表示オブジェクトを提供します。しかし、オブジェクトのグループ化以外にも、コンテナにはいくつかの用途があります。

よく使用される属性

PixiJSでコンテンツをレイアウトおよびアニメーション化する際に最もよく使用される属性は、Containerクラスによって提供されます。

プロパティ	説明
position	X 座標と Y 座標はピクセル単位で指定され、親オブジェクトに対するオブジェクトの位置を変更します。object.x / object.y として直接アクセスすることもできます。
rotation	回転はラジアン単位で指定され、オブジェクトを時計回りに回転させます (0.0 - 2 * Math.PI)。
angle	angle は rotation のエイリアスで、ラジアンではなく度数で指定されます (0.0 - 360.0)。
pivot	オブジェクトが回転する中心点をピクセル単位で指定します。子オブジェクトの原点も設定します。
alpha	0.0 (完全に透明) から 1.0 (完全に不透明) までの不透明度。子オブジェクトに継承されます。
scale	スケールは 1.0 を 100% または実寸としてパーセントで指定され、x 軸と y 軸に独立して設定できます。
skew	skew は CSS の skew() 関数と同様にオブジェクトを x 軸と y 軸方向に変形し、ラジアン単位で指定されます。
visible	オブジェクトが表示されるかどうかをブール値で指定します。false の場合、オブジェクトは更新されますが、レンダリングされません。子オブジェクトには影響しません。
renderable	オブジェクトをレンダリングするかどうかを指定します。false の場合、オブジェクトは更新されますが、レンダリングされません。子オブジェクトには影響しません。

グループとしてのコンテナ

ほとんどすべてのタイプの表示オブジェクトは、コンテナからも派生しています。つまり、多くの場合、レンダリングするオブジェクトで親子階層を作成できます。

ただし、これは*しない*ことをお勧めします。スタンドアロンのコンテナオブジェクトはレンダリングのコストが**非常に**低く、レンダリング可能なオブジェクトを 1 つ以上含む適切なコンテナオブジェクトの階層を持つことで、レンダリング順序に柔軟性が生まれます。また、ツリーのブランチに追加のオブジェクトを追加する必要がある場合、アニメーションロジックを変更する必要がないため、コードの将来性を保証します。新しいオブジェクトを適切なコンテナにドロップするだけで、ロジックはコードを変更せずにコンテナを移動します。

そのため、コンテナの主な用途は、階層内のレンダリング可能なオブジェクトのグループとしての役割です。

コンテナのサンプルコードをご覧ください。

マスキング

コンテナオブジェクトのもう 1 つの一般的な用途は、マスクされたコンテンツのホストとしての役割です。「マスキング」とは、シーングラフの一部が特定の領域内でのみ表示されるようにする手法です。

ポップアップウィンドウを考えてみましょう。1 つ以上のスプライトで構成されたフレームがあり、フレーム外のコンテンツを非表示にするスクロール可能なコンテンツ領域があります。コンテナとマスクを使用すると、そのスクロール可能な領域を簡単に実装できます。コンテナを追加し、その `mask` プロパティを四角形を持つグラフィックオブジェクトに設定し、表示するテキスト、画像などのコンテンツをそのマスクされたコンテナの子として追加します。四角形のマスクを超えるコンテンツは、単に描画されません。コンテナの内容を移動して、必要に応じてスクロールします。

// Create the application helper and add its render target to the page
let app = new Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// Create window frame
let frame = new Graphics({
  x:320 - 104,
  y:180 - 104
})
.rect(0, 0, 208, 208)
.fill(0x666666)
.stroke({ color: 0xffffff, width: 4, alignment: 0 })

app.stage.addChild(frame);

// Create a graphics object to define our mask
let mask = new Graphics()
// Add the rectangular area to show
 .rect(0,0,200,200)
 .fill(0xffffff);

// Add container that will hold our masked content
let maskContainer = new Container();
// Set the mask to use our graphics object from above
maskContainer.mask = mask;
// Add the mask as a child, so that the mask is positioned relative to its parent
maskContainer.addChild(mask);
// Offset by the window's frame width
maskContainer.position.set(4,4);
// And add the container to the window!
frame.addChild(maskContainer);

// Create contents for the masked container
let text = new Text({
  text:'This text will scroll up and be masked, so you can see how masking works.  Lorem ipsum and all that.\n\n' +
  'You can put anything in the container and it will be masked!',
  style:{
    fontSize: 24,
    fill: 0x1010ff,
    wordWrap: true,
    wordWrapWidth: 180
  },
  x:10
});

maskContainer.addChild(text);

// Add a ticker callback to scroll the text up and down
let elapsed = 0.0;
app.ticker.add((ticker) => {
  // Update the text's y coordinate to scroll it
  elapsed += ticker.deltaTime;
  text.y = 10 + -100.0 + Math.cos(elapsed/50.0) * 100.0;
});

PixiJS でサポートされているマスクには 2 つのタイプがあります。

グラフィック オブジェクトを使用して、任意の形状のマスクを作成します。強力ですが、アンチエイリアスはサポートしていません。

スプライト: スプライト のアルファチャネルをマスクとして使用して、アンチエイリアスされたエッジを提供します。キャンバスレンダラーでは*サポートされていません*。

フィルタリング

コンテナオブジェクトのもう 1 つの一般的な用途は、フィルターされたコンテンツのホストとしての役割です。フィルターは、PixiJS がぼかしやディスプレイスメントなどのピクセルごとのエフェクトを実行できるようにする、WebGL/WebGPU のみで利用可能な高度な機能です。コンテナにフィルターを設定することにより、コンテナの内容がレンダリングされた後、コンテナが包含する画面の領域がフィルターによって処理されます。

以下は、PixiJS でデフォルトで利用可能なフィルターのリストです。ただし、さらに多くのフィルターを含むコミュニティリポジトリがあります。

フィルター	説明
AlphaFilter	`alpha` プロパティを設定するのと同じですが、子に個別に適用する代わりに、コンテナをフラット化します。
BlurFilter	ぼかしエフェクトを適用します。
ColorMatrixFilter	カラーマトリックスは、より複雑な色合いまたは色変換 (例: セピアトーン) を適用するための柔軟な方法です。
DisplacementFilter	ディスプレイスメントマップは、視覚的なオフセットピクセルを作成します。たとえば、波打つ水効果を作成します。
NoiseFilter	ランダムノイズを作成します (例: 粒子効果)。

内部的には、すぐに使える各フィルターは glsl (WebGL 用) と wgsl (WebGPU 用) の両方で記述されています。これは、すべてのフィルターが両方のレンダラーで動作する必要があることを意味します。

**重要:** フィルターは控えめに使用する必要があります。シーンで頻繁に使用すると、パフォーマンスが低下し、メモリ使用量が増加する可能性があります。