Unity│UI制作に役に立つシェーダー6選│uGUI

2018年8月27日2026年1月4日

UnityのUI制作で使えるシェーダーをまとめました。

タッチ時の明るさ変更やDisable表現など、実用的なシェーダーを紹介します。

スプライトを明るくしたり暗くしたりするシェーダー

UIをタッチした時に明るくするなどの表現で使えます。

手順

Unityのビルトインシェーダーをダウンロード
Sprites-Default.shaderを探してUnityへコピー
シェーダー名を変更
コードを修正

ダウンロード：https://unity3d.com/jp/get-unity/download/archive

シェーダー名の変更：

// 変更前
Shader "Sprites/Default"
// 変更後
Shader "Sprites/Default_Custom"

フラグメントシェーダーの修正：

fixed4 frag(v2f IN) : SV_Target
{
    fixed4 c = SampleSpriteTexture(IN.texcoord) * IN.color;
    c.rgb = c.rgb * 2 + max(fixed3(0,0,0), IN.color.rgb - 0.5) * 2;
    c.rgb *= c.a;
    return c;
}

uGUIのImageにマテリアルをアサインします。中間のグレー（RGB 128）がデフォルト状態です。

参考：https://qiita.com/mache/items/fa664d5605ee057a80ce

グレースケール（白黒）にするシェーダー

タップしても機能しない場所をDisable表示するときに便利です。

手順

下記サイトからコードをコピーしてシェーダーを作成（Grayscale.shader）
マテリアルを作成してシェーダーをアサイン（Grayscale.mat）
グレースケールにしたいImageのMaterialにアサイン

参考：https://d.hatena.ne.jp/nakamura001/20140421/1398083771

単色ベタ塗りするシェーダー

シルエット表現やフラットデザインで色を付けるときに便利です。

手順

下記URLからベースとなるシェーダーをダウンロード
コードを6箇所修正
マテリアルを作成してアサイン

ダウンロード：https://github.com/mike-neko/SpriteShaderSample/blob/master/Assets/Shaders/SpriteBetaMask.shader

修正箇所（コメントアウトまたは変更）：

//[MaterialToggle] _MaskOn ("Mask On", Float) = 0
//_Color ("Tint", Color) = (1,1,1,1)
//[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
//fixed4 _Color;
OUT.color = IN.color; //* _Color;
fixed4 m = lerp(c, _MaskColor, 1);

色相を変更するシェーダー

ImageのColorは加算計算のため色相変更ができません。このシェーダーを使えばUIパーツの色相を変更でき、パーツ数を減らせる可能性があります。

手順

下記からHsvUI.shaderとUIHue.csをダウンロード
UnityのAssetsへ配置
ImageにUIHue.csをアタッチ（自動でマテリアルもアサインされる）
スライダーで値を調整
値が決まったらスクリプトをRemove（負荷軽減のため）

ダウンロード：https://qiita.com/Teach/items/52883127033885a95e82

画像をタイリングしてマスクで区切るシェーダー

斜線の影など、パターンをタイリングしてマスクで形を整える表現ができます。

手順

ボーダーのテクスチャを作成（正方形に十字のガイドを作成し、端のポイントにパスを打つ）
タイリングシェーダーを用意
マテリアルを作成し、UI/TextureMaskを選択
ボーダーとマスクのテクスチャをアサイン
Tilingの値を調整

※タイリングする画像のTexture Typeは「Default」に設定

※マスク反転したい場合：c.a *= opacity;をc.a *= 1-opacity;に変更

ブラーをかけるシェーダー

画像をぼかすシェーダーです。カメラにアタッチするImage Effect以外の方法で、背景画像をぼかす表現などに使えます。

マテリアルを作成してアサインし、Distanceの値でボケ具合を調整します。

Shader "Unlit/Transparent Colored Blurred"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
        _Distance ("Distance", Float) = 0.015
    }
SubShader
{
    LOD 100
    Tags
    {
        "Queue" = "Transparent"
        "IgnoreProjector" = "True"
        "RenderType" = "Transparent"
    }

    Cull Off
    Lighting Off
    ZWrite Off
    Fog { Mode Off }
    Offset -1, -1
    Blend SrcAlpha OneMinusSrcAlpha

    Pass
    {
        CGPROGRAM
        #pragma vertex vertexProgram
        #pragma fragment fragmentProgram
        #include "UnityCG.cginc"

        struct appdata_t
        {
            float4 vertex : POSITION;
            float2 textureCoordinate : TEXCOORD0;
            fixed4 color : COLOR;
        };

        struct vertexToFragment
        {
            float4 vertex : SV_POSITION;
            half2 textureCoordinate : TEXCOORD0;
            fixed4 color : COLOR;
        };

        sampler2D _MainTex;
        float4 _MainTex_ST;
        float _Distance;

        vertexToFragment vertexProgram(appdata_t vertexData)
        {
            vertexToFragment output;
            output.vertex = UnityObjectToClipPos(vertexData.vertex);
            output.textureCoordinate = TRANSFORM_TEX(vertexData.textureCoordinate, _MainTex);
            output.color = vertexData.color;
            return output;
        }

        fixed4 fragmentProgram(vertexToFragment input) : COLOR
        {
            float distance = _Distance;
            fixed4 computedColor = tex2D(_MainTex, input.textureCoordinate) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y + distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x, input.textureCoordinate.y + distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y - distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y - distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y + distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x, input.textureCoordinate.y - distance)) * input.color;
            computedColor = computedColor / 9;
            return computedColor;
        }
        ENDCG
    }
}
}