テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

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

2D GUI（uGUI/NGUI/旧UI） おもしろ演出、演出の強化

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

テキストを動かす

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

tsubakit1.hateblo.jp

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

テキストを動かす

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

テキストを揺らす

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

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

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

テキストの大きさを変える

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

テキストを動かすの基本

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

gist.github.com

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

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

gist.github.com