CG・映像デザイナー技術ブログ

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

eyecatch_unity

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

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

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

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

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

やり方

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

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

テクスチャの作成

イラストレーター

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

フォトショップ

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

Unity

マテリアルのアサイン

  • カットアウトのシェーダーを適用してマテリアルを作成
  • 上記のテクスチャもアサイン(※色もつけたかったので下記のシェーダーを使いました)
参考 Unlit Cutout with Shadows - Unity ForumUnity Forum

アニメーション

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

追記 縁に色を付ける

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

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

float edgeHeight = 0.05; 帯の長さ調節

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

以上、すいみん(@cg_method)でした!