【Unity】Shaderを使ってテクスチャにフェードイン・フェードアウトを実装する

最近UnityのShaderを触る機会が多いので、色々機能を実装をしています。 今回はその中で実装をした「フェードイン・フェードアウト(FadeIn,FadeOut」についてブログに書いていこうと思います。

ShaderForgeで実装

Shaderを自作する際に便利なShader ForgeというAssetを使って作ってみます。 まずは、フェードイン・フェードアウトで利用できそうなNodeを探します。

sin

使えそうなNodeを探してみると sinが使えそうです。 sinに何かしらの連続した値を流し込むと、波打った挙動をしてくれます。 これを描画をするTextureに乗算をすれば、実現できそうです。

Time

Shaderではアニメーションを実装する際にはTimeを使います。 フェードイン・フェードアウト以外でも利用できるアニメーションを使った表現がShaderで行えます。

実際のNode

下記の画像のようにNodeを繋いで上げれば実装ができました。

2017 7 26 00

「Clmpe0-1」を使っているのは、他のテクスチャと合成する際に加算・減算が起こってしまうのを防ぐからです。 この場合「Ads」でも大丈夫です。

実際のコード

ShaderForgeで作ったNodeはコードとしても書き出されます。 [c] float4 frag(VertexOutput i) : COLOR { ////// Lighting: ////// Emissive: float4 Main_var = tex2D(Main, TRANSFORM_TEX(i.uv0, Main)); float4 node_9493 = Time + TimeEditor; float node_9790 = sin*1; float3 emissive = (_Main_var.rgb * node_9790); float3 finalColor = emissive; return fixed4(finalColor,1); } [/c]

主にフラグメントシェーダー側のコードの記述が変わっています。 無駄な変数が作られてしまうので、まとめられそうです。 [c] float4 Main_var = tex2D(Main, TRANSFORM_TEX(i.uv0, Main)); float3 finalColor = (Main_var.rgb * sin((Time.g * Speed))); return fixed4(finalColor,1); [/c]

最後に

Timeのスピードを調整してあげるとFlashのようにピカピカする表現もできるようになります。 フェードを使った表現をスクリプトやTween系の外部アセットを利用しているのなら、一度Shaderを使って同じような実装ができないか試してみるのもよいと思います。

ゲームアプリの数学 Unityで学ぶ基礎からシェーダーまでゲームアプリの数学 Unityで学ぶ基礎からシェーダーまで
久富木 隆一

SBクリエイティブ
売り上げランキング : 11157

Amazonで詳しく見る

*1:node_9493.g * Speed