Super Text Meshで素敵なテキスト表示してみる

<a href="https://www.assetstore.unity3d.com/jp/#!/content/57995" target="_bank">
<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/ce3a23e7-c288-771d-08c8-f78140118b21.png"></a>

##なにができるの？
cssを書くような感じでテキストの色を変えたり、アニメーションさせたり、絵文字みたいな画像を文字の間に入れたりできます。
フォントは画像にする必要はなく、そのままフォントファイルのままで使えます。
Text系のアニメーションのアセットはいろいろあるけれど、こちら指定が楽そうなので今回はこれを使うことにしました。

##環境
mac
Unity5.6.1f3


##インポートしたところ
<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/1e18c574-2b02-3a94-b402-16e3e47a0bf8.png" width="150px">

##早速試してみる
Hierarchy->3D Object->Super 3D Textを選択
<img width="200" alt="21-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/8cfde731-30ba-5c70-38d3-8cb5bca02a08.png">

するともうきらびやかなテキストが表示されました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/8c1834f5-48af-2123-1010-b725d15be234.gif">

###インスペクターはこちら
右上のTマークを押すと、画像右の表示に切り替わり、アニメーションのカスタマイズ設定などができます。
<img width="250" alt="21-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/088921c3-cc99-d9b2-b3aa-f311e9272490.png"><img width="250" alt="21-4.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/c4a5b88c-2661-7fc3-366c-fdbd4530a9fc.png">

例えば、編集画面のTextColorがデフォルトでこのように設定されているのですが・・・
<img width="300" alt="21-5.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/f3a2d590-397f-9e95-879f-e27e9c395896.png">

この場合Textにこう書くと・・・・

```
<c=rev>あゆめぐ</c>
```

<img width="229" alt="21-6.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/3bdaab48-3064-798b-1a62-2bc8534e1e9e.png">
こんな風に表示されます。

##カスタマイズ設定でできることを見てみる
カスタマイズの設定をいろいろ見ていきます。
カスタマイズしたデータは
Clavian/SuperTextMesh/Resources フォルダ配下にそれぞれ配置されます。
<img width="400" alt="21-7.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/9f135548-f66f-ac9f-d065-f3e116213921.png">
デフォルトで定義されているアニメーションを表示してみます

###Effect
- Waves:上下運動するような波の動きのアニメーションができます
- Jitters:ガタガタと動くようなアニメーションができます
- Draw Animations:テキストの表示方法です。

```
<w=seasick>seasick</w>
<w=3Dwave>3Dwave</w>
<w=default>default</w>
<w=sassy>sassy</w>

<j=crazy>crazy</j>
<j=underground>underground</j>
<j=sample>sample</j>
<j=default>default</j>

<drawAnim=Appear>Appear</drawAnim>
<drawAnim=Blink>Blink</drawAnim>
<drawAnim=Fade>Fade</drawAnim>
<drawAnim=Fill>Fill</drawAnim>
<drawAnim=Fly>Fly</drawAnim>
<drawAnim=Grow>Grow</drawAnim>
<drawAnim=Stamp>Stamp</drawAnim>
```
<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/7f00a12d-42de-85f5-5551-68b775159dac.gif">



###Text Color

- Colors:シンプルに色をつける
- Gradients:グラデーション。グラデーションの向きや速度などのアニメーション設定などもできる
- Textures：画像を使える。スクロール設定もできる。

```
<c=rev>rev</c>
<c=rainbow>rainbow</c>
<c=blink>blink</c>
<c=watermelon>watermelon</c>
<c=fire>fire</c>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/416442a7-7c8f-5f73-9c78-fb97af716a8e.gif">

###Inline
- Delays：遅延 d=秒数 で直接指定するすることもできる
- Voices:下のAudioClips SoundClips、音量調整などまとめてTextに入力して設定できる
<img width="452" alt="21-9.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/54fb3639-e157-6223-3cb7-f205634b76fc.png">

- Fonts:フォントファイルを切り替えできる
- AudioClips:文字を表示するときに流れるSEを設定できる。複数指定できる
- SoundClips:改行時になるSeの設定ができる。複数指定できる
- Quads:テキストの間に画像を表示できる。動くのもできる。
- Materials:マテリアルの指定ができます

```
<v=typewriter>今日は<d=5>いい天気です
<f=walibi>今日はいい</f><f=arial->天気です</f>
<q=anybutton>あ<q=clap>あ<q=circle><q=pressA><q=square><q=triangle>
<m=dropshadow>今日は</m>いい天気です
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/96bd2af8-1f75-2868-9ccf-a578140d8d6c.gif">

<h3>Automatic</h3>
- AutoDelays:特定の文字の後に遅延を設定できる。カンマやコロン、タブやスペースなど。
- AutoClips:特定の文字の後にSeを再生できる

###Master
- Disable Animatied Text: これにチェックを入れるとアニメーションしなくなる

###その他のタグなど
太字のb
イタリックのi
フォントサイズのsize
あとはカスタムイベント用のeなどあります。
一覧は<a href="http://supertextmesh.com/docs/SuperTextMesh.html" target=_blank>マニュアル</a>のc. Rich Text Tagsのところを見るといいかと思います。


##イベント
一通りできることはわかったので関数周り見ていきます
イベントは下記４つ受け取れます
<img width="200" alt="21-10.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/ac62bb68-a1f9-6dd2-5826-2e70b52b822b.png">
- On Rebuild Event
- On Complete Event
- On Undrawn Event
- Custom Event(string, TextInfo):eタグが指定された時呼び出される。TextInfoから位置など取得できる。これにより、テキストの任意のタイミングで絵を変えたりエフェクトを出したりが可能。

<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/3c59f31f-71d4-c127-c82b-176074b590c2.gif">

このカスタムイベント非常に便利！

##テキストを曲げたい
テキスト全体を曲げることも可能です

手っ取り早くやるのであればSampleフォルダにあるSTMVertexMod.csをアタッチし、
Super Text MeshのインスペクタのModify Verticesのチェックを入れて
そこのイベントにSTMVertexMod.ApplyCurveToVerticesを設定。
<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/4f919c56-9ee7-1026-da7f-c83bbd5d81e7.png">

あとはSTMVertexModの設定をいじるだけでこんな感じにまげたりできます!<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/b92a43b1-a0d7-1701-af08-2fc864233d67.png">

##シェーダー周り
幾つかシェーダーがあります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/16331e21-d76b-6a02-e3f7-654f825e83c3.png">

それぞれマテリアルを作って設定してあげればOKです。
ライトの影響をうけるものやドロップシャドウ、アウトラインなどそろってます。

はい、ここまで