ゴマちゃんフロンティア

アザラシが大好きなエンジニアの開発日記です

【Unity】「Text Mesh Pro」でタイトルロゴをちょっとリッチにしたお話

time 2019/03/04

今回は自作ゲームのタイトルロゴに関するお話です。
今までタイトルロゴはUnityのUIコンポーネント「Text」で文字を入力し、フォントや色を設定していました。輪郭を付けてもちょっと地味な感じは否めません。

しかし最近のUnityには「Text Mesh Pro」なるものがあるらしく、これを使うとリッチな文字表現ができるそうな!
興味本位で触ってみた結果、上のタイトルロゴが以下のような感じに変わりました。

パッと見ではそこまで大きな変化はありませんが、普通のTextよりは立体的でテクスチャやライティングも効いた感じになっており、ロゴとしては以前よりマシなものになりました。
そんな「Text Mesh Pro」の使い方について、私がやったことベースでお話します。

やったこと

フォントの準備

まずはメニューの「Window」→「TextMeshPro」→「Font Asset Creator」を選択し、フォントの設定画面を表示します。

「Source Font File」で使用するフォントを選択します。今回は「ふんわりラウンド」を使用しました。
私のブログや他の自作ゲームにも使われている、ポップで可愛らしいデザインが良いフォントです。
http://suzukimemo.com/post-1302

フォントには平仮名が含まれていますが、日本語文字はそのままでは使用できないようで、自分で指定する必要があります。
そこで「Character Set」を「Custom Characters」に切り替え、テキストボックスに使う文字を入力します。

タイトルロゴで使用するだけなので、タイトルの平仮名をそのまま指定しました。
設定できたら「Generate Font Atlas」をクリックします。

上のようなプレビューが出るので、「Save as」で保存しましょう。

UI用のTextMeshProを追加

メニューの「GameObject」→「UI」→「TextMeshPro – Text」を選択し、Canvasの下に新規ゲームオブジェクトとして「Text Mesh Pro」を追加します。
Canvas内に適当に配置したら一度再生してみましょう。

画面上に上手く表示されない場合、ゲームオブジェクトに「Canvas Renderer」コンポーネントが設定されているか確認してみてください。
私の失敗談として3Dオブジェクトの方を選択してしまっていたことがあり、その場合は「Mesh Renderer」が付いています。

マテリアルプリセットの作成と選択

「Material Preset」にはデフォルトのマテリアルが指定されていますが、今回は自分好みにパラメータを設定したいため、新しいマテリアルを作成します。
アセットで先程フォントを保存した階層へ行き、.assetファイルを展開してマテリアルを選択します。

インスペクターにマテリアルの情報が表示されたら、オブジェクト名左のアイコン(?)を右クリックし、「Create Material Preset」を選択すると、同階層内に新しいマテリアルができます。

作成できたらシーン上のTextMeshProのオブジェクトを選択し、使用するマテリアルを切り替えます。

私の場合は「ばくれつうさぴょん」というタイトルの「ばくれつ」と「うさぴょん」でマテリアルを分けたかったので2つ作成しました。

マテリアルパラメータの調整

以下のような感じでパラメータを指定しました。展開されていない項目は何も変更していません。

まずはFaceのテクスチャです。
今回は「Cartoon Ground and Floor Textures」というアセットのものを使用しています。
https://assetstore.unity.com/packages/2d/textures-materials/floors/cartoon-ground-and-floor-textures-68398

ちょうど「Snow」という雰囲気の合うテクスチャがあったので、それを使いました。
また、Textureの「Speed」のXYにそれぞれ値を設定すると、その方向にテクスチャをスライドさせることもできます。

次にLightingです。「Face Color」はRGB150、「Outline Color」はRGB100くらいにしてみました。
反映させると以下のような感じ。

ちなみに反映させないと下のような感じです。特に文字の輪郭のイメージがかなり変わってきますね。

その他にもかなりいろいろ出来るみたいなので、興味のある方はあれこれいじってみてください。

あとがき

そんなわけで、Unityの「Text Mesh Pro」でタイトルロゴを作ってみました。
通常のTextと比べて下準備がちょっと手間ですが、かなりあれこれできる上、エディタ上のパラメータをいじって簡単な調節できる点が魅力的ですね。

down

コメントする