MR 学習ベース モジュール - ユーザー インターフェイス、手の追跡、Mixed Reality ツールキット構成MR Learning Base Module - User Interface, Hand Tracking, and Mixed Reality Toolkit Configuration

前のレッスンでは、HoloLens 2 の最初のアプリケーションを開始することによって、MRTK によって提供される機能のいくつかを学習しました。In the previous lesson, you learned some of the capabilities the MRTK has to offer, by starting your first application for the HoloLens 2. この次のレッスンでは、ボタンと UI テキスト パネルを作成して整理し、既定の操作 (タッチ) を使用して各ボタンを操作する方法を学習します。In this next lesson 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 on how to modify MRTK profiles, starting with turning off the visualization of the spatial mesh.

目標Objectives

  • Mixed Reality ツールキット プロファイルをカスタマイズおよび構成するCustomize and configure Mixed Reality Toolkit profiles
  • UI 要素とボタンを使用したホログラムの操作Interacting 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)

このセクションでは、空間認識メッシュの表示オプションを調整することによって、既定の Mixed Reality ツールキット プロファイルをカスタマイズおよび構成する方法を学習します。In this section you will learn how to customize and configure the default Mixed Reality Toolkit 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 ツールキット (MRTK) を選択します。Select Mixed-Reality Toolkit (MRTK) from the “BaseScene” hierarchy. [インスペクター] パネルで、[Mixed Reality ツールキット スクリプト] を探し、次の図に示すように [アクティブなプロファイル] を選択します。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 from which you can copy and customize. カスタマイズやプロファイルには複数のレイヤーがあるため、標準的な習慣として、1 つ以上の設定を構成する場合は複数のプロファイルをコピーしてカスタマイズします。There are several layers of customization and profiles, 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, please visit the MRTK documentation.

  1. 既定のプロファイルのコピーを作成し、それをカスタマイズします。Create a copy of the default profile to customize it. 既定のプロファイルをコピーするには、[コピーとカスタマイズ] ボタンをクリックします (図を参照)。To copy a default profile, click the “Copy & Customize” button (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/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” which appears greyed (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 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 hide game objects behind the spatial mesh (this is 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 (e.g. 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 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

このセクションでは、手の追跡を使用して操作可能なボタンを押す方法を学習します。In this section, you will learn how to use hand tracking to press an interactable button.

  1. プロジェクト フォルダーから [アセット] を選択します。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 の基本情報のインポート] に関するメッセージが表示されたら、この時点でそれをインポートしてください。Note: If you get a message about “importing TMP Essentials” please import it at this time. TMP の基本情報がまだプロジェクトに含まれていない場合は、TMP の基本情報のインポート後にこの手順を繰り返すことが必要になる場合があります。そうしないと、ボタンのテキストが表示されない可能性があります。If TMP Essentials was not already part of your project, you may 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 may appear different than the image below).

MR213_BuildSettings

  1. [インスペクター] パネルで、[イベントの追加] をクリックして、押されたら応答するイベントをそのボタンに割り当てます。In the inspector panel, click “Add Event” to give the button an event to respond to when pushed. 表示されるオプションで、ドロップダウン メニューを選択します。In the option that appears, select the drop-down menu. [InteractableOnPressReciever] を選択します。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 3D object, then click on “cube.” ここで、キューブが表示されます。Now, a cube should be in your display. これは非常に大きく表示されるため、座標を調整して ([キューブ] が引き続き階層領域で選択された状態のまま) サイズを小さくします。It will appear very large, so 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. [インスペクター] パネルで、[イベントの種類の選択] ボックスの [+] ボタンをクリックします。In 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 will allow you to 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] を使用します。これを見つけるには、プロジェクト タブの検索バーに「シアン」と入力します (MRTK には、選択できる素材や色が多数が含まれています)。素材を [MeshRenderer.material] の下のボックスにドラッグします。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 (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

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 (前の手順) を繰り返しますが、次の図に示すように、今度は [OnPress] イベントの代わりに [OnRelease] イベントを使用します。Repeat Step 7 (the previous step) but this time with the “OnRelease” event instead of the “OnPress” event, as shown in the image below.

  2. プロジェクト パネルで、ボタンが放されたら既定に戻るキューブの素材を検索します (この場合は、[MRTK_Standard_LightGray] を選択しました)。素材を [MeshRenderer.material] フィールドの下のボックスにドラッグします。In the project panel, search for a material for the cube to default to upon button release (in our case, we chose MRTK_Standard_LightGray.) Drag the material into the box below the “MeshRenderer.material” field.

MR213_BuildSettings

これで、ボタンが押されたら、新しい色 (シアンなど) に変更され、ボタンが放されたら、指定された元の既定の色 (薄い灰色など) に変更されます。画面の一番上にある [再生] ボタンを押してエディターでそれを試すか、または HoloLens 2 にデプロイしてテストしてください。Now when the button is pressed, it should change to a new color (e.g., cyan) and when the button is released it should 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 using the MRTK’s GridObjectCollection tool.

  1. 前のセクションのボタンをボタンが 5 つになるまで複製します。Duplicate the button from the previous section until you have 5 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 5 total buttons (see 5 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 grid collection, you need to group your buttons under a common parent object. 階層内を右クリックして [空の作成] をクリックします。Right click in the hiearachy and click “create empty.” これにより、すべてのボタンを配置するための新しい空のゲーム オブジェクトが作成されます。This creates a new empty game object for you to put all the buttons in. これは [gameObject] として表示されます。It will show up as “gameObject.” 右クリックし、その名前を [ButtonCollection] に変更します。Right click and rename it to “ButtonCollection.”

Mrlearning Base Ch2 3Step2im

  1. すべてのボタンを新しいコレクションに移動します。Move all the buttons into the new collection. これを行うには、次の図に示すように、階層内の 5 つのすべてのボタン オブジェクトを選択し、それらをすべて [ButtonCollection] ゲーム オブジェクトの下にドラッグします。Do this by selecting all five of the button objects in your heirarch 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 の [グリッド オブジェクト コレクション] コンポーネントをボタン コレクションに追加します。Add MRTK’s “Grid Object Collection” component to the button collection. これを行うには、[ButtonCollection] 親オブジェクトを選択し、[インスペクター] パネルの [コンポーネントの追加] ボタンをクリックします。To do this, select the “ButtonCollection” parent object and in the inspector panel, click the “Add Component” button. 次に、検索バーで [グリッド オブジェクト コレクション] を検索し、一覧に表示されたらそれを選択します。Then search for “Grid Object Collection” in the search bar and select it when it appears in the list.

Mrlearning Base Ch2 3Step4im

[グリッド オブジェクト コレクション] コンポーネントを使用すると、ボタンまたは一連のオブジェクトを適切な行、列、またはグリッドに整理できます。The Grid Object Collection component allows you to 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 provides you with a quick and simple way to create beautiful user interfaces.

  1. グリッド オブジェクト コレクションを構成します。Configure the grid object collection. すべてのボタンを確実にユーザーの方に向けるには、[向きの種類]、[親を前方に向ける] の順に選択します (図に示します)。次に、ボタンの間のスペースを設定するためにセル サイズを変更します。To ensure all the buttons face the user, select “orient type” and then select “face parent forward” (as shown in the image.) 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 may need to adjust these values, depending on object/button assets chosen. [行] が 1 に設定されていることを確認してください。Make sure "Rows" is set to 1. 次に、[コレクションの更新] をクリックすると、シーンが次の画像のようになります。Then click “Update Collection” and the scene should look like 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 オブジェクト] を展開し、[TextMeshPro - テキスト] を選択します。Expand "3D object" in the dropdown menu, 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 コンポーネントの [テキスト] フィールド (次に示すように、[インスペクター] パネルにあります) に、「ボタン コレクションのテキスト」と入力します。In the TextMeshPro component’s Text field (located in the inspector panel, as shown below), type in “Button Collection Text.” このテキストはシーン内に表示されますが、ボタンの背後に隠されるか、または間違ったサイズになるか、あるいはその両方になります。The text will appear in the scene, but it will be hidden behind the buttons and/or the wrong size.

Lesson2 Chapter4 Step2

  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. また、次の図に示すように、[四角形の変換] の位置やスケールの調整も必要になる場合があります。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, and feel free to use these values as a starting point from which to further improve the size and placement of your text field.

Lesson2 Chapter4 Step3 Lesson2 Chapter4 Step4Lesson2 Chapter4 Step3 Lesson2 Chapter4 Step4

  1. ボタン オブジェクト上のテキスト値を変更するには、いずれかのボタンの横にある矢印をクリックしてそれを展開し、[SeeItSayItLabel] オブジェクトに移動してから [TextMeshPro] に移動します。そこで、前の手順で説明されているようにボタンのテキストを編集できます。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, then 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.

次のレッスン:ダイナミック コンテンツの配置とソルバーNext Lesson: Dynamic Content Placement and Solvers