【Unity】背景をグラデーションにする方法~グラデーションマテリアル~

この記事では、背景をグラデーションにする方法を解説して行きたいと思います。

Contents

動作環境
やりたいこと
実装方法

動作環境

Item	Version
Unity	Unity 2021.3.5f1
VSCode	1.67.2
Mac	12.4

やりたいこと

このように背景をグラデーションにしたい。

実装方法

今回は、2Dで作成して行きたいと思います。3Dでも同じようにやるとできるかと思います。

3ステップで作成できます。

シェーダー作成
マテリアル作成
背景に適用

1. シェーダー作成

まずはシェーダーを作成します。

STEP.1

上のメニューバーから、Assets > Create > Shader > Standard Surface Shaderを選択してください。

STEP.2

名前をGradationに変更してください。

STEP.3

Gradationをダブルクリックしてコードを開きましょう。自分は、Xcodeで開きましたが、テキストを変更できれば、なんでも良いです。

STEP.4

開いたら、以下のコードをコピペしてください。

Shader "Gradation/Gradation" {
    Properties {
        _TopColor("Top Color", Color) = (1,1,1,1)
        _ButtomColor("Buttom Color", Color) = (1,1,1,1)
        _TopColorPos("Top Color Pos", Range(0, 1)) = 1
        _TopColorAmount("Top Color Amount", Range(0, 1)) = 0.5
    }
    
    SubShader {
        Tags {
            "RenderType" = "Opaque"
            "IgnoreProjector" = "True"
            "Queue" = "Transparent"
        }
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha
        LOD 100
        
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            fixed4 _TopColor;
            fixed4 _ButtomColor;
            fixed _TopColorPos;
            fixed _TopColorAmount;
            struct appdata {
                half4 vertex : POSITION;
                half2 uv : TEXCOORD0;
            };
            struct v2f {
                half4 vertex : POSITION;
                fixed4 color : COLOR;
                half2 uv : TEXCOORD0;
            };
            v2f vert(appdata v) {
                v2f o;
                UNITY_INITIALIZE_OUTPUT(v2f, o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;

                return o;
            }
            fixed4 frag(v2f i) : COLOR {
                fixed amount = clamp(abs(_TopColorPos - i.uv.y) + (0.5 - _TopColorAmount), 0, 1);
                i.color = lerp(_TopColor, _ButtomColor, amount);
                return i.color;
            }
            ENDCG
        }
    }
}

書き換える場所

全て書き換えます。