クロの制作日記

クロの制作日記

田舎の大学生がUnityとか機械学習関連の制作物をひたすらアップします。ブログで紹介したコード一覧https://github.com/kuroshum/blog_code

Unityでテキストの点滅を実装(TextMeshPro)

前置き

ゲームのタイトル画面を作っている時に色々なゲームのUIを調べていたんですが、多くのゲームで、そのUI(ボタンとか)を選択しているときは、文字やそのUI自体が点滅していることに気が付きました。

確かに点滅させると、自分が選択しているのが理解しやすいですし、また、選択を促している感じがでて良いんですよね。

なので今回と次回の2回にわたって、
 ①テキストの点滅
 ②選択されているボタンのテキストを点滅させる

をやっていきたいと思います。

じゃあ早速、①のテキストの点滅の実装をしていきます

とりあえずの結果がこれです。
f:id:kurora-shumpei:20180829000043g:plain


もうちょっと光っている感じを演出したかったのですが...、まあこれでも十分それっぽく見えるので良しとしましょう。



準備

この点滅をどうやって実装しているかというと、UnityのTextMeshProという機能を使っています。

assetstore.unity.com

少し前までは、有料のアセットだったらしいのですが、今では無料かつUnityのUIの機能に含まれているので、誰でもすぐに使えるようになっています。

使用方法は、UI→TextMeshPro - Text から選択するだけです。

f:id:kurora-shumpei:20180830000012p:plain


選択したら下の画像のようなポップアップが出てくるので、どっちもImportしたら良いと思います。(上だけでも大丈夫なのかもしれないですが...)

f:id:kurora-shumpei:20180830003256p:plain


ImportしたらTextMeshPro - Textのインスペクター上にLiberationSans SDF Materialが追加されていると思います。

f:id:kurora-shumpei:20180830005504p:plain


この中にある色々なカテゴリーの数値をいじることで、テキストに効果をつけることができます。

また、TextMeshProの便利なところは、そのカテゴリーの数値などをスクリプトから操作できるところです。

スクリプトから数値を操作できれば、ゲームプレイ中にも動的に効果を変化させることができます。

今回はそのカテゴリーの中から、Outlineを使って点滅を実装していきます。

実装

実際にOutlineの設定を色々いじってみればわかると思いますが、
 Color    → アウトラインの色
 Thickness → アウトラインの太さ
となっています。
なので、点滅しているように見せるためには、このThicknessの値を0 ~ 1の間で変化させてあげればよいはずです。

それを実装したスクリプトが以下のものです。

リポジトリにスター付けてくれたら明日も頑張れます。

TextHilight.cs

github.com

このスクリプトを点滅させたいテキストに追加すればOKです。

また、今回の場合はOutlineのThicknessの設定をスクリプトからいじりましたが、もちろん他のカテゴリの設定をスクリプトからいじることが可能です。
上のスクリプトで言うと、

material.SetFloat("_OutlineWidth", Mathf.Abs(Mathf.Sin(num)) * 2 / 5);

の _OutlineWidth を指定のものに変えてあげれば設定をいじることができます。

どの変数がどのカテゴリに対応しているかを確認するためには、
 ① インスペクター上のLiberationSans SDF Materialを右クリック or 設定をクリック
 ② Edit Shaderを選択
すれば確認できます。

別の数値をいじりたい場合の参考にしてください。




最後に

今回はテキストの点滅を実装しました。

これでタイトル画面に動きがでて、前より少しは良くなったと思います。

今回はテキストの点滅でしたが、次回はボタンが選択されている状態のときだけ、エフェクトを表示させ点滅させるということを実装します。


kurora-shumpei.hatenablog.com