【Unity】文字を描くようにアニメーションする方法

文字を描くようにアニメーションする方法。

前回、パスに添わせてパーティクスで描けないか試したのですが、思ったようにいかず

【Unity】パーティクルをパスに沿わせる方法 – CGメソッド

次に思いついたのがトランジションで使う表現と同じ方法でした。

やり方

標準のUnlit/Transparent Cutoutシェーダーでできるアルファ値を使った表現方法を使用しています。

【Unity】Cutout （切り抜き）シェーダーによるアニメーション方法 – CGメソッド

テクスチャの作成

イラストレーター

• 文字素材を用意
• イラレで文字素材に沿うようにパスを引く、さらに文字素材を覆うように線幅を太くする。
• 線にグラデーション適用。さらにパスに沿ってグラデーションを適用にチェック。※グラデーションの範囲は0～50％くらい

フォトショップ

• イラレで作ったグラデーション素材を使って、マスクで切ったりして、アルファチャンネルを作成。
• Targa 32bitで保存

Unity

マテリアルのアサイン

• カットアウトのシェーダーを適用してマテリアルを作成
• 上記のテクスチャもアサイン（※色もつけたかったので下記のシェーダーを使いました）

https://forum.unity3d.com/threads/unlit-cutout-with-shadows.237237/

アニメーション

• 板ポリを作成して、さきほどのマテリアルをアサイン
• お好みでAlpha cutoffにキーを打って、アニメーションを作成。

追記　縁に色を付ける

こちらのシェーダーを使用

Unlit/Transparent Cutout をベースにしています · GitHub

float edgeHeight = 0.05; 帯の長さ調節

fixed4(0, 4, 2, 1),色を調節(RGBA)