Unityでテキストをアレコレしてみた
アレコレした結果
今回使用したフォントはこちら
TextMeshProとはUnityで綺麗なアウトライン付きのテキストを表示するときに使うアセットです。例えば下のような感じ。
少し前までそれくらいにしか思ってなかったです。
だからアウトライン出すだけのためにTextMeshPro用のFontAssetをつくるのがめんどくせーと思っていました。
で、ゲームが完成に近づくにあたってタイトルロゴやサブタイトルが寂しいなぁと。
もっと凝ったものになると画像や３Ｄモデルを作ったりすると思うのですが、私にはそんな技能はないのでできるだけアセットでナントカならないかなとアレコレやりました。
TextMeshProのインスペクタに表示される情報です。
赤矢印の先の三角をクリックするとシェーダーの情報が表示されます。
赤丸の部分を調整することでアウトラインの太さを調整できます。
他の設定をいじることで
Underlayで影をおとしたり
Lightingで凹凸をだしたり
Glowで光沢をだしたり
などができます 。
Color Gradientにチェックをいれると四隅の色を設定できます。
上部を赤にして、下部を白にしてみました。
フォントにセンターラインを表示する方法。
センターライン画像を用意する。
私が作りました。ご自由にお使いください。
Vertex Colorにフォントの下色を設定する。
FaceのTextureにセンターライン画像を設定する。
すると下記のようになる。
TextMeshPro のデフォルトのシェーダーでは上手くいかないので編集したものを使用する。
デフォルトのシェーダーは画像のアルファ値がそのまま反映されてしまうので、下色とFaceが合成された色になるシェーダにする。
コピー元：Assets/TextMesh Pro/Resources/Shaders/TMP_SDF.shader
コピー先：Assets/TextMesh Pro/Resources/Shaders/TMP_SDF Alpha Blend
TMP_SDF Alpha Blend の下記の部分を編集する
Shader "TextMeshPro/Distance Field" {
↓
Shader "TextMeshPro/Distance Field Alpha Blend" {
faceColor.rgb *= input.color.rgb;
↓
half4 texColor = tex2D(_FaceTex, input.textures.xy + float2(_FaceUVSpeedX, _FaceUVSpeedY) * _Time.y);
faceColor.rgb = input.color.rgb + (((texColor.rgb * faceColor.rgb) - input.color.rgb) * texColor.a * faceColor.a); faceColor.a = 1;
シェーダーを編集したものに変更するとセンターラインが入る。
FaceのColorやTiling、Offset を編集するとセンターラインの色や大きさを変更できる
例えば下記のように変更するとまた違った雰囲気になる
虹と光が流れるテキストの作り方。
虹色でシームレスの画像を用意する。
今回使用した画像はここから
スクロールする画像のWarp ModeをRepeatにする。
そしてFaceのTextureに虹画像を設定すると以下のようになる
上記の方法だと１文字単位で虹がかかっている。
１行単位で虹をかける方法。
複数行にわたって虹をかける方法
虹をスクロールさせる方法。
下記のように設定して確認のためにエディタを実行する。
光をスクロールさせる方法
UIEffect内のUIShinyを使用する。
UIEffectはここからDLする。
UIEffectをAssets内に配置したらUIShinyをAddComponentする。
UIShinyをAddComponentするとテキストが非表示になるがインスペクタのUIShinyの右下のFixボタンを押すことで表示される。
次に光のスクロールを設定する。
今回は下記の用に設定して確認のためにエディタを実行する。
BrightnessやGlossを変更しても光が弱いなぁと思ったときはFaceのColorで彩度をおとすと光っているように見えると思います。
今回私がTextMeshProでやってみた装飾はこんなものでした。（他にもいい方法があったらツイッターなどで教えてください！）
ただこれだけだとテキスト自体に動きがないので少し寂しいです、
で、私はTextFXというアセットを愛用しています。
このアセットをつかうと入場して待機して退場しての一連の動きを簡単に設定できます。
例えば下のような感じ。
上記のアセットのページからWebGLのデモがみれるので興味のあるかたはご覧ください。
おまけ
FaceのTexture等にお使いください。
