メインコンテンツまでスキップ

マスク

マスクは、ヒエラルキーでその下にあるエレメントをクリップし、マスクの内側にだけ描画されるようにします。スクロールビューはマスクを使ってビューポートの外側のコンテンツを隠します。マスクは、円形のアバター、丸窓、内容を少しずつ見せる演出にも使えます。

3つのマスク：行のリストを切り抜く矩形、正方形の画像を円形のアバターに切り抜く円、そして矩形の中にある円（そのコンテンツは2つが重なる部分にだけ表示される）。薄く表示された複製が、各マスクで切り取られる部分を示している

マスクの作成​

どのイメージエレメントもマスクにできます。maskプロパティをオンにし、クリップしたいエレメントをその下に配置します。

const viewport = new pc.Entity('viewport');
viewport.addComponent('element', {
    type: pc.ELEMENTTYPE_IMAGE,
    anchor: [0.5, 0.5, 0.5, 0.5],
    pivot: [0.5, 0.5],
    width: 300,
    height: 200,
    mask: true
});
screen.addChild(viewport);

// ビューポートの下にある400 × 400のイメージは、ビューポートの300 × 200の矩形の内側にだけ描画される
const content = new pc.Entity('content');
content.addComponent('element', {
    type: pc.ELEMENTTYPE_IMAGE,
    anchor: [0.5, 0.5, 0.5, 0.5],
    pivot: [0.5, 0.5],
    width: 400,
    height: 400,
    color: new pc.Color(0.23, 0.55, 1)
});
viewport.addChild(content);

マスク自体は描画されません。マスクのテクスチャと不透明度は子が表示される場所を決めるだけで、色は何の効果もありません。マスクした領域に背景を付けるには、マスクの最初の子を、その領域を埋めるイメージエレメントにします。

形状マスク​

テクスチャもスプライトもないマスクは、エレメントの矩形になります。テクスチャかスプライトがある場合、マスクはテクスチャの形状になり、子はテクスチャが完全に不透明な部分にだけ表示されます。部分的に透明なピクセルは、完全に透明なピクセルと同じように子を隠します。そのため、マスクのエッジは常に硬くなり、エッジがソフトなテクスチャではマスクが少し小さくなります。

同じ理由で、マスクのopacityは1のままにしておく必要があります。1未満にすると、マスクのどのピクセルも完全には不透明でなくなるため、マスクはすべての子を隠してしまいます。

入れ子のマスク​

マスクは別のマスクの下に置くことができます。その子は2つのマスクが重なる部分にだけ描画されるため、スクロールビューの中のスクロールビューや、スクロールするリストの中の円形アイコンは、両方のマスクでクリップされます。

マスクとレイヤー​

マスクはレイヤーの描画中にステンシルバッファを使って機能するため、マスクとそれがクリップするエレメントは同じレイヤーに置く必要があります。別のレイヤーにある子（例えば、深度付きで描画するためにWorldレイヤーに移した子）は、まったく描画されません。

ステンシルバッファは、デフォルトでキャンバスに含まれています。stencil: falseを指定してグラフィックスデバイスを自分で作成した場合、マスクは機能しません。

マスクと入力​

マスクは描画だけでなく入力もクリップします。マスクの中のエレメントはマスクの矩形の内側でのみ入力を受け取るため、リストのうちスクロールして見えなくなった部分はクリックできません。形状マスクは、入力を形状ではなく矩形でクリップします。

コスト​

マスクごとにドローコールが2つ追加されます。1つは子を描画する前にマスクの形状をステンシルバッファに書き込み、もう1つは子を描画した後にそれを取り除きます。また、マスクの中のエレメントは、マスクの外のエレメントとは別にバッチングされます。マスクはすべてのパネルに使うのではなく、スクロールビューのビューポートなど、必要な場所で使用してください。

Masking

関連情報​