【Unity VRゲーム制作】#28 オブジェクトの説明を追加する＜Text Mesh ProでUIをつくる＞
こんにちは！ぶぁんぶーる・らぼの大島です。
今回の記事では、前回作成した「Interactableオブジェクト」がどの「Movement Type」かをわかりやすくするためのUIを用意していきたいと思います。
Text Mesh Proの準備
①Text Mesh Proとは？
「Text Mesh Pro」は次のように解説されています。
強力で使いやすい TextMeshPro (TMP) は、高度なテキストレンダリング技術と一式のカスタムシェーダーの使用によって、テキストのスタイリングとテクスチャリングに関して非常に高い柔軟性を提供しながら、視覚的な品質を大幅に向上させます。
TextMeshPro を使用すると、テキストのフォーマットとレイアウトに際してより高度な制御が可能になります。例えば、文字・行・段落の間隔調整や、カーニング、テキストの両端揃え、リンク、30 種類を超えるリッチテキストタグ、複数のフォントやスプライトのサポート、カスタムスタイルなどの機能を備えています。
TextMeshPro は素晴らしいパフォーマンスも備えています。TextMeshPro で作成されたジオメトリは、Unity のテキストコンポーネントと同様に 1 文字ごとに 2 つの三角形を使用するため、パフォーマンスの負荷を増加させることなくビジュアル品質と柔軟性を向上させることができます。
従来の「Text」は「Legacy」になってしまっているので、使わないようにしていく必要があるようです。最初の設定させできてしまえば、より綺麗で便利な「Text Mesh Pro」を使えるようにしていきましょう。
本記事ではテキストにこだわらず、必要最小限の設定で「Interactableオブジェクト」を説明するUIを作成していきます。
②Text Mesh ProのImport
「Window」の「Text Mesh Pro」で「Import TMP Essential Resorces」をクリックしてください。
「Import Unity Package」ウインドウが表示されるので、何も変更せずに「Import」を選択してください。
③日本語フォントを準備する
使用する日本語フォントを用意してください。
このとき、使用に際して問題がないか「フォントの利用条件」をよく確認するようにしてください。
本記事では「Google Fonts」にある「Noto Sans Japanese」を使用しますが、利用規約を自己責任において確認をしてください。
・About ＆ Licenseについてはこちらか
ホームページ右上にある「Download family」をクリックしてください。
ダウンロードして解凍したファイルを、「Assets」→「Text Mesh Pro」のフォルダにフォルダごとドラッグ＆ドロップしてください。
③文字テキストを準備する
「Text Mesh Pro」では使用する文字のリストを準備する必要があります。
文字データのリストは、下記のページの方がGitHub Gistで提供してくださっているので、こちらのデータをダウンロードしてください。
ダウンロードの方法は、画面右側にある「Download ZIP」をクリックしてください。
https://gist.github.com/kgsi/ed2f1c5696a2211c1fd1e1e198c96ee4
ダウンロードしたデータを回答すると大量の文字が入力されたテキストデータがあると思います。
④文字をクリエイトする
「Window」の「Text Mesh Pro」で「Font Asset Creator」をクリックしてください。
「Font Asset Creator」ウインドウが表示されます。
「Source Font File」に対応させたいフォントデータを選んでください。ここでは「Noto Sans Japanese Medium」を設定しました。
「Atlas Resolution」をどちらも「8192」にしてください。
「Character Set」を「Custom Characters」にしてください。
さきほどダウンロードして解凍した大量のテキストデータの「japanise_full.txt」を開き、「Ctrl + A」で全選択したあと、「Ctrl + C」でコピーしてください。
コピーできたら、「Font Asset Creator」ウインドウの「Custom Character List」に「Ctrl + V」で貼り付けてください。
貼り付けることができたら、「Generate Font Atlas」をクリックしてください。処理に結構時間がかかりました。パソコンの性能にもよるかもしれませんが、ゆっくり待ちましょう。
「Missing characters」が20個あると記載されていますが、特に問題にならないのでこのまま「Save as…」をクリックしてフォントを保存してください。
任意のフォルダに名前を付けて保存すると「Noto Sans JP-Medium SDF.asset」データが出来上がります。
このデータが日本語も使えるようになった「Text Mesh Pro」で設定できる「Font Asset」になります。
他のフォントも使用したい場合は、「Source Font File」を変更して作業を繰り返してください。
CanvasとPanelの準備
①Canvasを準備する
「Hierarchy」の何もないところで右クリックしてメニューを開き、「UI」の「Canvas」を選択してください。
「Canvas」の名前を「Interactable info」に変更してください。
「Interactable info」の「Inspector」で「Canvas」の設定していきます。
「Render Mode」で「World Space」を選択してください。
「Event Camera」で「XR Origin」→「Camera Offset」→「Main Camera」をアタッチしてください。
「Additional shader channels」で「Tex Coord1,Normal,Tangent」を選択してください。
「Vertex color Always in Gamma Color space」のエラーをなくすために、「File」にある「Build Settings」から「Player Settings」ウィンドウを表示してください。
「Project Settings」にある「Player」の「Other Settings」の「Rendering」内にある「Color Space」を「Linear」から「Gamma」に変更してください。
さきほどまであったエラーがなくなりました。
「Graphic Raycaster」を「Remove」してください。
「Interactable info」の「Inspector」にある「Add Component」をクリックして「Tracked device Graphic Raycasterスクリプト」を追加してください。
「Tracked device Graphic Raycaster」を設定した「UI」は「Ray interactor」の判定を実施してくれるようです。
今回は操作を必要としないUIですが、ボタンなどを配置するUIの場合、設定は必須と思われます。
Canvasに対するレイ キャストに使用されます。
Raycaster は、キャンバス上のすべてのグラフィックを調べ、追跡されたデバイスからの光線がそれらのいずれかに当たったかどうかを判断します。
最後に「Interactable info」の「Inspector」にある「RectTransform」を図のように変更してください。
②Panelを準備する
「Hierarchy」にある「Interactable info」を右クリックしてメニューを開き、「UI」の「Panel」を選択してください。
「Panel」の名前を「Main Panel」に変更してください。
「Inspector」にある「Image」の「Color」の値を調整してください。ここでは、黒色の不透過を「0.8」に設定しています。
③Text Mesh Proを準備する
「Hierarchy」内にある「Main Panel」を右クリックしてメニューを開き、「UI」の「Text-Text Mesh Pro」を選択してください。
「RectTransform」の「Anchor Presets」をクリックして開き「Stretch-Stretch」を選択してください。選択したら、「Bottomだけ200」に変更し、それ以外は「0」にしてください。
「Text Mesh Pro」を設定してください。
「Font Asset」にさきほど準備した「Noto Sans JP -Medium SDF」を設定することで日本語を入力しても文字化けをしなくなりました。
④完成したテーブル
「Interactable info」の構成と完成図を載せておきます。
全部説明すると大変なので、「Panel」と「Text Mesh Pro」を使用して図のようなテーブルを作成してください。
UIなので、具体的な内容が変わっていても大丈夫です。
おわりに
テーブルがかっこよくなりました。
オブジェクトの「Movement Type」がよくわかるようになりました。
ここまで読んでくださり、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？