ペンで文字を書いているようなアニメーションをUnityで作る方法を紹介します。
パンチスルー（Alpha Cutout）の仕組みを応用して、グラデーションのアルファチャンネルで文字が順番に現れる表現を実現します。
目次
仕組み
Unlit/Transparent Cutoutシェーダーを使い、Alpha Cutoffの値をアニメーションさせます。
アルファチャンネルにパスに沿ったグラデーションを設定することで、書き順通りに文字が現れます。
テクスチャの作成
Illustratorでの作業
- 文字素材を用意
- 文字の書き順に沿ってパスを引く
- 線幅を太くして文字全体を覆う
- 線にグラデーションを適用
- グラデーションオプションで「パスに沿ってグラデーションを適用」にチェック
- グラデーションの範囲は0〜50%程度に設定
ポイントは、書き始めを白（アルファ高）、書き終わりを黒（アルファ低）にすることです。
Photoshopでの作業
- Illustratorで作ったグラデーション素材を読み込む
- マスクを使って文字の形に切り抜く
- グラデーションをアルファチャンネルとして設定
- Targa 32bitで保存
Unityでの設定
マテリアルの作成
- 新規マテリアルを作成
- ShaderをUnlit/Transparent Cutoutに設定
- 作成したテクスチャをアサイン
色を付けたい場合は、以下のカスタムシェーダーが参考になります。
https://forum.unity3d.com/threads/unlit-cutout-with-shadows.237237/
アニメーションの作成
- 板ポリ（Quad）を作成
- マテリアルを適用
- Animationウィンドウを開く
- Alpha Cutoffにキーフレームを打つ
- 開始時はCutoff=1（非表示）、終了時はCutoff=0（全表示）に設定
縁に色を付ける
文字が現れる先端に光るような縁を付けるには、専用のシェーダーを使います。
参考シェーダー：https://gist.github.com/setchi/b5c9fd72c3cb5317dae44cb6f3eb7fef
調整パラメータ
| パラメータ | 説明 |
|---|---|
float edgeHeight = 0.05; | 縁の帯の長さ |
fixed4(0, 4, 2, 1), | 縁の色（RGBA） |
応用例
この方法は文字以外にも使えます。
- ロゴの登場演出
- 線画イラストの描画アニメーション
- 魔法陣が描かれていく演出
- サインやシグネチャーの表示
まとめ
- 書き順に沿ったグラデーションをアルファチャンネルに設定
- Alpha Cutoutシェーダーを使用
- Alpha Cutoffの値をアニメーションさせる
- 縁を光らせるには専用シェーダーを使用
Illustratorの「パスに沿ってグラデーション」機能がポイントです。この機能を使えば、複雑な書き順も簡単に表現できます。
