MENU

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

f:id:min0124:20160828115925p:plain

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

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

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

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

f:id:min0124:20170906084558g:plain

やり方

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

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

テクスチャの作成

イラストレーター

  • 文字素材を用意

  • イラレで文字素材に沿うようにパスを引く、さらに文字素材を覆うように線幅を太くする。

  • 線にグラデーション適用。さらにパスに沿ってグラデーションを適用にチェック。※グラデーションの範囲は0~50%くらい

f:id:min0124:20170903220933p:plain

フォトショップ

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

  • Targa 32bitで保存

f:id:min0124:20170903214437p:plain

Unity

マテリアルのアサイン

  • カットアウトのシェーダーを適用してマテリアルを作成

  • 上記のテクスチャもアサイン(※色もつけたかったので下記のシェーダーを使いました)

アニメーション

  • 板ポリを作成して、さきほどのマテリアルをアサイン

  • お好みでAlpha cutoffにキーを打って、アニメーションを作成。

f:id:min0124:20170903215133p:plain

f:id:min0124:20170903220106g:plain

追記 縁に色を付ける

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

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

float edgeHeight = 0.05; 帯の長さ調節

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

f:id:min0124:20170906084558g:plain