チュートリアル: 表現強化コース #3 シェーダーを使ってみよう。

ACTION GAME MAKER OfficialTutorial/チュートリアル
,
1

このコースでは、ACTION GAME MAKERでの様々な表現方法を学んでいきます。
第三回では、シェーダーの使い方です。

コース開始の事前準備

第二回で使用したプロジェクトを引き続き利用します。
それではプロジェクトを開いて準備してください。

2

ぼかしのシェーダーを作ってみよう

  1. game_sceneタブのSprite2Dを選択してください。
    image
    image529×254 20.9 KB
  2. インスペクター画面のCanvasItem>Material>empty>New ShaderMaterialより新しいシェーダーマテリアルを作ってください。
    image
    image749×841 66 KB
  3. 再度選択して展開し、新しいシェーダーを作ります。
    image
    image433×392 24.2 KB
  4. ぼかしなので、名前をblur.gdshaderに変更して作成しましょう。
    image
    image383×355 15.2 KB
  5. blur.gdshaderをクリックするとパネルがシェーダーコードを記入する画面になります。シェーダーはスクリプトで作成する必要があります。
    image
    image1564×531 65.9 KB
  6. 以下のコードをコピーして丸ごと上書きしてください。
shader_type canvas_item;

uniform float blur_radius : hint_range(0.0, 10.0); // blur strength

void fragment() {
    vec2 size = vec2(textureSize(TEXTURE, 0));
    vec2 uv = UV;

    vec4 sum = vec4(0.0);
    int blur_size = int(blur_radius);

    for (int x = -blur_size; x <= blur_size; x++) {
        for (int y = -blur_size; y <= blur_size; y++) {
            vec2 offset = vec2(float(x), float(y)) / size;
            sum += texture(TEXTURE, uv + offset);
        }
    }

    float samples = pow(float(blur_size * 2 + 1), 2.0);
    COLOR = sum / samples;
}
  1. MaterialのShader ParametersにBlur Radiusという新しい項目がでているので動かしてみましょう、遠景にぼかしが入るはずです。
    image
    image432×459 17.4 KB

スクリプトなんて書けないよという人へ

GodotのシェーダーはGDSLという独自言語で作成されており、スクリプトが必須です。
しかし、たくさんの先人たちが既に沢山のシェーダーを作成してくれています。以下のサイトやウェブ等を検索してみれば自分の作りたいシェーダーが見つかるかもしれません。

アニメーションプレイヤーとの連携

このシェーダーパラメータもアニメーションのキーとして利用することができます。そのためシェーダーを使ったアニメーションを非常に簡単に実装できますので、ワープや戦闘突入演出等様々なシーンで活用できます。

表現強化コースは以上です。
他のコースの受講はこちら

1. グラフィックコース
自分が描いたキャラクターを動かしたい！という人向けのコースです。

2. スクリプトコース
デフォルトキャラでいいからいろんな動きやシステムを作りたい！という人向けのコースです。