この記事ではGodot Engineでのガウスブラーの実装方法について紹介します。
目次
ブラーを適用するプロジェクトの作成
今回のブラーは画面全体に適用するため、シーン内のノードの並び順に依存する方法です。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-123.png)
今回使用する素材です。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-124.png)
![](https://2dgames.jp/wp-content/uploads/2021/11/image-125.png)
今回は画像サイズに合わせて 480×320 の解像度にするため、プロジェクト > プロジェクト設定
を開き、Display > Window
で 480 x 320 に変更しておきます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-126.png)
2Dシーン(Node2D)として、Mainノードを作成し、”bg.jpeg” と “ch.png” をドラッグ&ドロップで配置します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-127.png)
![](https://2dgames.jp/wp-content/uploads/2021/11/image-128.png)
chにスクリプトをアタッチして、以下のように記述します。
extends Node2D
var velocity = Vector2(200, 100)
func _ready():
pass
func _process(delta):
position += velocity * delta
if position.x < 0:
position.x = 0
velocity.x *= -1
if position.y < 0:
position.y = 0
velocity.y *= -1
if position.x > 480:
position.x = 480
velocity.x *= -1
if position.y > 320:
position.y = 320
velocity.y *= -1
実行するとたこ焼きが画面内をバウンドして動き回ります。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-6.gif)
“bg.jpeg” をドラッグ&ドロップして、シーンノードの最後に追加します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-129.png)
ノードの名前を “blur” に変更しておきます。
なお、ここでは背景画像を登録しましたが、画面サイズのテクスチャが必要なだけなので、適用したい範囲に合わせて好きな画像を使うことができます。
“blur”ノードを選択して、インスペクタから CanvasItem > Material > Material > [空]
をクリックして、「新規ShaderMaterial」を選択します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-130.png)
少し下にスクロールして、Shader > [空]
をクリックして「新規 Shader」を選択します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-131.png)
すると、エディタの中央下にシェーダーコードエディタが表示されます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-132-1024x426.png)
シェーダーには以下のように記述します。
shader_type canvas_item;
// ブラーの強さ.
uniform float blur_amount = 3.0;
void fragment() {
// スクリーンテクスチャにガウスぼかしをかける
COLOR = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount);
}
すると “blur” スプライトの範囲にブラーが適用されます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-133.png)
実行してブラーが適用されていることを確認します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-7.gif)
なお、このブラーは画面全体に適用しているので、ノードの順番を入れ替えることで適用されるノードを変えることができます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-8.gif)
“blur” ノードにスクリプトをアタッチして、ブラーの値をエディタから変更できるようにします。
tool
extends Sprite
export(float, 0.0, 5.0) var blur_amount
func _process(delta: float) -> void:
material.set_shader_param("blur_amount", blur_amount)
tool
宣言は シーンの読み直しが必要なので、Mainシーンを保存後にいったん閉じて、開き直します。
そして “blur” ノードを選択すると、インスペクタからブラーの強さをリアルタイムで設定できます。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-9.gif)
WorldEnvironmentでブラーをかける
シェーダーを書かなくても WorldEnvironment
を使うことで画面全体にぼかしを書けることができるようです。
まずは WorldEnvironment
を作成して……
![](https://2dgames.jp/wp-content/uploads/2021/11/image-134.png)
インスペクタから「新規 Environment」を追加します。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-135.png)
作成した Environmentの Background > Mode
を「Canvas」に変更
![](https://2dgames.jp/wp-content/uploads/2021/11/image-136.png)
Dof Near Blur > Enable
を有効にするとブラーが画面全体にかかります。
![](https://2dgames.jp/wp-content/uploads/2021/11/image-10.gif)
ブラーの強さは「Amount」の値で調整できます。
ちなみに「Dof」というのは「Depth of Field(被写界深度)」のことで、例えば背景画像にはぼかしをかけることで前面にいるキャラクターに注目させる手法となります。