Godot フォントにアウトライン（縁取り）とグラデーションをつける

アウトライン（縁取り）とグラデーションの両方をつける機能がLabelにもRichTextLabelにもなかったので，シェーダーを作りました。

手順

シーンにCanvasLayerとLabelを追加します。

Labelを選択したまま，インスペクターの「Text」欄に好きな文字列を入力（上記の例では「9999」にしました）

下の方にある「Material」をクリックし，「＜空＞」をクリック。選択肢から「ShaderMaterial」を選択します。

白い球体が現れるのでクリック。展開されるShader項の「＜空＞」をクリック。選択肢から「新規シェーダー」をクリックします。

シェーダーのファイル名をつけます。「font_gradation.gdshader」にでもしておきますか・・・

ファイルシステム　タブのなかに作られますので，Wクリックします。

シェーダーのコード編集画面が出てきますので・・・

下記をコピペしてください。

シェーダー

shader_type canvas_item;

// --- アウトライン設定 ---
uniform vec4 outline_color : source_color = vec4(0.0, 0.0, 0.0, 1.0); // 縁の色（黒）
uniform float thickness : hint_range(0.0, 5.0) = 1.0; // 太さ

// --- グラデーション設定 ---
uniform vec4 top_color : source_color = vec4(1.0, 1.0, 1.0, 1.0); // 上の色
uniform vec4 bottom_color : source_color = vec4(0.5, 0.5, 0.5, 1.0); // 下の色
uniform float font_height = 24.0; // フォントの高さ

// 頂点シェーダーから渡す座標（グラデーション用）
varying float v_y_pos;

void vertex() {
    // 文字のローカル座標を取得（これでグラデーションが真っ直ぐになる）
    v_y_pos = VERTEX.y / font_height;
}

void fragment() {
    // 1. グラデーション色を作る
    float ratio = clamp(v_y_pos, 0.0, 1.0);
    vec4 gradient_col = mix(top_color, bottom_color, ratio);

    // 2. テクスチャ情報を取得
    vec4 col = texture(TEXTURE, UV);
    vec2 size = TEXTURE_PIXEL_SIZE * thickness;
    
    // 3. エッジ検出（上下左右の透明度を調べる）
    float a_up = texture(TEXTURE, UV + vec2(0.0, -size.y)).a;
    float a_down = texture(TEXTURE, UV + vec2(0.0, size.y)).a;
    float a_left = texture(TEXTURE, UV + vec2(-size.x, 0.0)).a;
    float a_right = texture(TEXTURE, UV + vec2(size.x, 0.0)).a;
    
    // 周囲に不透明なピクセルがあるか？（＝ここはアウトラインだ）
    float outline_alpha = a_up + a_down + a_left + a_right;
    
    // 4. 色の合成
    // 自分のアルファ値(col.a)が高い場所は「中身（グラデーション）」
    // 低い場所は「アウトライン色」にする
    // mix関数を使うことで、境界線がアンチエイリアスっぽく滑らかに馴染みます
    vec4 final_col = mix(outline_color, gradient_col, col.a);
    
    // 5. 最終的な不透明度
    // 元の文字(col.a) と アウトライン(outline_alpha) のどちらかが存在すれば表示する
    final_col.a = clamp(col.a + outline_alpha, 0.0, 1.0);
    
    COLOR = final_col;
}

コピペできたら保存します。

そしてもう一度Labelをクリックしてインスペクターを見てみると，調整項目が表示されています。いい感じに調整してあげてください。