Godot: Clip Children で 2D要素をマスク

Godot 4.0 で Godot: CanvasItemに追加された Clip Children プロパティについて

Godot 4.0 stable で確認

enum ClipChildrenMode:

ClipChildrenMode CLIP_CHILDREN_DISABLED = 0

Child draws over parent and is not clipped.

デフォルトはこれで、clip しない

ClipChildrenMode CLIP_CHILDREN_ONLY = 1

Parent is used for the purposes of clipping only. Child is clipped to the parent's visible area, parent is not drawn.

親ノードは、子ノードをクリップするだけの挙動をする。

ClipChildrenMode CLIP_CHILDREN_AND_DRAW = 2

Parent is used for clipping child, but parent is also drawn underneath child as normal before clipping child to its visible area.

親ノードは子ノードをクリップしつつ描画もされる。

ClipChildrenMode CLIP_CHILDREN_MAX = 3

Represents the size of the ClipChildrenMode enum.

インスペクタ上ではこれに設定できなかったので、謎

実際に試してみる

以下の親子構造のノードとする

https://gyazo.com/1246f640729bbca4f6b7e592cc7c3dea

赤ノードの子に、青ノード

緑ノードは独立している

このとき、緑ノードのClip Children プロパティを変更しても、緑ノードの画像だけにしか影響が無い

https://gyazo.com/2158d55747655d80b7d623b6305e0f12

緑ノードを Clip Only に設定

末端である青ノードも同じ挙動になる

https://gyazo.com/a6acc0d5285df452b7bdad325d0b75ba

青ノードを Clip Only に設定

親である赤ノードの Clip Children を変更すると、その子ノードの青ノードに影響がある

https://gyazo.com/0cf3feb916205749bed7014ce852840c

赤ノードを Clip Onlyに設定

赤ノードの描画範囲だけで、子ノードの青ノードが描画される。赤ノードがMaskとして動いている

https://gyazo.com/3fe656502f2c1771fcbfd8c5b21f5028

赤ノードを Clip + Draw に設定

赤ノードが描画されつつ、その子ノードはその赤ノードの範囲で Mask されている

これを踏まえると、GDQuest の動画で紹介されていた画像が理解できる

https://gyazo.com/72620263bf707ba32591386d1ece2f5b