BETA

Unityでフェードイン/アウトに使えるエフェクト!【ルール画像】

投稿日:2019-02-28
最終更新:2019-08-01

こんにちは。まろんです。

Unityでイイカンジのフェードイン・アウトをしたいと思っていたら、ルール画像というのを使った方法があるそうなので、シェーダーを作りました。

ルール画像ってのはこんな感じの白~黒のやつ
フェードするときに黒いところから順にフェードします

実際の動作のGif
https://drive.google.com/file/d/1kfOdXN52xH8Qgawsx843S13mkywX3ZPP/view?usp=sharing

ShaderはBuilt in ShaderのUnlit Textureから改造しています。
(Unity内蔵の標準シェーダー。改造用にDLするには以下から)
https://unity3d.com/jp/get-unity/download/archive

↓↓Shader全体↓↓

Shader "Custom/Fade_rule"  
{  
    Properties  
    {  
        _MainTex ("MainTex", 2D) = "white" {}  
        _RuleTex ("RuleTex", 2D) = "white" {}  
        _Slider ("Slider", Range (0,1)) = 1  
    }  
    SubShader  
    {  
        Tags { "Queue" = "Transparent" "RenderType"="Transparent"}  
        LOD 100  
        Blend SrcAlpha OneMinusSrcAlpha  
        ZWrite Off  
        Pass  
        {  
            CGPROGRAM  
            #pragma vertex vert  
            #pragma fragment frag  
            // make fog work  
            #pragma multi_compile_fog  

            #include "UnityCG.cginc"  

            struct appdata  
            {  
                float4 vertex : POSITION;  
                float2 uv : TEXCOORD0;  
            };  

            struct v2f  
            {  
                float2 uv : TEXCOORD0;  
                UNITY_FOG_COORDS(1)  
                float4 vertex : SV_POSITION;  
            };  

            sampler2D _MainTex;  
            sampler2D _RuleTex;  
            float4 _MainTex_ST;  
            float _Slider;  

            v2f vert (appdata v)  
            {  
                v2f o;  
                o.vertex = UnityObjectToClipPos(v.vertex);  
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);  
                UNITY_TRANSFER_FOG(o,o.vertex);  
                return o;  
            }  

            fixed4 frag (v2f i) : SV_Target  
            {  
                // sample the texture  
                fixed4 col = tex2D(_MainTex, i.uv);  
                fixed4 alpha = tex2D(_RuleTex, i.uv);  
                col.a = step(1-_Slider,alpha.r);  
                // apply fog  
                UNITY_APPLY_FOG(i.fogCoord, col);  
                return col;  
            }  
            ENDCG  
        }  
    }  
}

改造のポイントは、
・テクスチャを1→2枚にする
・閾値調整のスライダーを付ける
・α対応のシェーダー設定に変更する
・αの数式を書く
ところです。

6, 7行目でルール画像のテクスチャと閾値調整スライダーを追加してます

11行目のQuene=”Transparent”
14行目のBlend SrcAlpha OneMinusSrcAlpha
15行目のZWrite Off
でα対応シェーダーに書き換えました。

57行目のcol.a = step(1-_Slider, alpha.r);がαの数式です
step関数を使うと閾値によってαを1か0に変換できます

以上で、Unityでルール画像を使ったフェードができるshaderの完成です!
あとは、アニメーションでこのShaderのスライダーを動かせば、フェードエフェクトの完成だね☆
それではまたね!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@maronの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!