【Unity】UIで表現するテキストを１文字ずつ”動かす”

今回はUnityのUIのテキストを動かしてみます。

UnityのUIシステムであるuGUIですが、実はテキストを表現するためのポリゴン…頂点を動かしたりする事が出来ます。
この部分を上手く活用すると、文字1文字ずつを動かしたり透明にしたり、変形させたりする事が出来ます。

ということで、色々とやってみました。

まずテキストを1文字ずつ別の方向からINする処理を書いてみました。
やってる事は非常に単純で、各文字の位置をランダムなオフセット値で移動させて、それを戻しているだけです。

Unityで、uGUIで用意した文字列を別々の方角から並べる奴 pic.twitter.com/MWu77uDAtK
— 椿 (@tsubaki_t1) 2016年4月7日

スライド時に文字を揺らす奴が中々かっこよかったので、真似してみました。
実際に慣性で動いてるのではなく、アニメーションで動かしてる辺りが自分の物臭っぷりを表してる感があります。

UnityのuGUIで、文字を揺らす奴。IMeshModifierでテキストの頂点弄って回す感じ pic.twitter.com/eir4h0ueG6
— 椿 (@tsubaki_t1) 2016年4月11日

やってる事は簡単で、各頂点を回転させているだけです。その際「回転の中心」（これの場合は文字の上部）が必要になります。

今回は0番目のポリゴンと1番目のポリゴンの位置をVector3.Lerpの0.5（中央）指定して取得します。
もし真ん中を取得したい場合、0番目と3番目の中間値を取れば中央の座標が取得出来ます。

文字を回す軸を上じゃなくて中央に設定してみる pic.twitter.com/18LWdGZm1W
— 椿 (@tsubaki_t1) 2016年4月11日

文字の大きさを変えてみます。頂点を広げればOKです。
ついでに位置を調整したりすると、中々味わいぶかい感じの配置になる…事があります。

「文字のサイズ・角度・高さ・1文字だけ赤」をランダムで生成して遊ぶ。結構面白い構図が出てきて楽しい感 pic.twitter.com/EvMAee8H9J
— 椿 (@tsubaki_t1) 2016年4月12日

uGUIのTextで、ランダムに高さ・大きさ・文字の色・角度が変わるテキスト。読みにくい事この上無い pic.twitter.com/oqcy3wNpF5
— 椿 (@tsubaki_t1) 2016年4月12日

テキストを動かすには、 IMeshModifier を使用します。これをクラスに定義しておくと、テキストを更新（作成）するタイミングで割り込んで、テキストを構成する頂点に手を加える事が出来ます。

これを基本として、あとはvoid modify( ref List<UIVertex> stream )の中を埋めればテキストの動きを指定することができます。

例えばテキストを回転させる奴は、自分の場合はこんな感じで記述しました。

テラシュールブログ