【Unity】内側からじわじわ光りだすアニメーションを作ってみた。

Photoshop + Unityで遊んでたら以下のようなアニメーションができたので作り方をまとめてみました。　

f:id:r-ngtm:20170601002644g:plain:h256

Photoshopでテクスチャを作る
シェーダーを書く
マテリアルの作成
アニメーションをつける
完成

Photoshopでテクスチャを作る

256 * 256 でキャンバスを新規作成します。

1. 円形グラデーションのレイヤー作成

まずはレイヤー白く塗りつぶし、グラデーションオーバーレイをかけます。

レイヤーをダブルクリック.

f:id:r-ngtm:20170601003155p:plain:h200

グラデーションオーバーレイをクリックして、赤枠で囲んだ部分を設定します。

f:id:r-ngtm:20170601003554p:plain:h300

グラデーションは以下のように設定します。

f:id:r-ngtm:20170601003623p:plain:h256

設定が終わると以下のような見た目になるはずです。

f:id:r-ngtm:20170601003055p:plain:h128

キャンバスの外側をちょっと暗くするのがポイントです。

2.雲のレイヤー作成

Ctrl + Shift + Nでレイヤーを新規作成します。

メニューの　「フィルター」 -> 「描画」 -> 「雲模様１」を選んで雲を描画させます。

このとき、ブラシの色が白と黒になってないと色がおかしくなるので注意。

f:id:r-ngtm:20170601003934p:plain:h128

雲を描画させたらレイヤーをハードライトにします。

f:id:r-ngtm:20170601004340p:plain:h200

途中経過

f:id:r-ngtm:20170601004318p:plain:h128

3. ハードミックスな白いレイヤーを作成 (完成)

レイヤーを新たに作成して、真っ白に塗りつぶします。レイヤーの塗りの数値を下げて、ハードミックスにします。

f:id:r-ngtm:20170601005009p:plain:h256

完成です。

f:id:r-ngtm:20170601005139p:plain:h128

シェーダーを書く

Shader "Custom/Bright" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _EmissionColor ("Emission Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _EmissionTex ("Emission (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0
        _Brightness ("Brightness", Float) = 0.0
        _BrightnessOffset ("Brightness Offset", Float) = -1.0
        _BrightnessModifier ("Brightness Modifier", Float) = 1.0
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200
        
        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex; 
        sampler2D _EmissionTex; // 発光用のテクスチャ

        struct Input {
            float2 uv_MainTex;
        };

        half _Glossiness;
        half _Metallic;
        fixed4 _Color;
        fixed4 _EmissionColor; // 発光の色
        half _Brightness; // 発光の値 (これをAnimationClipから操作させます)
        half _BrightnessOffset; // 発光値の基準値
        half _BrightnessModifier; // 発光値の係数

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_CBUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_CBUFFER_END

        void surf (Input IN, inout SurfaceOutputStandard o) {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            fixed4 e = tex2D (_EmissionTex, IN.uv_MainTex);
            o.Albedo = c;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
            o.Emission = max(0.0, e * _Brightness * _BrightnessModifier + _BrightnessOffset) * _EmissionColor;
        }
        ENDCG
    }
    FallBack "Diffuse"
}