【Unity】TextMesh Proをアニメーションさせる～デザイナー編～

はじめに

TextMesh Pro は Unity公式の無料のテキストUIアセットで、最近ではデフォルトでインポートされてたりします。
テキストのビジュアルだけでなく、リッチテキストや整列等、機能面においても優れたアセットですが、
テキストをアニメーションさせる仕組みは実装されていないので、何かしらコンポーネントを作る必要があります。

本記事では、こちらで用意したコンポーネントを使って、ジオメトリを動かす方法について解説していきます。

プログラマーの方向けに専用に別の記事を用意してみました。
テキストを動かしている実装の内容が知りたい！という方はこちらをご覧ください。
coposuke.hateblo.jp

目次

TextMesh Proについて（本の紹介）

TextMesh Proの使い方や機能は、執筆した本にて詳しく解説しております。ぜひ読んでみてください！（突然の広告）

Unity デザイナーズ・バイブル（2020/6 発売）  

Unity ゲームプログラミング・バイブル（2018/4 発売）

用意するもの

本のサンプル用に作成したアニメーションシステムです。
MITライセンスなので、商用利用も可能です。
github.com

導入のやり方

UnityプロジェクトのPackagesにある manifest.json を下記のように書き換えます。

{
  "dependencies": {
    "com.copocopo.textmeshpro.animator": "https://github.com/coposuke/TextMeshProAnimator.git",
    ...,
    ...
  }
}

追記後に Unity を起動すると自動的にインポートされます。

もしこれでダメだったら、
Clone or Download から Download ZIP を選択してダウンロードしてください。
解凍したら、Scriptsフォルダ を Assetsフォルダ 以下の中に配置してください。

シンプルなアニメーション

表示文字数を増やしていくタイプのシンプルなアニメーションを作成してみましょう。
これは TextMeshProSimpleAnimator を使用します。

インスペクター

Is Loop	ループします
Speed Per Character	1文字の表示にかかる時間(秒)
Is Auto	OnEnable時（表示時）に自動的にアニメーションを開始する

ADVを想定したシンプルなアニメーションなので、特に演出を追加することは出来ません。
ただ、シンプルゆえに軽量で分かりやすいコンポーネントです。

複雑なアニメーション

一つ一つのテキストを動かすアニメーションを作成してみましょう。
これは TextMeshProGeometryAnimator を使用します。

インスペクター

Progress	-	-	アニメーション進行度を調整できます。Play By Progress が True の時のみ機能します
Play On Enable	-	-	コンポーネントが有効になったタイミングで自動的に開始します。Play By Progress が False の時のみ機能します
Play By Progress	-	-	Progress で アニメーション進行度を調整できるようになります。Animator と連携したい場合などに有効です
AnimationData	-	-	-
┗	Speed	-	アニメーション再生速度です
┗	Use Max Visible Character	-	アニメーションデータの Alpha の時間に合わせて、TextMesh Pro の機能の MaxVisibleCharacter を連動させます。これにより、マーカーや下線などの表示タイミングを合わせることが出来ます
┗	Position	-	座標を動かします
-	┗	Use	使用/未使用。使用しない場合はOFFにすると負荷が減ります
-	┗	Delay	開始を遅らせる時間(秒)
-	┗	Wave	文字毎に遅らせる時間(秒)
-	┗	Time	アニメーション時間(秒)。DelayやWaveは除外した数値をご入力ください
-	┗	Curve	From - To の影響度。横軸のTime(0.0～1.0)に合わせて縦軸の影響度を設定します
-	┗	From	影響度が 0.0 のときの座標
-	┗	To	影響度が 1.0 のときの座標
┗	Rotation	-	回転します
-	┗	…	Use、Delay、Wave、Time、Curve は同上
-	┗	From	影響度が 0.0 のときの姿勢
-	┗	To	影響度が 1.0 のときの姿勢
┗	Scale	-	拡大/縮小します
-	┗	…	Use、Delay、Wave、Time、Curve は同上
-	┗	From	影響度が 0.0 のときのサイズ
-	┗	To	影響度が 1.0 のときのサイズ
┗	Alpha	-	透明度を変更します
-	┗	…	Use、Delay、Wave、Time、Curve は同上
-	┗	From	影響度が 0.0 のときの透明度
-	┗	To	影響度が 1.0 のときの透明度
┗	Color	-	色を変更します
-	┗	…	Use、Delay、Wave、Time、Curve は同上
-	┗	Gradiant	影響度に沿ったグラデーションカラー。横軸のTime(0.0～1.0)に合わせて色＆α値を設定します
┗	PositionNoise	-	座標にノイズ（ばらつき）を加えます
-	┗	…	Use、Delay、Wave、Timeは同上
-	┗	Curve	ノイズテクスチャの影響度。通常テクスチャが0.0~1.0までの数値しか表現できないので、影響度を1.0より大きい数値等で動きを制御します。
-	┗	Noise Texture	ノイズテクスチャ。RGB=XYZ軸に対応しています。
-	┗	Offset	ノイズテクスチャのUVオフセット
-	┗	Tiling	ノイズテクスチャのUVタイリング
-	┗	Speed	ノイズテクスチャのスクロール速度(毎秒)
┗	RotationNoise	-	回転にノイズ（ばらつき）を加えます
-	┗	…	Use、Delay、Wave、Timeは同上
-	┗	…	Curve、NoiseTexture、Offset、Tiling、Speedは同上
┗	ScaleNoise	-	拡縮にノイズ（ばらつき）を加えます
-	┗	…	Use、Delay、Wave、Timeは同上
-	┗	…	Curve、NoiseTexture、Offset、Tiling、Speedは同上
┗	AlphaNoise	-	透明度にノイズ（ばらつき）を加えます
-	┗	…	Use、Delay、Wave、Timeは同上
-	┗	…	Curve、Offset、Tiling、Speedは同上
-	┗	Noise Texture	ノイズテクスチャ。R=α値に対応しています。
┗	ColorNoise	-	色にノイズ（ばらつき）を加えます
-	┗	…	Use、Delay、Wave、Timeは同上
-	┗	…	Curve、NoiseTexture、Offset、Tiling、Speedは同上

パラメータが多いのですが、同じ機能の繰り返しとなっている部分が多いので、
1つコツを掴めば全体のイメージが掴めるかと思います。

これらのパラメータは uGUI のテキストアニメーションで有名な Typeface Animator を参考に作られています。
既に触られたことがある方は、PositionNoise まで読み飛ばしても問題ありません。

Position と 時間

1文字ごとに座標を持ち上げてみます。
Time は 1、From は 0, 0, 0、To は 0, 1, 0 に設定し、Curve は 右上がり に設定します。

すると、1秒 で 全体 の Y軸が+1 されるアニメーションになります。

ここで、Delay を 1.0 に設定してみましょう。
アニメーションは変わりませんが、1秒遅れて再生されたはずです。
つまり、2秒 で 全体 の Y軸が+1 されるアニメーションになります。

ではさらに、Wave を 0.25 に設定してみましょう。
すると、4.5秒 で それぞれ の Y軸が+1 されるアニメーションになります。

Wave は、各文字を 0.25秒 ずつ遅らせてアニメーションさせる機能になります。
全体のアニメーションが終了にかかる時間が 1秒 から 4.5秒に増えたのはその為です。
（末尾文字のアニメーションが終了する時間は、『Delay + (文字数 - 1) * Wave + Time』となります）

今回のテキストは『Sample Text』の 11文字(半角スペース込) なので、1.0 + (11 - 1) * 0.25 + 1.0 = 4.5秒 となりました。
この時間の考え方は、回転などと連動する際に役立てられます。

Rotation

1文字ごとに回転してみます。
Time は 1、From は 0, 0, 0、To は 0, 360, 0、Wave は 0.25、Curve は 右上がり に設定します。

Y軸の360度回転されるアニメーションになります。

Scale

1文字ごとに拡縮してみます。
Time は 1、From は 1, 1、To は 1.5, 1.5、Wave は 0.25、Curve は 下画像のように設定します。

通常サイズから1.5倍にスケールされるアニメーションになります。
Curveの設定の通り、最後は元の通常サイズに戻ります。

Alpha

1文字ごとに透明にしてみます。
Time は 1、From は 1、To は 0、Wave は 0.25、Curve は 下画像のように遊びます。

Curveの設定どおり、明滅しながら透明になるアニメーションになります。

Color

1文字ごとにカラフルにしてみます。
Time は 1、Wave は 0.1、Curve は 右肩上がり、Gradient は 下画像のように設定します。

ゲーミングなアニメーションになります。

Position Noise

座標にノイズを加えます。
Time は 1、Wave は 0.25、Curve は 2.0 から 0.0 への 右下がり に設定します。

ノイズの設定は、ノイズテクスチャ と Curve によって調整されます。
今回ノイズテクスチャは、PackageManager よりインポートできるサンプルのアセットを利用していきます。

NoiseTexture は ①XYZNoizeTexture、Offset は 0.8, 0、Tiling は 1, 1 に設定します。

Curve が 右下がりなので、バラバラになっていた文字が元に戻るようなアニメーションになります。

ここで、Speed を 0.1, 0 に設定してみます。
すると、バラバラに動く文字が元に戻るようなアニメーションになります。

さらに、Offset を 0, 0 に戻し、 Tiling を 0.1, 1 に設定してみます。
すると、バラバラな動きに規則性が生まれます。ノイズテクスチャのタイリングが緩やかになったためです。

このように、ノイズ系はNoiseTexture、Curve、Offset、Tiling、（Speed）で調整していきます。
② YWaveNoiseTexture に差し替えれば、波打つようなアニメーションに切り替わります。
テクスチャを作成して色々試してみましょう。

Rotation Noise

回転にノイズを加えます。
Time は 1、Wave は 0.25、Curve は 360.0 から 0.0 への 右下がり に設定します。
NoiseTexture は ①XYZNoizeTexture、Offset は 0.3, 0、Tiling は 1, 0 に設定します。

すると、バラバラに向いた文字が元に戻るようなアニメーションになります。

Scale Noise

サイズにノイズを加えます。
Time は 1、Wave は 0.25、Curve は 0.5 から 0.0 への 右下がり に設定します。
NoiseTexture は ①XYZNoizeTexture、Tiling は 1, 0 に設定します。

すると、バラバラなサイズの文字が元に戻るようなアニメーションになります。

Curve が 0.0 であればサイズが 0.0 になりそうなところですが、
”元に戻す”を前提に作っているので、影響度が 0.0 の時に元のサイズになるように作っています。

Speed を使うことで、ふわふわしたアニメーションを作ることもできます。是非試してみてください

Alpha Noise

透明度にノイズを加えます。
Time は 1、Wave は 0.25、Curve は 1.0 から 0.0 へ 右下がり に遊びを加えたものを設定します。
NoiseTexture は ①XYZNoizeTexture、Tiling は 1, 0 に設定します。

すると、バラバラな透明度の文字が明滅しながら元に戻るアニメーションになります。

Color Noise

色にノイズを加えます。
Time は 1、Wave は 0.25、Curve は 1.0 から 0.0 へ 右下がり に設定します。
NoiseTexture は ①XYZNoizeTexture、Offset は 0, 0.65、Tiling は 1, 0 に設定します。

すると、バラバラな色の文字が元に戻るアニメーションになります。
影響度が 1.0 の場合、ノイズテクスチャのカラーが乗算された色が着色されます。

最後に

いかがでしたでしょうか？
ノイズの Curve に微妙に癖がありますが、組み合わせて使うと結構面白いです。
ご要望等があれば、改修や追加実装していきたいと思いますので、ドシドシご応募(？)ください。