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

前のレッスンでは、HoloLens 2 の最初のアプリケーションを開始することで、Mixed Reality Toolkit (MRTK) が提供する必要のある機能について説明しました。In the previous lesson, 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 next lesson you'll 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

手順Instructions

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

このセクションでは、空間認識メッシュの表示オプションを調整して、既定の MRTK プロファイルをカスタマイズおよび構成する方法について説明します。In this section, you'll learn how to customize and configure the default MRTK profiles by adjusting the display option of the spatial awareness mesh. MRTK プロファイル内の設定または値を調整するには、次の同じ原則に従うことができます。You may follow these same principles for adjusting any settings or values in the MRTK profiles.

  1. BaseScene 階層から Mixed-Reality Toolkit (MRTK) を選択します。Select Mixed-Reality Toolkit (MRTK) from the BaseScene hierarchy. [インスペクター] パネルで、次の図に示すように、Mixed Reality Toolkit スクリプトを探し、アクティブなプロファイルを選択します。In the inspector panel, look for the Mixed Reality Toolkit Script and select the active profile as shown in the figure below. それをダブルクリックして開きます。Double click to open it.

    MR213_BuildSettings

    注意

    既定では、MRTK プロファイルは編集できません。By default, the MRTK profiles are not editable. これらは既定のプロファイルテンプレートで、コピーしてカスタマイズすることができます。These are default profile templates that you can copy and customize. カスタマイズとプロファイルには、いくつかのレイヤーがあります。There are several layers of customization and profiles. そのため、1つまたは複数の設定を構成するときに、いくつかのプロファイルをコピーしてカスタマイズするのは標準的な方法です。So, it is standard practice to copy and customize several profiles when configuring one or more settings.

    MRTK プロファイルとそのアーキテクチャの詳細については、 Mrtk のドキュメントを参照してください。To discover more about MRTK profiles and their architecture, visit the MRTK documentation.

  2. 既定のプロファイルのコピーを作成し、それをカスタマイズします。Create a copy of the default profile to customize it. [コピー & カスタマイズ] をクリックして開始します。Start by clicking Copy & Customize.

    MR213_BuildSettings

    これにより、[複製プロファイル] ポップアップウィンドウが開きます。This will open the Clone Profile popup window.

    MR213_BuildSettings

    [複製] をクリックして、MRTK プロファイルのコピーを作成します。Click Clone to create a copy of the MRTK profile. MRTK プロファイルの独自のコピーが取得できたので、このプロファイル内の任意の設定をカスタマイズできるようになりました。With your own copy of the MRTK profile, you now have the ability customize any settings in this profile. また、後の手順で説明するように、このプロファイルの下に入れ子になっている追加のプロファイルについても、[コピーとカスタマイズ] ステップを繰り返す必要があります。You will also need to repeat the copy and customize step for any additional profiles nested under this profile as described in the subsequent steps.

  3. 空間認識メッシュの可視性を無効にします。Disable the visibility of the spatial awareness mesh. これを行うには、次の図に示すように、空間認識システムの設定を見つけます。To do this, find Spatial Awareness system settings as shown in the image below. [空間認識システムを有効にする] オプションがオンになっていることを確認します。Make sure the Enable Spatial Awareness System option is checked. 空間認識システム プロファイルの右側にある 複製 ボタンをクリックして、既定のプロファイルをカスタマイズ可能なコピーに置き換えます。Click the Clone button to the right of the the Spatial Awareness System Profile to replace the default profile with a customizable copy. 次の2番目の図に示すように、表示されたポップアップウィンドウで、 [複製] ボタンをクリックします。In the popup window that appears, press the Clone button, as shown in the second image below.

    MR213_BuildSettings

    MR213_BuildSettings

  4. 既定の Mixed Reality 空間メッシュ オブザーバーのカスタム コピーを作成します。Create a custom copy of the Default Mixed Reality Spatial Mesh Observer. [Windows Mixed Reality 空間メッシュオブザーバー] の横にある下矢印をクリックすると、追加のオプションが表示されます。Click the down arrow next to Windows Mixed Reality Spatial Mesh Observer to see additional options.

    MR213_BuildSettings

    これらのオプションでは、既定の Mixed Reality 空間メッシュオブザーバー (編集不可) がグレーで表示されます。In these options, you will see the Default Mixed Reality Spatial Mesh Observer that is greyed-out (not editable). この既定のプロファイルをカスタマイズ可能なコピーに置き換えて編集できるようにする必要があります。You must replace this default profile with a customizable copy so you can edit it. 前に行ったように、 [複製] ボタンをクリックし、表示されたポップアップウィンドウで、下の2番目の図に示すように、 [複製] ボタンをクリックします。As you did earlier, click the Clone button and then, in the popup window that appears, press the Clone button, as shown in the second image below.

    MR213_BuildSettings

    MR213_BuildSettings

  5. 次に、表示オプションの設定を [オクルージョン] が表示されるように調整します。Next, you will adjust the settings for the display option to say “occlusion.” これにより、空間マッピングメッシュは非表示になりますが、空間マッピングメッシュの背後にあるゲームオブジェクトは、遮蔽とも呼ばれます。This makes the spatial mapping mesh invisible, but still hides game objects behind the spatial mapping mesh, also known as occlusion.

    MR213_BuildSettings

    注意

    注: 空間マッピングメッシュは表示されていませんが、まだ存在しているので、操作できます。Note: While the spatial mapping mesh is not visible, it is still present and you can interact with it. 空間マッピングメッシュの背後にあるホログラム (表示されているウォールの背後にあるホログラムなど) は、遮蔽の設定により表示されません。Any holograms behind the spatial mapping mesh, such as a hologram behind your visible wall, will not be visible because of the occlusion setting.

これで終了です。Congratulations! ここまで、MRTK プロファイル内の設定を変更する方法を学習しました。You just learned how to modify a setting in the MRTK profile. 見てわかるように、MRTK の設定を変更するには、既定のプロファイルのコピーを作成して編集できるようにする必要があります。As you can see, in order to modify MRTK settings you need to create copies of the default profiles so that you can edit them. 新しい設定でプロファイルを作成する場合、または既定のプロファイルを参照する場合は、既定のプロファイル (編集不可) が常に表示されます。You will always have the default profiles, which are not editable, to go back to if you wanted to create a profile with new settings or you can refer back to the default profiles. 調整できる設定には多くのものがあります。There are numerous settings that you can adjust. MRTK プロファイル設定の完全な参照については、MRTK のドキュメントを参照してください: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/GettingStartedWithTheMRTK.htmlFor full reference to MRTK profile settings, refer to the MRTK documentation here: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/GettingStartedWithTheMRTK.html

手の追跡のジェスチャと操作可能なボタンHand Tracking Gestures and Interactable buttons

このセクションでは、ハンドトラッキングを使用して pressable ボタンを押す方法について説明します。In this section, you will learn how to use hand tracking to press a pressable button.

  1. Projects フォルダーから Assets を選択します。Select Assets from the projects folder.

  2. 検索バーに「PressableButtonHoloLens2」と入力します。Type "PressableButtonHoloLens2" in the search bar.

    MR213_BuildSettings

  3. "PressableButtonHoloLens2" という名前の prefab (青いボックスで表されます) を階層にドラッグし、position 値を x = 0、y = 0 および z = 0.2 に設定して、ボタンがカメラの前にあるように設定します。Drag the prefab (represented by a blue box) named "PressableButtonHoloLens2" into your hierarchy and set set the position values to x = 0, y = 0 and z = 0.2 so the button is in front of the camera. (カメラは元の位置に配置されています)。(The camera is positioned at origin).

    注意

    "TMP Essentials をインポートしています" というメッセージが表示された場合は、この時点でインポートします。If you get a message about “importing TMP Essentials”, import it at this time. TMP Essentials がプロジェクトの一部ではない場合は、TMP Essentials をインポートした後にこの手順を繰り返す必要がある場合があります。それ以外の場合は、ボタンテキストが表示されないことがあります。If TMP Essentials was not already part of your project, you might need to repeat this step after importing TMP Essentials, otherwise button text may not appear.

    MR213_BuildSettings

  4. シーンにキューブを追加します。Add a cube to the scene. [階層] 領域を右クリックし、3D オブジェクトを選択してから、[キューブ] をクリックします。Right click on the hierarchy area, select a 3D object, then click on Cube.

    MR213_BuildSettings

    ここで、キューブが表示されます。Now, a cube should be in your display. 非常に大きいように見えます。It will appear very large. サイズを縮小するには、[階層] 領域で [キューブ] を選択した状態で、座標を調整します。You can adjust the coordinates (while Cube is still selected in the hierarchy area) to decrease the size. 小数点以下桁数の値を x = 0.02、y = 0.02、z = 0.02 に設定します。Set the scale values to x = 0.02, y = 0.02 and z = 0.02. キューブは、ボタンの近くのシーンに配置してください。ただし、重なっていないようにしてください。Be sure to position the cube in your scene near the button, but not overlapping with it. 次の図では、キューブの位置は x = 0、y = 0.4、z = 0.2 です。In the image below, the cube’s position is x = 0, y = 0.4, and z = 0.2.

    MR213_BuildSettings

    注意

    一般に、Unity の 1 ユニットは現実の世界のほぼ 1 m に相当します。In general, 1 unit in Unity is roughly equivalent to 1 meter in the physical world. これには、あるオブジェクトがスケーリングされたオブジェクトの子である場合などの例外があります。There are exceptions to this, for example when objects are children of scaled objects.

  5. PressableButtonHoloLens2 game オブジェクトを選択した状態で、インスペクターの下方向へスクロールして、対話型 (スクリプト) コンポーネントのイベントセクションを探します。With the PressableButtonHoloLens2 game object selected, in the Inspector scroll towards the bottom to locate the Events section of the Interactable (Script) component.

    MR213_BuildSettings

  6. プッシュ時に応答するイベントをボタンに与えるように、既存のイベントを変更します。We will modify the existing event to give the button an event to respond to when pushed. ご覧のように、イベントレシーバーの種類は InteractableOnPressReceiver に設定されています。As you can see, the Event Receiver Type is set to InteractableOnPressReceiver. これにより、このボタンは、追跡対象の手がボタンを押したら押されたイベントに応答できるようになります。This allows the button to respond to a pressed event when a tracked hand presses the button. この時点で、相互作用フィルターも Near と Far に変更する必要があります。At this point you should also change the Interaction Filter to Near and Far.

    MR213_BuildSettings

  7. この手順では、ボタンが押されたら色を変更するようにキューブを設定します。In this step you will set up the cube to change color when your button is pressed. BaseScene 階層で PressableButtonHoloLens2 を選択し、次の図に示すように、[キューブ] ゲームオブジェクトを [BaseScene] 階層から [ランタイムのみ] フィールドにドラッグします。Select the PressableButtonHoloLens2 in the BaseScene hierarchy and drag the Cube game object from the BaseScene hierarchy into the Runtime Only field as shown in the image below.

    MR213_BuildSettings

    [関数なし] というドロップダウンリストをクリックします。Click the dropdown list that says No Function. [MeshRenderer] を選択し、[素材マテリアル] を選択します。Select MeshRenderer, then select Material material. これにより、ボタンが押されたときに素材を変更できます。This lets you change the material when the button is pressed.

    MR213_BuildSettings

    [空の素材] フィールドの横にある円をクリックして、[素材の選択] ポップアップを開きます。Click the circle next to the empty material field to open the Select Material popup. MRTK には、選択する多くの素材と色が含まれています。The MRTK includes many materials and colors to choose from. この例では、ポップアップ検索バーに「MRTK_Standard」と入力することによって検出された素材 MRTK_Standard_Cyan を使用します。For this example, you are going to use the material, MRTK_Standard_Cyan, found by typing in "MRTK_Standard" in the popup search bar. 素材フィールドを設定するには、MRTK_Standard_Cyan マテリアルを選択します。Select the MRTK_Standard_Cyan material to populate the material field.

    MR213_BuildSettings

    これで、このイベントは、ボタンが押されたら、指定された素材に基づいてキューブが色を変更するように設定されました。The event is now set so that when the button is pressed, the cube will change color based on the material you specified. この例では、キューブはシアン色に変更されます。In this example, the cube will change to the cyan color.

  8. 次に、ボタンが放されたら、ボタンが既定の色に戻るように、ボタンを放すアクションを設定します。Next you are going to set up the release action so that upon release, the button will go back to its default color. 上記の手順 7. を繰り返します。Repeat Step 7 above. ここでは、次の図に示すように、Onrelease MRTK_Standard_LightGray マテリアルではなく OnRelease イベントを使用します。But this time with the OnRelease event instead of the OnPress MRTK_Standard_LightGray material as shown in the image below.

    MR213_BuildSettings

    これで、ボタンが押されたときに、新しい色シアンに変わります。Now when the button is pressed, it will change to a new color, cyan. ボタンが離されると、指定した既定の色 (淡い灰色など) に戻ります。画面の上部にある [再生] ボタンをクリックして、エディターで試してみるか、HoloLens 2 に展開してテストします。When the button is released it will change back to the default color you specified (e.g., light gray.) Press the Play button on the top of the screen to try it out in the editor or deploy to your HoloLens 2 to test. ハンドシミュレーションなど、エディター内のシミュレーションの詳細については、 Mrtk のシミュレーションに関するドキュメントのページを参照してください。To learn more about in-editor simulation, including hand simulation, read the MRTK's simulation documentation page.

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

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

  1. 5つのボタンが表示されるまで、前のセクションのボタンを複製します。Duplicate the button from the previous section until you have five buttons. これを行うには、ボタンを右クリックし、[コピー] をクリックします。There are several ways to do this: -Right click on the button, and click Copy. 次に、ボタンの下に移動し、もう一度右クリックして、[貼り付け] をクリックします。Then go down to below the button and right click again, and click Paste. -ボタンを右クリックし、[複製] をクリックします。-Right click on the button and click Duplicate. -キューブをクリックし、キーボードの Ctrl D キーを押して、キーボードコマンドを使用します。-Use the keyboard command by clicking on the cube, and pressing Ctrl D on your keyboard.

    5つのボタンが表示されるまで、この手順を繰り返します。下の画像の5つの赤い矢印をご覧ください。Repeat this until you have five buttons; see the five red arrows in image below.

    Mrlearning Base Ch2 3Step1im

  2. ボタンを空の親ゲーム オブジェクトの下にグループ化します。Group the buttons under an empty parent game object. グリッドコレクション内のボタンを使用するには、共通の親オブジェクトの下にボタンをグループ化する必要があります。In order to have the buttons in the grid collection, you need to group your buttons under a common parent object. Hiハイキング achy を右クリックし、[空の作成] をクリックします。Right click in the hiearachy, and click Create Empty. これにより、すべてのボタンを配置するための新しい空のゲーム オブジェクトが作成されます。This creates a new empty game object for you to put all the buttons in. これは、"説明" オブジェクトとして表示されます。It shows up as gameObject. 右クリックし、ButtonCollection という名前を変更します。Right click and rename it, ButtonCollection.

    Mrlearning Base Ch2 3Step2im

  3. すべてのボタンを新しいコレクションに移動します。Move all the buttons into the new collection. これを行うには、階層内の5つのボタンオブジェクトをすべて選択し、次の図に示すように、[ButtonCollection game] オブジェクトの下にすべてをドラッグします。Do this by selecting all five of the button objects in your heirarchy, and drag them all under ButtonCollection game object as shown in the image below. ヒント: 複数の項目を選択するには、Ctrl キーを押しながら項目を選択します。Tip: select multiple items by holding the Ctrl key while selecting items.

    Mrlearning Base Ch2 3Step3imb

  4. MRTK の Grid オブジェクトコレクションコンポーネントをボタンコレクションに追加します。Add MRTK’s Grid Object Collection component to the button collection. これを行うには、ButtonCollection 親オブジェクトを選択します。To do this, select the ButtonCollection parent object. [インスペクター] パネルで、[コンポーネントの追加] ボタンをクリックします。From the Inspector panel, click the Add Component button. 検索バーで Grid オブジェクトコレクションを検索し、一覧に表示されたらそれを選択します。Search for Grid Object Collection in the search bar, and select it when it appears in the list.

    Mrlearning Base Ch2 3Step4im

    Grid オブジェクトコレクションコンポーネントを使用すると、適切な行、列、またはグリッド内のボタンまたはオブジェクトのセットを整理できます。The Grid Object Collection component lets you organize buttons or any set of objects in a neat row, column, or grid. これは、MRTK によって提供される構成要素の1つであり、魅力的ユーザーインターフェイスをすばやく簡単に作成できます。This is one of the building blocks provided by the MRTK that gives you a quick and easy way to create enticing user interfaces.

  5. グリッド オブジェクト コレクションを構成します。Configure the grid object collection. すべてのボタンがユーザーに面していることを確認するには、[回転の種類] を選択します。To ensure all the buttons face the user, select Orient Type. 次の図に示すように、[親を前方に移動] を選択します。Then select Face Parent Forward as shown in the image below. 次に、ボタンの間のスペースを設定するためにセル サイズを変更します。Next, change the cell size to set the space between your buttons. 次の図に示すように、セルの幅とセルの高さを0.05 単位で0.05 単位で開始します。Start with 0.05 units by 0.05 units for the Cell Width and Cell Height as shown in the image below. Distance が0に設定され、Rows が1に設定されていることを確認します。Make sure Distance is set to 0 and Rows is set to 1. [コレクションの更新] をクリックします。Click Update Collection. シーンは次の図のようになります。The scene will look similar to the picture below.

    Mrlearning Base Ch2 3Step5im

    注意

    子オブジェクトまたは親オブジェクトの向きによっては、将来のプロジェクトで、向きの設定を異なった方法で調整することが必要になる可能性があります。Depending on the orientation of the child objects or parent object, you will likely need to adjust the orientation setting differently in future projects. また、コレクション内のオブジェクトのサイズによっては、[セルの幅] や [セルの高さ] のフィールドも異なった方法で定義することが必要になる可能性があります。The Cell Width and the Cell Height fields may also need to be defined differently, depending on the size of the objects in your collection.

シーンへのテキストの追加Adding Text into Your Scene

このセクションでは、テキストを Mixed Reality エクスペリエンスに追加したり編集したりする方法を学習します。In this section, you will learn how to add and edit text to your mixed reality experiences. まだ行っていない場合は、ここにある手順に従って、Unity で TextMeshPro を有効にするようにしてください。If you haven’t already, please ensure you have TextMeshPro enabled in Unity by following the instructions here.

  1. ButtonCollection 親オブジェクトを選択し、コレクションを右クリックします。Select the ButtonCollection parent object, and right click the collection. ドロップダウンメニューの [3D オブジェクト] を展開します。Expand 3D object in the dropdown menu. 次に、[TextMeshPro] を選択します。Then select TextMeshPro - Text. 次の図に示すように、ボタンコレクションの下に TextMeshPro オブジェクトが表示されます。You should see a TextMeshPro object under the button collection as shown in the image below.

    レッスン 2 Chapter4 Step1a レッスン 2 Chapter4 Step1bLesson2 Chapter4 Step1a Lesson2 Chapter4 Step1b

  2. テキストのサイズと位置を読みやすくするために、TextMeshPro コンポーネントの [フォントサイズ] フィールドを調整してフォントのサイズを変更します。To improve the text size and placement for readability, adjust the Font Size field in the TextMeshPro component to change the size of the font. また、次の図に示すように、Rect の位置とスケールを調整する必要があります。You will also need to adjust the Rect Transform position and scale as shown in the image below. テキストの構成に使用される値については、以下の画像を参照してください。See the images below for values used for our text configuration. テキストフィールドのサイズと配置をさらに向上させるための出発点として、これらの値を自由に使用してください。Feel free to use these values as a starting point to further improve the size and placement of your text field.

    レッスン 2 Chapter4 手順3

  3. 次の図に示すように、[インスペクター] パネルの TextMeshPro コンポーネントの [テキスト] フィールドに「Button Collection Text」と入力し、[Alignment] プロパティを [Center] と [Top] に調整します。In the TextMeshPro component’s text field in the Inspector panel, type in "Button Collection Text" and adjust the Alignment properties to be Center and Top as shown in the image below.

    レッスン 2 Chapter4 手順4

  4. ボタンオブジェクトのテキスト値を変更するには、任意のボタンの横にある矢印をクリックして展開し、[参照] をクリックします。To modify the text values on the button objects, click the arrow next to any button to expand it and navigate to the SeeItSayItLabel object. 上の手順で説明したように、ボタンにテキストを編集できる TextMeshPro に移動します。Navigate to TextMeshPro where you can edit the text to your buttons as described in the steps above.

    Lesson2 Chapter4 Step5

結論Congratulations

このレッスンでは、MRTK プロファイル設定をコピー、カスタマイズ、構成する方法 (つまり、空間認識メッシュの可視性) について学習しました。また、HoloLens 2 で追跡されたユーザーを使用してイベントをトリガーするボタンを操作する方法についても学習しました。In this lesson, you learned how to copy, customize, and configure an MRTK profile setting (i.e., spatial awareness mesh visibility.) You also learned how to interact with a button to trigger events using tracked hands on the HoloLens 2. 最後に、Unity のテキストメッシュ Pro と MRTK の Grid オブジェクトコレクションコンポーネントを使用して、簡単な UI インターフェイスを作成する方法を学習しました。Finally, you learned how to create a simple UI interface using Unity's Text Mesh Pro and the MRTK's Grid Object Collection component.

次のレッスン: 4. 動的なコンテンツを配置し、ソルバーを使用するNext Lesson: 4. Placing dynamic content and using solvers