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 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 ツールキット プロファイルを構成する (空間認識の表示オプションを変更する) 方法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 プロファイルは編集できません。Note: 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.

  1. 既定のプロファイルのコピーを作成し、それをカスタマイズします。Create a copy of the default profile to customize it. 既定のプロファイルをコピーするには、[コピー & カスタマイズ] をクリックします (イメージを参照)。To copy a default profile, click Copy & Customize (see image). これにより、MRTK プロファイルのコピーが作成されます。This creates 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.

MR213_BuildSettings

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

MR213_BuildSettings

MR213_BuildSettings

  1. 既定の 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. これらのオプションでは、既定の 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. 右側のボタン (緑色の矢印でマークされています) をクリックして、コピーを複製します。Click the button to the right (marked by a green arrow) to clone a copy.

MR213_BuildSettings

  1. 次に、表示オプションの設定を [オクルージョン] が表示されるように調整します。Next, you will adjust the settings for the display option to say “occlusion.” これにより、空間メッシュは非表示になりますが、空間メッシュの背後にあるゲームオブジェクトは、遮蔽とも呼ばれます。This makes the spatial mesh invisible, but still hides game objects behind the spatial 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.html ) を参照してください。For 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. 検索バーに「pressablebutton」と入力します。Type in the search bar, “pressablebutton.”

MR213_BuildSettings

  1. [PressableButton] という名前のプレハブ (青色のボックスで表されています) を階層にドラッグします。Drag the prefab (represented by a blue box) named "PressableButton" into your hierarchy.

    注:"TMP Essentials をインポートしています" というメッセージが表示された場合は、この時点でインポートします。Note: 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

  1. 次の図に示すように、[PressableButton] ゲームオブジェクトをダブルクリックして、BaseScene 階層に表示されるようにします。Double click the PressableButton game object, which should now be in your BaseScene hierarchy, to view it in your scene as shown in the image below. ボタンのグラフィックスは、次の画像とは異なる場合があります。Your button graphics might appear different than the image below.

MR213_BuildSettings

  1. [インスペクター] パネルで、[イベントの追加] をクリックして、プッシュ時に応答するイベントをボタンに与えます。From the inspector panel, click Add Event to give the button an event to respond to when pushed. 表示されるオプションで、ドロップダウンメニューを選択し、[InteractableOnPressReciever] を選択します。In the option that appears, select the drop-down menu, and select InteractableOnPressReciever. これにより、このボタンは、追跡対象の手がボタンを押したら押されたイベントに応答できるようになります。This allows the button to respond to a pressed event when a tracked hand presses the button.

MR213_BuildSettings

  1. シーンにキューブを追加します。Add a cube to the scene. [階層] 領域を右クリックし、3D オブジェクトを選択してから、[キューブ] をクリックします。Right click on the hierarchy area, select a 3D object, then click on Cube. ここで、キューブが表示されます。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.1、y = 0.1、z = 0.1 に設定します。Set the scale values to x = 0.1, y = 0.1 and z = 0.1. キューブをシーン内に配置して、押しボタンの近くだが、ボタンと重ならない位置に置くようにしてください。Be sure to position the cube in your scene to place it near the pressable button, but not overlapping with the button. 次の図では、キューブの位置は x = 0、y = 0.2、z = 1 です。In the image below, the cube’s position is x = 0, y = 0.2, and z = 1.

    注:一般に、Unity の 1 ユニットは現実の世界のほぼ 1 m に相当します。Note: 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.

    MR213_BuildSettings

MR213_BuildSettings

  1. この手順では、ボタンが押されたら色を変更するようにキューブを設定します。In this step you will set up the cube to change color when your button is pressed. BaseScene メニューの [PressableButton] を選択します。Select the PressableButton in the BaseScene menu. [インスペクター] パネルの [イベントの種類の選択] ボックスで、[+] ボタンをクリックします。From the inspector panel, under the Select Event Type box, click the + button. 次の図に示すように、[BaseScene] メニューから [ランタイムのみ] ボックスにキューブをドラッグします。Drag the cube from the BaseScene menu into the Runtime Only box 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

[プロジェクト] パネルに移動し、変更する素材を検索します。Go to the Project panel and search for the material you wish to change it to. この例では、MRTK_Standard_Cyan というマテリアルを使用します。この例では、[プロジェクト] タブの検索バーに「水色」と入力します。You are going to use the material, MRTK_Standard_Cyan, for this example, found by typing in “cyan” in the Project tab’s search bar. (MRTK には、選択する多くの素材と色が含まれています)。素材を MeshRenderer の下のボックスにドラッグします。(The MRTK includes many materials and colors to choose from.) Drag the material to the box underneath MeshRenderer.material. MRTK の素材は、[アセット]>[MixedRealityToolkit.SDK]>[StandardAssets]>[素材] で見つけることができます。The MRTK materials can be found in Assets>MixedRealityToolkit.SDK>StandardAssets>Materials.

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.

  1. 次に、ボタンが放されたら、ボタンが既定の色に戻るように、ボタンを放すアクションを設定します。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 イベントではなく OnRelease イベントを使用します。But this time with the OnRelease event instead of the OnPress event as shown in the image below.

  2. [プロジェクト] パネルで、ボタンのリリース時に既定で使用するキューブの素材を検索します。In the Project panel, search for a material for the cube to default to upon button release. この例では、[MRTK_Standard_LightGray] を選択しました。In this case, we chose MRTK_Standard_LightGray. 素材を MeshRenderer フィールドの下のボックスにドラッグします。Drag the material into the box below the MeshRenderer.material field.

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

  1. ボタンを空の親ゲーム オブジェクトの下にグループ化します。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

  1. すべてのボタンを新しいコレクションに移動します。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

  1. 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.

  1. グリッド オブジェクト コレクションを構成します。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.12 単位で0.12 単位で開始します。Start with 0.12 units by 0.12 units for the Cell Width and Cell Height as shown in the image below. 選択されたオブジェクトとボタンアセットによっては、これらの値の調整が必要になる場合があります。You might need to adjust these values, depending on object and button assets that were chosen. 行が1に設定されていることを確認します。Make sure Rows is set to 1. [コレクションの更新] をクリックします。Click Update Collection. シーンは次の図のようになります。The scene will look similar to the picture below.

Mrlearning Base Ch2 3Step5im

注:子オブジェクトまたは親オブジェクトの向きによっては、将来のプロジェクトで、向きの設定を異なった方法で調整することが必要になる可能性があります。Note: 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.

Lesson2 Chapter4 Step1a Lesson2 Chapter4 Step1bLesson2 Chapter4 Step1a Lesson2 Chapter4 Step1b

  1. テキストのサイズと位置を読みやすくするために、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

  1. 次に示すように、[インスペクター] パネルの TextMeshPro コンポーネントのテキストフィールドに入力します。In the TextMeshPro component’s text field in the Inspector panel as shown below. ボタンコレクションのテキストを入力します。Type in Button Collection Text. テキストはシーンに表示されますが、ボタンの背後に表示されないか、またはサイズが正しくありません。The text appears in the scene, but will be hidden behind the buttons and/or the wrong size.

レッスン 2 Chapter4 の ステップレッスン 2 Chapter4 手順4Lesson2 Chapter4 Step2 Lesson2 Chapter4 Step4

  1. ボタンオブジェクトのテキスト値を変更するには、任意のボタンの横にある矢印をクリックして展開し、[参照] をクリックします。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 の Text Mesh Pro (MRTK の [グリッド オブジェクト コレクション] コンポーネント) を使用して単純な UI インターフェイスを作成する方法を学習しました。Finally, you learned how to create a simple UI interface using Unity's Text Mesh Pro the MRTK's Grid Object Collection component.

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