This content will be retired soon
This learning content is being retired and may no longer be available in the future. Consider completing it soon or checking out newer learning resources.

VR ユーザーインターフェース (UI)
Tutorial
Beginner
+10XP
45 mins
(13)
Unity Technologies
以下の方法を学びます:
- Text Mesh Pro を使った Crisp Text の作成
- Google Fonts からカスタムフォントをインポートしてText Mesh Pro で使用する
- 手への「ジャンプ」を回避する Precision Grab Interactable オブジェクトについて
1. ワールド空間での新しいキャンバス
- GameOBject > UI > Canvas の順に選択します。
- Inspector 内では「Render Mode」が World Space に設定されています。
- Width (幅) を 3、Height (高さ) を 4 に設定し、X position (位置) を -4.23、Y position (位置) を 2.06 に設定します。
- キャンバスを Y 軸で -90 度回転させます。
- テキストの追加(右クリック > UI > TextMeshPro)TMP がない場合は、Window > Package Manage と移動してインストールしてください。
- Inspector で、テキストの Width を 3 に、Height を 4に設定します。
- フォントサイズを 0.7 に設定し、テキストを Center (中央) に配置します。
2. Google カスタムフォント
- fonts.google.com にアクセスし、フォントを選び、「+」ボタンをクリックします。
- 表示されるボックスで「1 Family Selected」をクリックし、ダウンロードボタンをクリックします。
- フォントを取り出し、TTF(TrueType Font)を Unity にドラッグして取り込みます。
- フォントを TextMeshPro (TMP) で使えるようにするには、Window > TextMeshPro > Font Asset Creator の順に進みます。
- Font Asset Creator ウィンドウで、取り込んだフォントを「Source Font File」フィールドへドラッグします。
- 「Generate Font Atlas」ボタンをクリックします。
- 「Save As」をクリックし、フォルダーへ保存(Assets > TextMeshPro > Resources > Fonts & Materials フォルダーの順に選択)したら、Font Asset Creator ウィンドウを閉じます。
- Hierarchy から TextMeshPro Text を選択した状態で、新しく作成した TMP Font Asset(F アイコン)を Inspector ウィンドウの「Font Asset」フィールドへドラッグします。
3. テキストフォーマット
- 「Jump Start!」が 1 行に収まるようにフォントサイズを調整します(私は .41 を使用)。
- Inspector ウィンドウで「Underlay」(ドロップシャドウ) を追加します。設定を使いました:Offset X: .46、Offset Y: -.82、Softness: .137
- Hierarchy の中で、TMP テキストを複製し(Control + D)、タイトルを「JumpStartText」とし、新しいコピーを「Directions」とします。
- Inspector のテキストフィールドに、指示(クランプを接続する順番)を追加します。私は以下のテキストを使いました:
- Red Good
- Red Dead
- Black Good
- Black Dead
- テキストの左揃え(左揃えボタンをクリック)
- Hierarchy でキャンバスを選択し、Y の位置を下に移動させます。私は .42 を使ったので、それほど高い位置にはありません。
4. テキストのビルボード背景
- Assets > VRTK > Prefabs > Interactions > Interactables の順に選択して Interactable プレハブキューブ(先ほど使用したものと同じなので、後でこれを小さな「クリップボード」サイズの指示に縮小することができる)をドロップします。
- キューブの scale を X:1, Y:2.59, Z:3.2 に、position をX:-4.85, Y:1.31, Z:-0.8 に設定
- Hierarchy で、Interactable プレハブの名前を「Billboard」に変更します。
- Canvas を Billboard にドロップして、子オブジェクトにします(ビルボードとキャンバス&テキストを一緒に動かせるようになる)。
5. クリップボードサイズについて
- Hierarchy の中で、Billboard を複製(control + D)し、名前を「Clipboard」とします。
- Clipboard のスケールを X:0.1, Y:0.2, Z:0.2 に設定します。
- 頂点スナップ(Control + Drag)で Clipboard をクランプテーブルに移動させます。
- オプション:Test SZ と Cylinder を Hierarchy で選択し、Inspector ウィンドウの上部にあるボックスをオフにすることで、邪魔な「Test SZ」と Cylinder を非表示にします。
6. 調整して、正確にオブジェクトを掴む
- Hierarchy で、Clipboard 内の Canvas を選択します。X の位置を調整して、キューブに近づけます。私は X: 0.51 を使用しました。
- Play モードでは、現在、Clipboard を手に取ると、手の上で予期せぬ方向に「スナップ、 snap」します。もっと正確に変更しましょう。
- Hierarchy の中で、Clipboard > Interaction Logic > Interactable.GrabLogic > Actions > PrimaryAction の順に展開し、Interactable.GrabAction.FollowAction を選択します。
- Inspector で、Grab Offset のドロップダウンメニューを「Precision Point」に設定します。
クランプを掴んだとき(手の向きに合わせてジャンプする)と、クリップボードを掴んだとき(ジャンプしない)の違いを試してみましょう。