グラデーションのマテリアルを作る

2色のグラデーションのマテリアルを作ります。
基本的には背景として使うことを想定していますが、他のものに使っても面白そうです。
作成したグラデーションは色の位置や比率を変えることができます。
![back.gif](https://qiita-image-store.s3.amazonaws.com/0/170659/ee4e1d7a-7b00-f85f-7181-a701d30e3bb7.gif)
画像が一部乱れていますが、イメージはこんな感じです。

#環境
- Unity5.6.1f1

#始める前に
今回はシェーダーを使用しますが、シェーダーの使い方が分からなくても実装可能です。
ただし、コードの解説は行いませんのでコピペして使用してください。
解説が必要な場合は公式リファレンス等をご覧ください。
https://docs.unity3d.com/jp/540/Manual/SL-Reference.html

#準備
まずはシェーダーを作成します。
`Project > Create > Shader > Standerd Surface Shader`で作成してください。
今回は`Gradation`という名前にしました。
ダブルクリックしてシェーダーを開き、以下のコードに書き換えてください。

```
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 //初期値は1
		_TopColorAmount("Top Color Amount", Range(0, 1)) = 0.5 //初期値は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
        }
	}
}

```

これでシェーダーの準備が整いました。
次に`Project > Create > Material`で新しいマテリアルを作成します。
今回は`GradationMat`という名前にしました。
作成したマテリアルをクリックした後、`Inspector > Shader > Gradation`のシェーダーを適用します。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/170659/3347d3fc-3bd3-6fcf-a019-d96b0f257813.png)

これで準備が完了しました。

#使い方
- ImageやCubeなどに作成したマテリアルをアタッチして使用してください。
- `Top Color`と`Buttom Color`の2色でグラデーションを作成します。
 - `Top Color Pos`の初期値は1で、`Top Color`が一番上にある状態です。この値を下げることで`Top Color`が下に移動します。
 - `Top Color Amount`の初期値は0.5で、全体の色のうち`Top Color`が占める割合を示しています。
- また 、スクリプトから値を変更することも可能です。`Top Color`を変更する場合、
シェーダーのスクリプトにある`_TopColor`に値を渡すことで変更できます。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/170659/0c1d7d22-550e-24e6-7807-098aa94952f5.png)

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GradationSc : MonoBehaviour {

    public Material GradaionMat;

	void Start ()
    {
        GradaionMat.SetColor("_TopColor", Color.blue);        	
	}
}

```
上のコードでは`Top Color`が青色になります。

#おまけ（Lightの影響を受けるグラデーション）

上記のシェーダーではライティングなどの影響を受けません。
以下のコードでは影響を受けるようになります。

```
Shader "Gradation/SurfGradation" {
	Properties {
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_TopColor("Top Color", Color) = (1,1,1,1)
		_ButtomColor("Buttom Color", Color) = (1,1,1,1)
		_TopColorPos("Top Color Pos", Range(0, 1)) = 1 //初期値は1
		_TopColorAmount("Top Color Amount", Range(0, 1)) = 0.5 //初期値は0.5
		_Glossiness ("Smoothness", Range(0,1)) = 0.5
		_Metallic ("Metallic", Range(0,1)) = 0.0
	}
	SubShader {
			Tags{
			"RenderType" = "Opaque"
			"IgnoreProjector" = "True"
			"Queue" = "Transparent"
		}
		LOD 200
		ZWrite Off
		
		CGPROGRAM
		#pragma surface surf Standard alpha:fade
		#pragma target 3.0

		fixed4 _TopColor;
		fixed4 _ButtomColor;
		fixed _TopColorPos;
		fixed _TopColorAmount;
		half _Glossiness;
		half _Metallic;

		struct Input {
			float2 uv_MainTex;
		};

		void surf (Input IN, inout SurfaceOutputStandard o) {
			fixed amount = clamp(abs(_TopColorPos - IN.uv_MainTex.y) + (0.5 - _TopColorAmount), 0, 1);
		    fixed4 color = lerp(_TopColor, _ButtomColor, amount);
			o.Albedo = color.rgb;
			o.Alpha = color.a;
			o.Metallic = _Metallic;
			o.Smoothness = _Glossiness;
		}
		ENDCG
	}
	FallBack "Diffuse"
}
```
(`Albedo (RGB)`にはTextureをセットすることができますが、このシェーダーでは特に意味はありません。ご注意ください。)


ぜひ、ご活用ください！