Godot4でSpriteのマスクをする方法

Godot4でSpriteのマスクをする方法

はじめに

ゲームを作っていると「スプライトの端をぼかしたい」とか「スプライトを複雑な形に切り抜きたい」ということがあると思います。そこで利用できるのが「マスク機能」です。

Godot4でSpriteのマスクをするための方法を探していたところ
https://2dgames.jp/godot-mask/　このサイトを見かけましたが上手くいかなかったので別の方法を探しました。
結果以下のtweetにたどり着き真似をすると上手くいったので備忘録として記録しておきます(ただでさえGodot4の日本語情報は少ないので)。

I noticed you can already kinda do this if you put the parent to "Clip+Draw" and the children to "Clip Only" pic.twitter.com/0pUBg03emN

— Sander Vanhove (@SanderVhove) November 17, 2022

マスク画像

今回は分かりやすくこのような部分的にグラデーション？のかかったマスク画像を例に使ってみようと思います。

最終的にはこの白い部分に重なっている所のみ表示され、グラデーションのかかっている部分ではグラデーションがかかって表示されます。

素材の説明

• mask.png
  • 上のマスク画像のことアルファチャンネルに応じてマスクされる。
• image.svg
  • マスクを適用される画像

素材の配置

画像のようにマスク画像を設定したスプライトの子要素としてマスクを適用したい画像のスプライトを配置します。

設定

マスク

maskスプライトのCanvasItemのClip ChildrenをClip + Drawに設定します。

画像

imageスプライトのCanvasItemのClip ChildrenをClip Onlyに設定します。

結果

最終的にはこんな感じに表示されます。