Godotで画面遷移する際にトランジション演出のアニメーションを追加したので、その手順を備忘録として残しておく。
参考：https://2dgames.jp/godot-transition/
参考：https://scrapbox.io/kidaaam-92022284/Godot_%E3%81%A7_Transition_%E3%82%92%E8%87%AA%E4%BD%9C%E3%81%99%E3%82%8B
手順
手順は下記の通り。
1.トランジション演出用のパネルノード追加
2.追加したパネルノードでシェーダーマテリアル追加
3.シェーダーコード記述
4.マスク用画像を読み込む
5.AnimationPlayerで作成したシェーダーのトラックを追加
トランジション演出用のパネルノード追加
シェーダーを実装するためのPanelノードを追加。今回はTransitionPanelとした。
シーンの中にButtonなど、操作に必要なノードがある場合、そのノードより下のレイヤー（GodotUI上だと上）にないと操作できないので注意。
パネルノードにシェーダーマテリアルを追加
インスペクターの「Canvas Item」の「Material」を押下、「Material」に「新規ShaderMaterial」を追加。
シェーダースクリプトの記述
「Shader」に「New Shader」を追加する。
Shader作成ダイアログが出るので、デフォルトの設定のまま作成をクリック。
シェーダーエディターがウィンドウの下部に出るので、そちらに下記のコードを記述。
shader_type canvas_item;
render_mode unshaded;
uniform float SoftRange = 0.2; // 境目を半透明にする幅
uniform float Value : hint_range(0.0, 1.0); // フェード値
uniform sampler2D Mask; // ルール画像
void vertex() {
// Called for every vertex the material is visible on.
}
void fragment() {
// 基準値を計算
float rangedValue = Value * (SoftRange * 2.0 + 1.0) - SoftRange;
// 最小値と最大値を決める
float minValue = rangedValue - SoftRange;
float maxValue = rangedValue + SoftRange;
// ルール画像の濃度を取得
float maskValue = texture(Mask, UV).r;
// smoothstep(エルミート補完)で透過値を決定
float alpha = smoothstep(minValue, maxValue, maskValue);
// 黒フェードするよう色を設定
COLOR = vec4(vec3(0.0), alpha);
}
上記のコードを記述すると、UIにパラメータが出てくるので、Mask用の画像を読み込む。
※ちなみにコードとMaskの設定前にアニメーションのトラックを作成すると、あとからコードとMaskを設定しても反映されない。
Mask用画像はこちらからお借りしました→https://4you.bz/rule1080p
AnimationPlayerで作成したシェーダーのトラックを追加
アニメーションウィンドウから「トラックを追加」をクリックし、「Property Track」からシェーダー用パネルを選択しシェーダー値（今回でいうValue）を選択するか、インスペクターの同プロパティの右にある鍵マークをクリック（こちらの方が断然ラク）しトラックを追加。追加したトラックで右クリックし「Insert Key」でkeyを追加する。
これでトランジション演出のアニメが追加できた。