MR Learning ベースのモジュールのユーザー インターフェイスでは、手 Tracking、および現実ツールキットの構成を混在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 Toolkit プロファイルを構成します。Customize and configure Mixed Reality Toolkit profiles
  • UI 要素とボタンを使用するホログラムと対話します。Interacting with holograms using UI elements and buttons
  • 基本的な追跡の手動入力との相互作用Basic hand-tracking input and interactions

手順Instructions

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

カスタマイズおよび空間認識の表示オプションを調整することによって、Mixed Reality Toolkit の既定のプロファイルを構成する方法について説明しますが、このセクションでは次のようにメッシュです。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. Inspector パネルは、「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 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 混合現実空間メッシュ オブザーバー」追加オプションを表示する横の下矢印をクリックします。Click the down arrow next to “Windows Mixed Reality Spatial Mesh Observer” to see additional options. これらのオプションでは、「既定の混合現実空間メッシュ オブザーバー」に表示されるがグレーで表示 (編集不可) 表示されます。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.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

このセクションでは、対話型のボタンを押すように追跡手の形を使用する方法を学びます。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 Essentials をインポートする」。Note: If you get a message about “importing TMP Essentials” please import it at this time. TMP Essentials が既にプロジェクトの一部でない場合は、ボタンのテキストは記述できません。 それ以外の場合、TMP Essentials をインポートした後、この手順を繰り返す必要があります。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. (、ボタンの画像は、次の図とは異なる場合があります表示) の下の図のように、シーンに表示する (これは、BaseScene 階層になります)"PressableButton"ゲーム オブジェクトをダブルクリックします。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. 階層領域を右クリックし、3 D オブジェクトを選択し、「キューブです」をクリックしてくださいRight click on the hierarchy area, select 3D object, then click on “cube.” ここで、キューブは、ディスプレイでなければなりません。Now, a cube should be in your display. 非常に大きく表示、ため調整座標 ("cube"は、階層領域で選択したまま) 中にサイズを小さくします。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. Pressable のボタンの近くに配置して、シーン内のキューブを配置することを確認してがボタンに重複は許可されません。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. Inspector パネルで、"イベントの種類の選択 ボックスの下で「+」ボタンをクリックします。In the inspector panel, under the “Select Event Type” box, click the “+” button. 次の図に示すようには、[ランタイムのみ] ボックスに"BaseScene"メニューから"cube"をドラッグします。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"を選択し、"素材 material。"を選択します。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"マテリアルを使用して、この例で、「シアン」(The 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

いるので、キューブが指定した material に基づいて色を変更、ボタンが押されたときに、イベントが設定されました。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 の Grid オブジェクトのコレクションを使用してボタンのパネルを作成します。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 ベース 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. Hiearachy 内を右クリックし、「作成空」です。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 ベース Ch2 3Step2im

  1. 新しいコレクションには、すべてのボタンを移動します。Move all the buttons into the new collection. これには、heirarch で 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 ベース Ch2 3Step3imb

  1. MRTK の「グリッド オブジェクトのコレクション」のコンポーネントをボタンのコレクションに追加します。Add MRTK’s “Grid Object Collection” component to the button collection. これを行うには、"ButtonCollection"親オブジェクトを選択し、[inspector] パネルで、「コンポーネントの追加」ボタンをクリックします。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 ベース 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 によって提供される構成要素のいずれかです。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 ベース 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

このセクションでは、追加して、複合現実エクスペリエンスを提供するテキストを編集する方法を学びます。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-Text"を選択します。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.

レッスン 2 の第 4 章 Step1a レッスン 2 の第 4 章 Step1bLesson2 Chapter4 Step1a Lesson2 Chapter4 Step1b

  1. TextMeshPro コンポーネントのテキスト フィールドに (次に示すように、[inspector] パネルである)、"ボタン コレクション Text"に入力します。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.

レッスン 2 の第 4 章の手順 2

  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, and feel free to use these values as a starting point from which to further improve the size and placement of your text field.

レッスン 2 の第 4 章 Step3 レッスン 2 の第 4 章の手順 4Lesson2 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.

レッスン 2 の第 4 章の手順 5

おめでとうございます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 を使用して、シンプルな UI インターフェイス MRTK の Grid オブジェクトのコレクションのコンポーネントを作成する方法を学習しました。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