【Godot】ディゾルブエフェクトの作り方

# 概要
この記事では、Godot Engine でディゾルブエフェクトの作り方を紹介します。

ディゾルブ(dissolve)とは「溶ける」という意味で、部分的に消えていくようなエフェクトとなります。
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/2fa840c6-0874-1fa4-1e19-e73931f06579.gif)

# シンプルなディゾルブ
まずはシンプルなディゾルブを実装します。
以下の画像を "bg.jpeg" として保存してプロジェクトに追加します。
![bg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/1b007061-df24-1d24-563e-c7c2656cb073.jpeg)

そして画像を `Sprite` として登録し、`CanvasItem > Material > Material > [空]` をクリックして「新規 ShaderMaterial」を選びます。
![Godot_Engine_-_TestDissolve_-_Main_tscn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/1aaa3311-11ec-f40e-f36b-aaac135cb501.png)
そして、`Shader > [空]` をクリックして「新規 Shader」を選んでシェーダーコーを有効にします。
![Godot_Engine_-_TestDissolve_-_Main_tscn____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/8ba18f03-4af1-d5d2-ea70-952579945887.png)

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

```glsl
shader_type canvas_item;

// ノイズテクスチャ
uniform sampler2D noise_img : hint_albedo;

// ディゾルブのかかり具合
uniform float dissolve_value : hint_range(0, 1);

void fragment() {
	// 現在のテクスチャの色を取得
    vec4 main_texture = texture(TEXTURE, UV);
	
	// ノイズテクスチャを取得
    vec4 noise_texture = texture(noise_img, UV);
	
	// ノイズテクスチャの色でアルファ値を決定
	// 0.0〜1.99の範囲におさめて floor() で 0.0〜1.0にする
    main_texture.a *= floor(dissolve_value + min(0.99, noise_texture.r));

	// 色を反映
    COLOR = main_texture;
}
```

ただ、パラメータがない状態だと何も表示されなくなっています。

bgノード(`Sprite`) にスクリプトをアタッチして以下のように記述します。

```gd:bg.gd
tool
extends Sprite

# ノイズテクスチャ
export(Texture) var noise_img;
# ディゾルブの値
export(float, 0, 1) var dissolve; 

func _process(delta):
	# シェーダーパラメータに反映
	material.set_shader_param("noise_img", noise_img)
	material.set_shader_param("dissolve_value", dissolve)
```

tool宣言を反映させるために、いったんシーンを保存して開き直します。

開き直すと、bgノード(`Sprite`)に `Script Variables` が追加されているので、そこから `Noise Img > [空]` をクリックして、「新規 Noise Texture」を選びます。

![Godot_Engine_-_TestDissolve_-_Main_tscn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/95c6bf63-087c-7b42-dd76-94e1545bcd2b.png) 

作成された Noise Texture をクリック、さらに `Noise > [空]`をクリックして、「新規 OpenSimplexNoise」を選びます。
![Godot_Engine_-_TestDissolve_-_Main_tscn____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/eb595190-fbd6-0f82-ec18-977c10c9b3fb.png)

そしてノイズパラメータの `Period` を「256」に変更しておきます。
![Godot_Engine_-_TestDissolve_-_Main_tscn____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/66ee295c-a578-3884-37c3-a2313e18c7a3.png)

これでノイズの設定は完了です。
エディタの「Dissolve」パラメータを変化させて動作を確認します。
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/2fa840c6-0874-1fa4-1e19-e73931f06579.gif)

なお、ノイズテクスチャがどのような画像になっているのを確認する場合は、`Texture Rect`などに Noise Textureを設定するとわかりやすいかと思います。
![Godot_Engine_-_TestDissolve_-_Main_tscn____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/f86f8e6d-dec1-b1f5-208d-11c44c449d69.png)

# テレポートエフェクト
ディゾルブの応用としてテレポートエフェクトを作成してみます。
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/fef2c76e-3b33-e11b-c82d-99833e4caa7c.gif)

立ち絵素材は「立ち絵素材　わたおきば」様よりお借りました

* [立ち絵素材　わたおきば](https://wataokiba.net)

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

```glsl
/*
Shader from Godot Shaders - the free shader library.
godotshaders.com/shader/teleport-effect

This shader is under CC0 lincense. Feel free to use, improve and 
change this shader according to your needs and consider sharing 
the modified result on godotshaders.com.
*/

shader_type canvas_item;

// ディゾルブのかかり具合
uniform float progress : hint_range(0.0, 1.0);

// ノイズの抽出範囲
uniform float noise_desnity : hint_range(0.0, 60.0);

// 色の残るサイズ
uniform float beam_size : hint_range(0.01, 0.15);
// 残る色
uniform vec4 color : hint_color = vec4(0.0, 1.02, 1.2, 1.0);

// We are generating our own noise here. You could experiment with the 
// built in SimplexNoise or your own noise texture for other effects.
vec2 random(vec2 uv){
    uv = vec2( dot(uv, vec2(127.1,311.7) ),
               dot(uv, vec2(269.5,183.3) ) );
    return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123);
}

float noise(vec2 uv) {
    vec2 uv_index = floor(uv);
    vec2 uv_fract = fract(uv);

    vec2 blur = smoothstep(0.0, 1.0, uv_fract);

    return mix( mix( dot( random(uv_index + vec2(0.0,0.0) ), uv_fract - vec2(0.0,0.0) ),
                     dot( random(uv_index + vec2(1.0,0.0) ), uv_fract - vec2(1.0,0.0) ), blur.x),
                mix( dot( random(uv_index + vec2(0.0,1.0) ), uv_fract - vec2(0.0,1.0) ),
                     dot( random(uv_index + vec2(1.0,1.0) ), uv_fract - vec2(1.0,1.0) ), blur.x), blur.y) * 0.5 + 0.5;
}

void fragment()
{
	vec4 tex = texture(TEXTURE, UV);
	
	float noise = noise(UV * noise_desnity) * UV.y;
	
	float d1 = step(progress, noise);
	float d2 = step(progress - beam_size, noise);
	
	vec3 beam = vec3(d2 - d1) * color.rgb;
	
	tex.rgb += beam;
	tex.a *= d2;
	
	COLOR = tex;
}
```

シェーダーコードは以下からお借りしたものです。

* [Teleport effect - Godot Shader](https://godotshaders.com/shader/teleport-effect/)

このままでもよい感じなのですが、より良くするためにグロー効果を追加します。
`WorldEnvironment` を追加します。
![Godot_Engine_-_TestDissolve_-_Main_tscn____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/3dbadbf9-aa82-f9c8-afa2-d540c43f02dc.png)
インスペクタから `Environment > [空]` をクリックして「新規 Environment」を追加します。
![Godot_Engine_-_TestDissolve_-_Main_tscn____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/8621a476-0c09-3c3b-8675-9ecd4c8ce65a.png)

作成したEnvironmentをクリックして、`Background > Mode`を 「Canvas」に設定します。
![Godot_Engine_-_TestDissolve_-_Main_tscn____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/5f9a85ff-a1a2-7d9d-63d4-3c4297b13a5b.png)

さらに、`Glow > Enabled` にチェックを入れて、`Intensity` を「0.2」、`Blend Mode`を「Addictive」に変更します。

するとGlow効果が適用されて、光り輝く感じになります。
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/5231dbbe-b233-970e-1c63-31ce31946585.gif)

# 参考

* [シンプルなディゾルブシェーダーの作成方法 -- Godot Engine Q&A](https://godotengine.org/qa/27416/how-to-create-a-simple-dissolve-shader)
* [Teleport effect - Godot Shader](https://godotshaders.com/shader/teleport-effect/)
* [godot - shaders/2D Dissolve](https://github.com/ceceppa/godot-shaders/blob/master/Dissolve/2D%20Dissolve.tscn)