3. ユーザーインターフェイスを作成し、Mixed Reality Toolkit を構成する3. Creating user interface and configure Mixed Reality Toolkit

前のチュートリアルでは、HoloLens 2 の最初のアプリケーションを開始することで、Mixed Reality Toolkit (MRTK) が提供する必要のある機能の一部について学習しました。In the previous tutorial, you learned about some of the capabilities the Mixed Reality Toolkit (MRTK) has to offer by starting your first application for the HoloLens 2. このチュートリアルでは、UI テキストパネルと共にボタンを作成および整理し、既定の対話機能 (タッチ) を使用して各ボタンを操作する方法について説明します。In this tutorial you will learn how to create and organize buttons along with UI text panels, and use default interaction (touch) to interact with each button. また、オブジェクトのサイズ、音、色の変更など、単純なアクションや効果の追加も調査します。You will also explore the addition of simple actions and effects, such as changing the size, sound and color of objects. このモジュールでは、空間マッピングメッシュの視覚化を無効にしてから、MRTK プロファイルの変更に関する基本的な概念を紹介します。This module will introduce basic concepts about modifying MRTK profiles, starting with turning off the spatial mapping mesh visualization.

目標Objectives

  • Mixed Reality ツールキット プロファイルをカスタマイズおよび構成するCustomize and configure Mixed Reality Toolkit profiles
  • UI 要素とボタンを使用したホログラムとの対話Interact with holograms using UI elements and buttons
  • 基本的な手の追跡の入力と操作Basic hand-tracking input and interactions

Mixed Reality Toolkit プロファイルを構成する方法 (空間認識表示オプションの変更)How to configure the Mixed Reality Toolkit Profiles (Change Spatial Awareness Display Option)

このセクションでは、既定の MRTK プロファイルをカスタマイズして構成する方法について説明します。In this section, you will learn how to customize and configure the default MRTK profiles.

この特定の例では、空間メッシュオブザーバーの設定を変更して、空間認識メッシュを非表示にする方法を示します。This particular example will show you how to hide the spatial awareness mesh by changing the settings of the Spatial Mesh Observer. ただし、これらの同じ原則に従って、MRTK プロファイルの設定または値をカスタマイズすることもできます。However, you may follow these same principles to customize any setting or value in the MRTK profiles.

空間認識メッシュを非表示にするには、主に次の手順を実行します。The main steps you will take to hide the spatial awareness mesh are:

  1. 既定の構成プロファイルの複製Clone the default Configuration Profile
  2. 空間認識システムを有効にするEnable the Spatial Awareness System
  3. 既定の空間認識システムプロファイルを複製するClone the default Spatial Awareness System Profile
  4. 既定の空間認識メッシュオブザーバープロファイルを複製しますClone the default Spatial Awareness Mesh Observer Profile
  5. 空間認識メッシュの可視性を変更するChange the visibility of the spatial awareness mesh

注意

既定では、MRTK プロファイルは編集できません。By default, the MRTK profiles are not editable. これらは、編集する前に複製する必要がある既定のプロファイルテンプレートです。These are default profile templates that you have to clone before they can be edited. プロファイルには、入れ子になったレイヤーがいくつかあります。There are several nested layers of profiles. そのため、1つまたは複数の設定を構成するときに、複数のプロファイルを複製して編集するのが一般的です。Therefore, it is common to clone and edit several profiles when configuring one or more settings.

1. 既定の構成プロファイルを複製します。1. Clone the default Configuration Profile

注意

構成プロファイルは最上位レベルのプロファイルです。The Configuration Profile is the top level profile. そのため、他のプロファイルを編集できるようにするには、まず、構成プロファイルを複製する必要があります。Consequently, to be able to edit any other profiles, you first have to clone the Configuration Profile.

階層 ウィンドウでMixedRealityToolkitオブジェクトを選択した状態で、 & カスタマイズ ボタンをクリックして プロファイルの複製 ウィンドウを開きます。With the MixedRealityToolkit object selected in the Hierarchy window, in the Inspector window, click the Copy & Customize button to open the Clone Profile window:

mrlearning-base

複製プロファイル ウィンドウで、複製 ボタンをクリックして、 DefaultHololens2ConfigurationProfileの編集可能なコピーを作成します。In the Clone Profile window, click the Clone button to create an editable copy of the DefaultHololens2ConfigurationProfile:

mrlearning-base

新しく作成された構成プロファイルが、シーンの構成プロファイルとして割り当てられました。The newly created Configuration Profile is now assigned as the Configuration Profile for your scene:

mrlearning-base

Unity メニューで、[ファイル > 保存] を選択してシーンを保存します。In the Unity menu, select File > Save to save your scene.

ヒント

チュートリアル全体で作業内容を保存してください。Remember to save your work throughout the tutorial.

2. 空間認識システムを有効にする2. Enable the Spatial Awareness System

階層 ウィンドウでMixedRealityToolkitオブジェクトを選択した状態で、インスペクター ウィンドウで 空間認識 タブを選択し、空間認識システムを有効にする チェックボックスをオンにします。With the MixedRealityToolkit object still selected in the Hierarchy window, in the Inspector window, select the Spatial Awareness tab, and then check the Enable Spatial Awareness System checkbox:

mrlearning-base

3. 既定の空間認識システムプロファイルを複製する3. Clone the default Spatial Awareness System Profile

空間認識 タブで、複製 ボタンをクリックして プロファイルの複製 ウィンドウを開きます。In the Spatial Awareness tab, click the Clone button to open the Clone Profile window:

mrlearning-base

複製プロファイル ウィンドウで、複製 ボタンをクリックして、 DefaultMixedRealitySpatialAwarenessSystemProfileの編集可能なコピーを作成します。In the Clone Profile window, click the Clone button to create an editable copy of the DefaultMixedRealitySpatialAwarenessSystemProfile:

mrlearning-base

新しく作成された空間認識システムプロファイルが、構成プロファイルに自動的に割り当てられるようになりました。The newly created Spatial Awareness System Profile is now automatically assigned to your Configuration Profile:

mrlearning-base

4. 既定の空間認識メッシュオブザーバープロファイルを複製する4. Clone the default Spatial Awareness Mesh Observer Profile

空間認識 タブを選択したまま、Windows Mixed Reality 空間メッシュオブザーバー セクションを展開し、複製 ボタンをクリックして プロファイルの複製 ウィンドウを開きます。With the Spatial Awareness tab still selected, expand the Windows Mixed Reality Spatial Mesh Observer section, then click the Clone button to open the Clone Profile window:

mrlearning-base

複製プロファイル ウィンドウで、複製 ボタンをクリックして、 DefaultMixedRealitySpatialAwarenessMeshObserverProfileの編集可能なコピーを作成します。In the Clone Profile window, click the Clone button to create an editable copy of the DefaultMixedRealitySpatialAwarenessMeshObserverProfile:

mrlearning-base

新しく作成された空間認識メッシュオブザーバーのプロファイルが、空間認識システムプロファイルに自動的に割り当てられるようになりました。The newly created Spatial Awareness Mesh Observer Profile is now automatically assigned to your Spatial Awareness System Profile:

mrlearning-base

5. 空間認識メッシュの可視性を変更する5. Change the visibility of the spatial awareness mesh

空間メッシュのオブザーバーの設定で、表示オプション[オクルージョン] に変更します。これにより、まだ機能している間に空間マッピングメッシュが非表示になります。In the Spatial Mesh Observer Settings, change the Display Option to Occlusion to make the spatial mapping mesh invisible while still being functional:

mrlearning-base

注意

空間マッピングメッシュは見えませんが、まだ存在し、機能しています。Although the spatial mapping mesh is not visible, it is still present and functional. たとえば、物理的な壁の背後にあるホログラムなど、空間マッピングメッシュの背後にあるホログラムは、表示されません。For example, any holograms behind the spatial mapping mesh, such as a hologram behind a physical wall, will not be visible.

ここまで、MRTK プロファイル内の設定を変更する方法を学習しました。You just learned how to modify a setting in the MRTK profile. ご覧のとおり、MRTK の設定をカスタマイズするには、最初に既定のプロファイルのコピーを作成する必要があります。As you can see, in order to customize the MRTK settings, you first need to create copies of the default profiles. 既定のプロファイルは編集できないため、既定の設定に戻す場合は、常に参照として使用されます。Because the default profiles are not editable, you will always have them as reference if you want revert back to the default settings. MRTK プロファイルとそのアーキテクチャの詳細については、 Mrtk ドキュメントポータルMixed Reality Toolkit プロファイル構成ガイドを参照してください。To learn more about MRTK profiles and their architecture, you can visit the Mixed Reality Toolkit profile configuration guide in the MRTK Documentation Portal.

ハンドトラッキングジェスチャと対話型ボタンHand tracking gestures and interactable buttons

このセクションでは、ハンドトラッキングを使用してボタンをクリックし、イベントをトリガーして、ボタンが押されたときにアクションを発生させる方法について説明します。In this section, you will learn how to use hand tracking to press a button and trigger events to cause an action when the button is pressed.

この特定の例では、ボタンが押されたときにキューブの色を変更し、ボタンが離されたときに元の色に戻るように変更する方法を示します。This particular example will show you how to change the color of a cube when the button is pressed and change it back to it's original color when the button is released. ただし、同じ原則に従って他のイベントを作成することもできます。However, you may follow these same principles to create other events.

キューブの色を変更するには、次の手順を実行します。The main steps you will take to change the color of the cube are:

  1. シーンに pressable button prefab を追加するAdd a pressable button prefab to the scene
  2. シーンへのキューブの追加Add a cube to the scene
  3. InteractableOnPressReceiver イベントの種類を構成するConfigure the InteractableOnPressReceiver event type
  4. On Press イベントを受け取るようにキューブを構成するConfigure the cube to receive the On Press event
  5. On Press イベントによってトリガーされるアクションを定義しますDefine the action to be triggered by the On Press event
  6. On Release イベントを受け取るようにキューブを構成するConfigure the cube to receive the On Release event
  7. On Release イベントによってトリガーされるアクションを定義しますDefine the action to be triggered by the On Release event
  8. エディター内シミュレーションを使用してボタンをテストするTest the button using the in-editor simulation

1. シーンに pressable button prefab を追加する1. Add a pressable button prefab to the scene

ヒント

Prefabは Unity アセットとして保存されている構成済みのユーザーオブジェクトであり、プロジェクト全体で再利用できます。A prefab is a pre-configured GameObject stored as a Unity Asset and can be reused throughout your project.

[プロジェクト] ウィンドウで、 PressableButtonHoloLens2を検索して、この例で使用する prefab を探します。In the Project window, search for PressableButtonHoloLens2 to locate the prefab you will use for this example:

mrlearning-base

検索結果でPressableButtonHoloLens2 prefab を選択し、それを [階層] ウィンドウにドラッグしてシーンに追加します。In the Search result, select the PressableButtonHoloLens2 prefab and drag it into the Hierarchy window to add it to your scene:

mrlearning-base

ヒント

次の図に示すようにシーンを表示するには、[階層] ウィンドウで PressableButtonHoloLens2 オブジェクトをダブルクリックしてフォーカスを設定し、[シーン] ウィンドウの右上隅にあるシーンの Gizmoを使用して、前方 Z 軸に沿って表示角度を調整します。To display your scene as shown in the image below, double-click the PressableButtonHoloLens2 object in the Hierarchy window to bring it into focus, then use the Scene Gizmo, located in the top right corner of the Scene window, to adjust the viewing angle to be along the forward Z axis.

PressableButtonHoloLens2 オブジェクトを選択したまま、 [インスペクター] ウィンドウで次のようにします。With the PressableButtonHoloLens2 object still selected, in the Inspector window:

  • カメラの前に配置されるように変換位置を変更する (例: x = 0、y = 0、z = 0.5)Change its Transform Position so it's positioned in front of the camera, which is positioned at origin, for example, x = 0, y = 0, and z = 0.5

mrlearning-base

注意

一般に、Unity の1つの位置単位は、物理的な世界では1メートルとほぼ同じです。In general, 1 position unit in Unity is roughly equivalent to 1 meter in the physical world. ただし、オブジェクトがスケーリングされたオブジェクトの子である場合などに、この例外が発生します。However, there are exceptions to this, for example, when objects are children of scaled objects.

2. シーンにキューブを追加する2. Add a cube to the scene

[階層] ウィンドウ内の空の場所を右クリックし、[ 3D オブジェクト > キューブ] を選択して、キューブをシーンに追加します。Right-click on an empty spot inside the Hierarchy window and select 3D Object > Cube to add a cube to your scene:

mrlearning-base

キューブオブジェクトを選択した状態で、 [インスペクター] ウィンドウで次のようにします。With the Cube object still selected, in the Inspector window:

  • Pressable ボタンの近くに配置されるように変換位置を変更します。ただし、x = 0、y = 0.04、z = 0.5 など、重複しないようにします。Change its Transform Position so its located near the pressable button, but not overlapping with it, for example, x = 0, y = 0.04, and z = 0.5
  • 変換スケールを適切なサイズに変更します (たとえば、x = 0.02、y = 0.02、z = 0.02)。Change its Transform Scale to a suitable size, for example, x = 0.02, y = 0.02, and z = 0.02

mrlearning-base

3. InteractableOnPressReceiver イベントの種類を構成する3. Configure the InteractableOnPressReceiver event type

階層 ウィンドウで PressableButtonHoloLens2 オブジェクトを選択した状態で、インスペクター ウィンドウハンバーガーメニューすべてのコンポーネント を選択し、このオブジェクトのすべてのコンポーネントの概要を取得します。With the PressableButtonHoloLens2 object selected in the Hierarchy window, in the Inspector window hamburger menu, select Collaps All Components to get an overview of all components on this object:

mrlearning-base

対話型 (スクリプト) コンポーネントを展開し、[イベント > レシーバー ] セクションを探して展開します。Expand the Interactable (Script) component, then locate and expand the Events > Receivers section:

mrlearning-base

イベントレシーバーの種類Interactableonpressreceiverでは、相互作用フィルターNear と Farに変更します。For the Event Receiver Type InteractableOnPressReceiver, change the Interaction Filter to Near and Far:

mrlearning-base

注意

InteractableOnPressReceiver という名前のイベントレシーバーの種類を使用すると、追跡したハンドがボタンを押したときに、ボタンが押されたイベントに応答できるようになります。The Event Receiver Type named InteractableOnPressReceiver allows the button to respond to a pressed event when a tracked hand presses the button.

4. On Press イベントを受け取るようにキューブを構成する4. Configure the cube to receive the On Press event

[階層] ウィンドウで、 On press () イベントの [イベントのプロパティ] オブジェクトフィールドにキューブをクリックしてドラッグします。これにより、on press () イベントの受信者としてキューブが割り当てられます。From the Hierarchy window, click-and-drag the Cube into the Event Properties object field for the On Press () event to assign the Cube as a receiver of the On Press () event:

mrlearning-base

5. On Press イベントによってトリガーされるアクションを定義する5. Define the action to be triggered by the On Press event

[アクション] ドロップダウンをクリックし、[現在割り当てられている関数はありません] を選択し、[ MeshRenderer > material material ] を選択して、On Press () イベントがトリガーされたときに、キューブの material プロパティを変更するように設定します。Click the action dropdown, currently assigned No Function, and select MeshRenderer > Material material to set the Cube's material property to be changed when the On Press () event is triggered:

mrlearning-base

[素材] フィールドの横にある小さいアイコン (現在はNone (素材) が設定されている) をクリックして、[素材の選択] ウィンドウを開きます。Click the small circle icon next to the material field, currently populated with None (Material), to open the Select Material window:

mrlearning-base

[素材の選択] ウィンドウでMRTK_Standard検索し、適切な素材を選択します。たとえば、ボタンが押されたときにキューブの色がシアンに変更されるようにMRTK_Standard_Cyanします。In the Select Material window, search for MRTK_Standard and select a suitable material, for example, MRTK_Standard_Cyan so the Cube's color changes to cyan when the button is pressed:

mrlearning-base

6. On Release イベントを受け取るようにキューブを構成する6. Configure the cube to receive the On Release event

繰り返しOn release イベントの手順4では、On Release () イベントの受信者としてキューブを割り当てます。Repeat Step 4 for the On Release event to assign the Cube as a receiver of the On Release () event.

7. On Release イベントによってトリガーされるアクションを定義する7. Define the action to be triggered by the On Release event

繰り返しOn Release イベントの場合は手順5ですが、ボタンが離されたときにキューブの色が元の明るい灰色の色に戻るようにMRTK_Standard_LightGray素材を選択します。Repeat Step 5 for the On Release event, but choose the MRTK_Standard_LightGray material so the Cube's color returns to its original light gray color when the button is released:

mrlearning-base

8. エディター内シミュレーションを使用してボタンをテストする8. Test the button using the in-editor simulation

再生ボタンを押してゲームモードに入り、エディター内入力シミュレーションを使用して、新しく構成されたボタンをテストします。Press the Play button to enter Game mode and use the in-editor input simulation to test your newly configured button.

押されていないボタン (space + マウススクロールホイール後方):Button not pressed (spacebar + mouse scroll wheel backward):

mrlearning-base

押されたボタン (space + マウスのホイールを前方にスクロール):Button pressed (spacebar + mouse scroll wheel forward):

mrlearning-base

ヒント

エディター内入力シミュレーションの使用方法については、「エディターでの入力シミュレーションを使用して、 Mrtk ドキュメントポータルでシーンガイドをテストする」を参照してください。To learn how to use the in-editor input simulation, you can refer to the Using the In-Editor Hand Input Simulation to test a scene guide in the MRTK Documentation Portal.

MRTK のグリッド オブジェクト コレクションを使用したボタンのパネルの作成Creating a panel of buttons using MRTK’s Grid Object Collection

このセクションでは、MRTK の Grid オブジェクトコレクションツールを使用して、複数のボタンを適切なユーザーインターフェイスに自動的に配置する方法について説明します。In this section, you will learn how to automatically align multiple buttons into a neat user interface by using the MRTK’s Grid Object Collection tool.

この例では、水平方向に配置された5つのボタンを持つパネルを作成する方法を示します。This particular example will show you how to a create a panel with five buttons aligned horizontally. ただし、同じ原則に従って他のレイアウトを作成することもできます。However, you may follow these same principles to create other layouts.

これを実現するには、主に次の手順を実行します。The main steps you will take to achieve this are:

  1. 親オブジェクトに対するボタンオブジェクトの親Parent the button objects to a parent object
  2. Grid オブジェクトコレクション (スクリプト) コンポーネントの追加と構成Add and configure the Grid Object Collection (Script) component
  3. エディター内シミュレーションを使用してボタンをテストするTest the buttons using the in-editor simulation

1. 親オブジェクトにボタンオブジェクトを親とする1. Parent the button objects to a parent object

階層 ウィンドウ内の空の場所を右クリックし、空の作成 を選択します。Right-click on an empty spot inside the Hierarchy window and select Create Empty:

mrlearning-base

新しく作成したオブジェクトを右クリックし、 [名前の変更] を選択して、適切な名前を指定します (例: buttoncollection)。Right-click on the newly created object, select Rename, and give it a suitable name, for example, ButtonCollection:

mrlearning-base

PressableButtonHoloLens2オブジェクトを選択し、 buttoncollectionオブジェクトの上にドラッグして、buttoncollection オブジェクトの子にします。Select the PressableButtonHoloLens2 object and drag it on top of the ButtonCollection object to make it a child of the ButtonCollection object:

mrlearning-base

PressableButtonHoloLens2オブジェクトを右クリックし、 [複製] を選択してコピーを作成します。Right-click the PressableButtonHoloLens2 object and select Duplicate to create a copy of it:

mrlearning-base

合計5つの PressableButtonHoloLens2 オブジェクトが表示されるまで、この手順をさらに4回繰り返します。Repeat this step four more times until you have a total of five PressableButtonHoloLens2 objects.

2. Grid オブジェクトコレクション (スクリプト) コンポーネントを追加して構成する2. Add and configure the Grid Object Collection (Script) component

階層 ウィンドウで ButtonCollection オブジェクトを選択した状態で、インスペクター ウィンドウで コンポーネントの追加 ボタンをクリックし、grid オブジェクトコレクション を検索して選択します。これにより、Grid オブジェクトコレクション (スクリプト) コンポーネントが buttoncollection オブジェクトに追加されます。With the ButtonCollection object selected in the Hierarchy window, in the Inspector window, click the Add Component button, then search for and select Grid Object Collection to add a Grid Object Collection (Script) component to the ButtonCollection object:

mrlearning-base

次のように、Grid オブジェクトコレクション (スクリプト) を構成します。Configure the Grid Object Collection (Script) as follows:

  • [Num Rows] を1に変更すると、すべてのボタンが1つの行に合わせて調整されます。Change Num Rows to 1 to have all buttons aligned on one single row
  • セルの幅を0.05 に変更して、行内のボタンを空白にします。Change Cell Width to 0.05 to space out the buttons within the row

次に、 [コレクションの更新] ボタンをクリックして、新しい構成を適用します。Then click the Update Collection button to apply the new configuration:

mrlearning-base

注意

適用した構成の変更は、ボタンを単一行に配置する目的を達成するために必要な最小限の変更を表します。The configuration changes you just applied represent the minimum changes required to achieve the objective of placing the buttons in a single row. ただし、今後のプロジェクトでは、親オブジェクトや子オブジェクトの向きなどの要因によっては、たとえば、方向の種類など、他の設定の調整が必要になる場合があります。However, in future projects, depending on factors such as, for example, the orientation of the parent and child objects, you might need to adjust other settings such as, for example, the Orient Type. MRTK の Grid オブジェクトコレクションの詳細については、 Mrtk ドキュメントポータルオブジェクトコレクションスクリプトに関するガイドを参照してください。To learn more about MRTK's Grid Object Collection, you can visit the Object collection scripts guide in the MRTK Documentation Portal.

[階層] ウィンドウで [ButtonCollection] オブジェクトを選択した状態で、[インスペクター] ウィンドウの ButtonCollection オブジェクトの [変換位置] を変更して、子ボタンオブジェクトが、原点に配置されるカメラの前に配置されるようにします。たとえば、x = 0、y = 0、z = 0.5 のようになります。With the ButtonCollection object still selected in the Hierarchy window, in the Inspector window, change the ButtonCollection object's Transform Position so its child button objects are positioned in front of the camera, which is positioned at origin, for example, x = 0, y = 0, and z = 0.5:

mrlearning-base

注意

前の「ハンドトラッキングジェスチャと対話型 buttons 」セクションでシーンに PressableButtonHoloLens2 prefab を初めて追加したときに、カメラの前に配置しました。When you first added the PressableButtonHoloLens2 prefab to the scene in the Hand tracking gestures and interactable buttons section above, you positioned it in front of the camera. ただし、Grid オブジェクトコレクションはその直接の子オブジェクトの位置を制御するので、親値0からのグリッドオブジェクトコレクションの既定の距離に従って、PressableButtonHoloLens2 子オブジェクトの Z 位置が0にリセットされました。However, because the Grid Object Collection controls its immediate child objects' position, the PressableButtonHoloLens2 child objects' Z Position were reset to 0 according to the Grid Object Collection's default Distance from parent value of 0. これにより、親/子の位置関係を整理したままにするために、親の ButtonCollection オブジェクトの位置を前方に移動するのは、親の値からの距離を構成するのではなく、PressableButtonHoloLens2 の子オブジェクトを前方に移動するためです。This, and to keep the parent/child positional relationship organized, is why we moved the parent ButtonCollection object's position forward instead of configuring the Distance from parent value to move the PressableButtonHoloLens2 child objects forward.

3. エディター内シミュレーションを使用してボタンをテストする3. Test the buttons using the in-editor simulation

再生ボタンを押してゲームモードに入り、エディター内入力シミュレーションを使用して、新しく作成されたボタンのパネルにあるの各ボタンをテストします。Press the Play button to enter Game mode and use the in-editor input simulation to test each of the buttons in in your newly created panel of buttons:

mrlearning-base

ヒント

現在、5つのボタンのいずれかを押すと、キューブの色が水色に変わります。Currently, when your press any of the five buttons, the cube color changes to cyan. エクスペリエンスをさらに興味深いものにするために、ここで学習したことを使用して、キューブを別の色に変更するように各ボタンを構成します。To make the experience more interesting, use what you just learn to configure each button to change the cube to a different color.

シーンへのテキストの追加Adding text into your scene

このセクションでは、Unity の TextMesh Pro を使用して、mixed reality エクスペリエンスにテキストを追加する方法について説明します。これは、前のチュートリアルの「 Textmesh pro の重要なリソースのインポート」セクションで準備したものです。In this section, you will learn how to add text to your mixed reality experiences using Unity's TextMesh Pro, which you prepared in the Import TextMesh Pro Essential Resources section of the previous tutorial.

この例では、前のセクションで作成したボタンコレクションの下に単純なラベルを追加します。In this particular example, you will add a simple label underneath the button collection you created in the previous section.

ButtonCollection オブジェクトを右クリックし、[ 3D オブジェクト > TextMeshPro ] を選択して、TextMeshPro オブジェクトを buttoncollection オブジェクトの子として作成します。Right-click on the ButtonCollection object and select 3D Object > Text - TextMeshPro to create a TextMeshPro object as a child of the ButtonCollection object:

mrlearning-base

新しく作成された TextMeshPro オブジェクト (TMP) を選択したまま、[インスペクター] ウィンドウで、ボタンコレクションの下にラベルが表示されるように、その位置とサイズを変更します。次に例を示します。With the newly created TextMeshPro object, named Text (TMP), still selected, in the Inspector window change its position and size so the label is placed neatly underneath the button collection, for example:

  • Rect 変換Pos Yを-0.0425 に変更します。Change the Rect Transform Pos Y to -0.0425
  • 四角形の変換を0.24 に変更しますChange the Rect Transform Width to 0.24
  • 四角形の変換の高さを0.024 に変更します。Change the Rect Transform Height to 0.024

次に、ラベルの内容を反映するようにテキストを更新し、テキストがラベル内に収まるようにフォントプロパティを選択します。次に例を示します。Then update the text to reflect what the label is for and choose font properties so the text fits within the label, for example:

  • Text メッシュ Pro (スクリプト)テキストをボタンコレクションに変更するChange the Text Mesh Pro (Script) Text to Button Collection
  • Text メッシュ Pro (スクリプト) のフォントスタイルを太字に変更するChange the Text Mesh Pro (Script) Font Style to Bold
  • Text メッシュ Pro (スクリプト) のフォントサイズを0.2 に変更します。Change the Text Mesh Pro (Script) Font Size to 0.2
  • Text メッシュ Pro (スクリプト) の配置を中央および中央に変更するChange the Text Mesh Pro (Script) Alignment to Center and Middle

mrlearning-base

結論Congratulations

このチュートリアルでは、MRTK プロファイル設定を複製、カスタマイズ、および構成する方法について学習しました。In this tutorial, you learned how to clone, customize, and configure an MRTK profile setting. また、HoloLens 2 で追跡されたハンズオンを使用してイベントをトリガーするボタンを操作する方法についても学習しました。You also learned how to interact with buttons to trigger events using tracked hands on the HoloLens 2. 最後に、MRTK の Grid オブジェクトコレクションコンポーネントと Unity のテキストメッシュ Pro を使用して、単純な UI インターフェイスを作成する方法について学習しました。Finally, you learned how to create a simple UI interface using the MRTK's Grid Object Collection component and Unity's Text Mesh Pro.

次のチュートリアル: 4. 動的なコンテンツを配置し、ソルバーを使用するNext Tutorial: 4. Placing dynamic content and using solvers