Unityでもフェードしたい!【ルール画像ver.】

公開日:2019-02-28
最終更新:2019-02-28

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

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のスライダーを動かせば、フェードエフェクトの完成だね☆
それではまたね!

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@maronの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする