コツコツエンジニアノート

【Unity Shader】UIストライプ画面遷移シェーダー

#UnityShader

投稿日:2025-07-19

更新日:2026-08-18

ストライプ画面遷移シェーダーの概要

画面を指定の数値で線状に分割し、各区域に指定のディレイをかけて徐々に画面遷移をするシェーダーになります。
言葉で表現すると非常に分かりにくいですが、動画で見ると分かり易いと思います。

ストライプ画面遷移シェーダーのコード全文

以下コード全文です。uGUI Imageへの反映方法はこちらの記事参照してください。

Copy Code


Shader "UI/StripeTransition"
{
    Properties
    {
        [HideInInspector] _MainTex("-",2D)="white"{}
        [KeywordEnum(L to R, R to L, B to T, T to B)] _Direction("Direction", Int) = 0
        _Transition("Transition", Range(0, 1)) = 0
        _SplitNum("SplitNum", Range(1, 20)) = 1
        _Delay("Delay", Range(0, 0.1)) = 0
    }

    SubShader
    {
        Tags { "Queue" = "Transparent" }
        Cull Off
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _DIRECTION_L_TO_R _DIRECTION_R_TO_L _DIRECTION_B_TO_T _DIRECTION_T_TO_B

            struct appdata
            {
                fixed2 uv : TEXCOORD0;
                fixed4 vertex : POSITION;
                fixed4 color : COLOR;
            };

            struct v2f
            {
                fixed2 uv : TEXCOORD0;
                fixed4 vertex : POSITION;
                fixed4 color : COLOR;
            };

            fixed _Transition;            
            int _SplitNum;
            fixed _Delay;
            sampler2D _MainTex;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.color = v.color;
                return o;
            }

            //uv座標を変形させて、分割された各区画の座標を返す
            //_SplitNumが1ならシンプルに返り値は0~1の範囲に収まる、_SplitNumが増えると最大値がどんどん減っていく
            fixed getUvPos(fixed2 uv)
            {
#if _DIRECTION_L_TO_R
                fixed targetPos = uv.x;
#elif _DIRECTION_R_TO_L
                fixed targetPos = 1 - uv.x;
#elif _DIRECTION_B_TO_T
                fixed targetPos = uv.y;
#elif _DIRECTION_T_TO_B
                fixed targetPos = 1 - uv.y;
#endif

                fixed threshold = 1 / (fixed)_SplitNum;
                fixed remainder = targetPos % threshold;

                int count = targetPos / threshold;
                return saturate(remainder + count * _Delay);
            }

            //画像の分割数やdelay値に合わせて、_Transitionの値を変形させて、分割された各区画が閉じる閾値を割り出す
            fixed getFixTransition()
            {
                fixed accel = (1 + (_Delay * _SplitNum * max(1, _SplitNum - 1)));
                return _Transition / (fixed)_SplitNum * accel;
            }     

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                col *= i.color;

                fixed pos = getUvPos(i.uv);
                //変形させた座標と変形させた閾値の値を比較し、前者が後者より値が小さい場合表示、逆なら表示しない
                fixed alpha = step(pos, getFixTransition());

                col.a = alpha;
                return col;
            }
            ENDCG
        }
    }
}