文字を描くようにアニメーションする方法。
前回、パスに添わせてパーティクスで描けないか試したのですが、思ったようにいかず
【Unity】パーティクルをパスに沿わせる方法 – CGメソッド
次に思いついたのがトランジションで使う表現と同じ方法でした。
タップできるもくじ
この記事の著者
CGブロガー
すいみん
Suimin
プロフィール
某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。
書籍：Unity デザイナーズ・バイブル
プロフィール詳細はこちら
やり方
標準のUnlit/Transparent Cutoutシェーダーでできるアルファ値を使った表現方法を使用しています。
【Unity】Cutout （切り抜き）シェーダーによるアニメーション方法 – CGメソッド
テクスチャの作成
イラストレーター
- 文字素材を用意
- イラレで文字素材に沿うようにパスを引く、さらに文字素材を覆うように線幅を太くする。
- 線にグラデーション適用。さらにパスに沿ってグラデーションを適用にチェック。※グラデーションの範囲は0～50％くらい
フォトショップ
- イラレで作ったグラデーション素材を使って、マスクで切ったりして、アルファチャンネルを作成。
- Targa 32bitで保存
Unity
マテリアルのアサイン
- カットアウトのシェーダーを適用してマテリアルを作成
- 上記のテクスチャもアサイン（※色もつけたかったので下記のシェーダーを使いました）
アニメーション
- 板ポリを作成して、さきほどのマテリアルをアサイン
- お好みでAlpha cutoffにキーを打って、アニメーションを作成。
追記 縁に色を付ける
こちらのシェーダーを使用
Unlit/Transparent Cutout をベースにしています · GitHub
float edgeHeight = 0.05; 帯の長さ調節
fixed4(0, 4, 2, 1),色を調節(RGBA)
Unityに関する参考記事・ツール・書籍のまとめ
Unityに関する記事を下記にまとめました。
