トランジションの実装

素材画像

こちらの背景画像を使います。名前は “bg.png” で保存。

bg.zip ダウンロード

画像を登録

プロジェクトに画像を登録して、ドラッグ＆ドロップで配置します。

シェーダーの作成

作成した bgノード(Sprite)のインスペクタから、CanvasItem > Material > Material > [空]をクリックして、「新規 ShaderMaterial」を選択します。

作成した ShaderMaterialをクリックして、Shader > [空] をクリックして「新規 Shader」を選びます。

シェーダーコードは以下のように記述します。

shader_type canvas_item;

uniform float SoftRange = 0.2;              // 境目を半透明にする幅
uniform float Value : hint_range(0.0, 1.0); // フェード値
uniform sampler2D Mask;                     // ルール画像

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);
    // 割り当てたテクスチャを使うように修正
    vec4 color = texture(TEXTURE, UV);
    COLOR = vec4(color.rgb, alpha);
}

もとのコードでは黒フェードする前提だったので、Textureに割り当てた画像そのものを透過するようにしてみました。

スクリプトの作成

このシェーダーを呼び出すスクリプトを作成します。bgノードにスクリプトをアタッチして以下のように記述します。

tool
extends Sprite

# 項目を半透明にする幅
export(float) var soft_range = 0.02
# フェード値
export(float, 0.0, 1.0) var fade_value = 0.0
# ルール画像
export(Texture) var mask_img

func _process(delta: float) -> void:
    # シェーダーパラメータを設定
    material.set_shader_param("SoftRange", soft_range)
    material.set_shader_param("Value", fade_value)
    material.set_shader_param("Mask", mask_img)

tool宣言は、シーンの再読み込みが必要なので、シーンを保存して開き直します。
すると、bgノードのインスペクタに Script Variablesが追加されています。