Unity Shader2D RPGゲームにありそうなパワーをためているアニメーション

はじめに

この記事は前回の記事の続きになっているので、こちらも参考にしてみてください。
kiironomidori.hatenablog.com

アセット内がこのようになっている前提で記事を進めていきます。

当記事で使用している画像について

ぴぽや倉庫様(https://pipoya.net/)の、「キャラクターチップ1」⇒「ハロウィンキャラクター」内にある「majo.png」を使用させて頂いております。
https://pipoya.net/sozai/assets/charachip/character-chip-1/

目標

こんな感じのアニメーションを作成します。

準備

いつものように
Shaderで処理を行うために

1. Materialの作成(「Create」⇒「Material」)
2. Shaderの作成(「Create」⇒「Shader」⇒「Image Effect Shader」)

をします。ChargeMaterialにドラッグ&ドロップでChargeShaderを追加するのを忘れずに。

プログラム

ChargeShaderを開いたらプログラムを以下の様に書き換えます。

Shader "Hidden/ChargeShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

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

            sampler2D _MainTex;

            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                
                //時間のサイン波
                fixed tSin = 0.5 * abs(sin(_Time.y * 1.5));

                //y座標のサイン波
                fixed ySin = abs(sin(i.uv.y * 9.42));

                if (col.a > 0.5){
                    if (ySin > 0.985) {
                        return (1 - tSin) * col + tSin * fixed4(1, 0, 0, 1);
                    }
                    else if (ySin > 0.88) {
                        return (1 - tSin) * col + tSin * fixed4(1, 0, 1, 1);
                    }
                    else if (ySin > 0.7) {
                        return (1 - tSin) * col + tSin * fixed4(0, 0, 1, 1);
                    }
                    else if (ySin > 0.5) {
                        return (1 - tSin) * col + tSin * fixed4(0, 1, 0, 1);
                    }
                    else if (ySin > 0.3) {
                        return (1 - tSin) * col + tSin * fixed4(1, 1, 0, 1);
                    }
                    else {
                        return (1 - tSin) * col + tSin * fixed4(0.7, 0.7, 0.7, 1);
                    }
                }
                return col;
            }
            ENDCG
        }
    }
}