【Unityシェーダ入門】シェーダでワイプエフェクトを作る

　昔のマリオやペルソナ5でも使われている、だんだん視界が狭くなるワイプエフェクトをUnityのシェーダで作ってみます。このエフェクト、ワイプエフェクトとかアイリスエフェクトとか、色々な呼ばれ方をしているようで正式名称がわかりませんが、下のようなやつです。

f:id:nn_hokuson:20161128200019p:plain

今回の記事のコンテンツは次の通りです。

カメラのメソッドをフックする
Unityシェーダとマテリアルを作る
カメラにマテリアルをセットして実行する
おすすめ書籍

カメラのメソッドをフックする

今回はポストエフェクトとしてワイプエフェクトをかけるシェーダで実装します。ポストエフェクトについては↓の記事で詳しく説明しています。

nn-hokuson.hatenablog.com

今回も雰囲気を出すために、ユニティちゃんを配置しておきました。

f:id:nn_hokuson:20161128201032p:plain

プロジェクトビューで「PostEffect.cs」というファイルを作成し、次のプログラムを入力してください。このスクリプトの説明は上の記事で説明しています。

using UnityEngine;
using System.Collections;

public class PostEffect : MonoBehaviour {

	public Material wipeCircle;

	void OnRenderImage(RenderTexture src, RenderTexture dest)
	{
		Graphics.Blit (src, dest, wipeCircle);
	}
}

スクリプトが保存できたら、PostEffect.csをMainCameraにドラッグ＆ドロップしてアタッチしておきます。

f:id:nn_hokuson:20161128201313p:plain

Unityシェーダとマテリアルを作る

つづいて、ワイプエフェクトを表示するためのシェーダを作ります。プロジェクトビューで「右クリック」→「Create」→「Shader」→「Standard Surface Shader」を選択し、作成したファイル名をwipeCircleに変更します。続いてこのシェーダファイルをアタッチするマテリアルも作成しましょう。wipeCircleのシェーダをを選択した状態で「右クリック」→「Create」→「Material」を選択すると、wipeCircleというマテリアルが作成されます。

f:id:nn_hokuson:20161128203726p:plain

wipeCircle.shaderを開いて次のスクリプトを入力してください。

Shader "Custom/wipeCircle" {
	Properties{
		_Radius("Radius", Range(0,2))=2
	}
    SubShader {
        Pass {
            CGPROGRAM

            #include "UnityCG.cginc"

            #pragma vertex vert_img
            #pragma fragment frag

            float _Radius;
            fixed4 frag(v2f_img i) : COLOR {
        	i.uv -= fixed2(0.5, 0.5);
           	i.uv.x *= 16.0/9.0;
           	if( distance(i.uv, fixed2(0,0)) < _Radius ){
           		discard;
           	}
                return fixed4(0.0,0.0,0.0,1.0);
            }
            ENDCG
        }
    }
}