6.ユーザー インターフェイスの作成6. Creating user interfaces

概要Overview

このチュートリアルでは、MRTK のボタンとメニュー プレハブを Unity の TextMeshPro コンポーネントと共に使用して、シンプルなユーザー インターフェイスを作成する方法について学習します。In this tutorial, you will learn how to create a simple user interface using MRTK's button and menu prefabs alongside Unity's TextMeshPro component. また、ボタンでイベントがトリガーされるように構成する方法と、ユーザーに追加情報を提供する動的なヒント UI 要素を追加する方法についても学習します。You will also learn how to configure the buttons to trigger events and add dynamic tooltip UI elements to provide the user with additional information.

目標Objectives

  • コレクション内のボタンを整理する方法を学習するLearn how to organize buttons in a collection
  • MRTK のメニュー プレハブを使用する方法を学習するLearn how to use MRTK's menu prefabs
  • UI メニューとボタンを使用してホログラムを操作する方法を学習するLearn how to interact with holograms using UI menus and buttons
  • テキスト要素を追加する方法を学習するLearn how to add text elements
  • オブジェクト上にヒントを動的に生成する方法を学習するLearn how to spawn tooltips on objects dynamically

ボタンの静的パネルの作成Creating a static panel of buttons

[階層] ウィンドウで、RoverExplorer オブジェクトを右クリックし、 [Create Empty](空アイテムの作成) を選択して、RoverExplorer の子として空のオブジェクトを追加し、そのオブジェクトに Buttons と名前を付けて、Transform コンポーネントを次のように構成します。In the Hierarchy window, right-click on the RoverExplorer object and select Create Empty to add an empty object as a child of the RoverExplorer, name the object Buttons, and configure the Transform component as follows:

  • 位置:X = -0.6、Y = 0.036、Z = -0.5Position: X = -0.6, Y = 0.036, Z = -0.5
  • 回転:X = 90、Y = 0、Z = 0Rotation: X = 90, Y = 0, Z = 0
  • スケール:X = 1、Y = 1、Z = 1Scale: X = 1, Y = 1, Z = 1

新しく作成された Buttons オブジェクトが選択され配置されている Unity

[プロジェクト] ウィンドウで、 [アセット] > [MRTK.Tutorials.GettingStarted] > [Prefabs](プレハブ) フォルダーの順に移動し、PressableRoundButton プレハブをクリックして Buttons オブジェクトにドラッグします。次に、PressableRoundButton を右クリックし、 [複製] を選択してコピーを作成します。この操作を、PressableRoundButton オブジェクトが全部で 3 個できるまで繰り返します。In the Project window, navigate to the Assets > MRTK.Tutorials.GettingStarted > Prefabs folder, click-and-drag the PressableRoundButton prefab on to the Buttons object, then right-click on the PressableRoundButton and select Duplicate to create a copy, repeat until you have a total of three PressableRoundButton objects:

PressableRoundButton プレハブが新しく追加された Unity

[階層] ウィンドウで、Buttons オブジェクトを選択します。次に、[インスペクター] ウィンドウで [コンポーネントの追加] ボタンを使用し、GridObjectCollection コンポーネントを追加して、次のように構成します。In the Hierarchy window, select the Buttons object, then in the Inspector window, use the Add Component button to add the GridObjectCollection component and configure it as follows:

  • 並べ替えの種類:子の順序Sort Type: Child Order
  • レイアウト:横方向Layout: Horizontal
  • セルの幅:0.2Cell Width: 0.2
  • アンカー:中央左Anchor: Middle Left

次に、 [コレクションの更新] ボタンをクリックして、Buttons オブジェクトの子オブジェクトの位置を更新します。Then click the Update Collection button to update the position of the Buttons object's child objects:

GridObjectCollection コンポーネントが追加、構成、適用された Unity の Buttons オブジェクト

[階層] ウィンドウで、それらのボタンに HintsExplodeReset という名前を付けます。In the Hierarchy window, name the buttons Hints, Explode, and Reset.

各ボタンについて、SeeItSayItLabel > TextMeshPro 子オブジェクトの順に選択し、[インスペクター] ウィンドウで、それぞれの TextMeshPro - Text コンポーネントのテキストをそのボタンの名前と一致するように変更します。For each button, select the SeeItSayItLabel > TextMeshPro child object, then in the Inspector window, change the respective TextMeshPro - Text component text to match the button names:

ボタンのテキスト ラベルが構成された Unity

完了したら、Buttons オブジェクトの子オブジェクトを折りたたみます。Once done, collapse the Buttons object's child objects.

[階層] ウィンドウで、Hints ボタン オブジェクトを選択します。次に、[インスペクター] ウィンドウで、次のように Interactable OnClick () イベントを構成します。In the Hierarchy window, select the Hints button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • RoverAssembly オブジェクトを [None (Object)](なし (オブジェクト)) フィールドに割り当てますAssign the RoverAssembly object to the None (Object) field
  • [No Function](関数なし) ドロップダウンから、PlacementHintsController > TogglePlacementHints () の順に選択し、イベントがトリガーされたときに実行するアクションとして、この関数を設定しますFrom the No Function dropdown, select PlacementHintsController > TogglePlacementHints () to set this function as the action to be executed when the event is triggered

Hints ボタン オブジェクトの OnClick イベントが構成された Unity

ヒント

Interactable コンポーネントは、すべてのオブジェクトを入力に対して簡単にインタラクティブかつレスポンシブにすることのできるオールインワン コンテナーです。The Interactable component is an all-in-one container to make any object easily interactable and responsive to input. Interactable は、タッチ、ハンド レイ、音声などを含むすべての種類の入力のキャッチオールとして機能し、これらの対話をイベントと視覚的テーマの応答にファネルします。Interactable acts as a catch-all for all types of input including touch, hand rays, speech, etc. and funnels these interactions into events and visual theme responses. さまざまな入力の種類に合わせて構成し、その視覚的テーマをカスタマイズする方法については、MRTK ドキュメント ポータルInteractable ガイドを参照してください。To learn how to configure it for different input types and customize it's visual theme, you can refer to the Interactable guide in the MRTK Documentation Portal.

[階層] ウィンドウで、Explode ボタン オブジェクトを選択します。次に、[インスペクター] ウィンドウで、次のように Interactable.OnClick () イベントを構成します。In the Hierarchy window, select the Explode button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • RoverAssembly オブジェクトを [None (Object)](なし (オブジェクト)) フィールドに割り当てますAssign the RoverAssembly object to the None (Object) field
  • [No Function](関数なし) ドロップダウンから、ExplodedViewController > ToggleExplodedView () の順に選択し、イベントがトリガーされたときに実行するアクションとして、この関数を設定しますFrom the No Function dropdown, select ExplodedViewController > ToggleExplodedView () to set this function as the action to be executed when the event is triggered

Explode ボタン オブジェクトの OnClick イベントが構成された Unity

[再生] ボタンを押してゲーム モードに入り、スペース バー ボタンを押したままにして手をアクティブにし、マウスを使用して Hints ボタンを押して、配置ヒント オブジェクトの可視性を切り替えます。Press the Play button to enter Game mode, then press-and-hold the space bar button to activate the hand and use the mouse to press the Hints button to toggle the visibility of the placement hint objects:

[ヒント] ボタンが押されている Unity 再生モードの分割ビュー

また、Explode ボタンを押して、分解ビューのオンとオフを切り替えます。and the Explode button to toggle the exploded view on and off:

[分解] ボタンが押されている Unity 再生モードの分割ビュー

ユーザーに追従する動的メニューの作成Creating a dynamic menu that follows the user

[プロジェクト] ウィンドウで、 [資産] > [MRTK] > [SDK] > [Features](機能) > [UX] > [Prefabs](プレハブ) > [Menus](メニュー) フォルダーの順に移動し、 [NearMenu4x1] プレハブをクリックして [階層] ウィンドウにドラッグします。その [Transform](変換) の [Position](位置) を X = 0、Y = -0.4、Z = 0 に設定し、以下のように構成します。In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > Menus folder, click-and-drag the NearMenu4x1 prefab into the Hierarchy window, set its Transform Position to X = 0, Y = -0.4, Z = 0 and configure it as follows:

  • SolverHandler コンポーネントの [Tracked Target Type](追跡対象の種類)[ヘッド] に設定されていることを確認しますVerify that the SolverHandler component's Tracked Target Type is set to Head
  • RadialView Solver コンポーネントの横にあるチェックボックスをオンにして、既定で有効になるようにしますCheck the checkbox next to the RadialView Solver component so it is enabled by default

新しく追加されたメニューの近くのプレハブが選択されている Unity

[階層] ウィンドウで、オブジェクトの名前を Menu に変更し、ButtonCollection 子オブジェクトを展開して、次の 4 つのボタンを表示します。In the Hierarchy window, rename the object to Menu, then expand its ButtonCollection child object to reveal the four buttons:

Menu オブジェクトが選択されて ButtonCollection オブジェクトが展開されている Unity

最初のボタンの名前を Indicator に変更します。その後、[インスペクター] ウィンドウで、次のように Button Config Helper (Script) コンポーネントを構成します。Rename the first button to Indicator, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • ボタンの名前と一致するように [Main Label Text](メイン ラベル テキスト) を変更しますChange the Main Label Text to match the name of the button
  • Indicator オブジェクトを [None (Object)](なし (オブジェクト)) フィールドに割り当てますAssign the Indicator object to the None (Object) field
  • [No Function](関数なし) ドロップダウンから、GameObject > SetActive (bool) の順に選択し、イベントがトリガーされたときに実行するアクションとして、この関数を設定しますFrom the No Function dropdown, select GameObject > SetActive (bool) to set this function as the action to be executed when the event is triggered
  • 引数チェックボックスが オン になっていることを確認しますVerify that the argument checkbox is checked
  • アイコン を [検索] アイコンに変更しますChange the Icon to the 'search' icon

Indicator ボタン オブジェクトのボタン構成ヘルパーが構成されている Unity

[階層] ウィンドウで Indicator オブジェクトを選択します。次に、[インスペクター] ウィンドウで以下を実行します。In the Hierarchy window, select the Indicator object, then in the Inspector window:

  • その名前の横にあるチェックボックスをオフにして、既定で非アクティブにしますUncheck the checkbox next to its name to make it inactive by default
  • [コンポーネントの追加] ボタンを使用して Directional Indicator Controller (Script) コンポーネントを追加しますUse the Add Component button to add the Directional Indicator Controller (Script) component

Indicator オブジェクトが選択されて無効化され、DirectionalIndicatorController コンポーネントが追加された Unity

注意

これで、アプリの起動時にインジケーターは既定で無効になり、[Indicator](インジケーター) ボタンを押すと有効にできるようになりました。Now, when the app starts, the Indicator is disabled by default and can be enabled by pressing the Indicator button.

2 番目のボタンの名前を TapToPlace に変更します。その後、[インスペクター] ウィンドウで、次のように Button Config Helper (Script) コンポーネントを構成します。Rename the second button to TapToPlace, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • ボタンの名前と一致するように [Main Label Text](メイン ラベル テキスト) を変更しますChange the Main Label Text to match the name of the button
  • RoverExplorer > RoverAssembly オブジェクトを [None (Object)](なし (オブジェクト)) フィールドに割り当てますAssign the RoverExplorer > RoverAssembly object to the None (Object) field
  • [No Function](関数なし) ドロップダウンから、TapToPlace > bool Enabled の順に選択し、イベントがトリガーされたときにこのプロパティ値を更新するようにしますFrom the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • 引数チェックボックスが オン になっていることを確認しますVerify that the argument checkbox is checked
  • アイコン を [hand with ray](手の光線を表示) アイコンに変更しますChange the Icon to the 'hand with ray' icon

TapToPlace ボタン オブジェクトのボタン構成ヘルパーが構成されている Unity

[階層] ウィンドウで RoverAssembly オブジェクトを選択してから、[インスペクター] ウィンドウで Tap To Place (Script) コンポーネントを次のように構成します。In the Hierarchy window, select the RoverAssembly object, then in the Inspector window, configure the Tap To Place (Script) component as follows:

  • その名前の横にあるチェックボックスをオフにして、既定で非アクティブにしますUncheck the checkbox next to its name to make it inactive by default
  • On Placing Stopped () イベント セクションで、 + アイコンをクリックし、新しいイベントを追加します。In the On Placing Stopped () event section, click the + icon to add a new event:
  • RoverExplorer > RoverAssembly オブジェクトを [None (Object)](なし (オブジェクト)) フィールドに割り当てますAssign the RoverExplorer > RoverAssembly object to the None (Object) field
  • [No Function](関数なし) ドロップダウンから、TapToPlace > bool Enabled の順に選択し、イベントがトリガーされたときにこのプロパティ値を更新するようにしますFrom the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • 引数チェックボックスが オフ になっていることを確認しますVerify that the argument checkbox is unchecked

TapToPlace コンポーネントが再構成された Unity

注意

これで、アプリの起動時に Tap to Place 機能は既定で無効になり、[Tap to Place] ボタンを押すと有効にできるようになりました。Now, when the app starts, the Tap to Place functionality is disabled by default and can be enabled by pressing the Tap to Place button. また、Tap to Place が完了すると、自動的に機能は無効になります。Additionally, when the tap to place is completed, it will disable itself.

シーンへのテキストの追加Adding text to the scene

[階層] ウィンドウで、Table オブジェクトを右クリックし、 [3D オブジェクト] > [Text - TextMeshPro](テキスト - TextMeshPro) の順に選択して、テキスト オブジェクトを Table オブジェクトの子として追加します。次に、[インスペクター] ウィンドウで、次のように Rect Transform コンポーネントを構成します。In the Hierarchy window, right-click on the Table object and select 3D Object > Text - TextMeshPro to add a text object as a child of the Table object, then in the Inspector window, configure the Rect Transform component as follows:

  • [Pos Y](位置 Y) を 1 に変更しますChange Pos Y to 1
  • [幅] を 1 に変更しますChange Width to 1
  • [高さ] を 1 に変更しますChange Height to 1
  • [回転 X] を 90 に変更しますChange Rotation X to 90

新しく作成された TextMeshPro オブジェクトが選択されている Unity

次に、TextMeshPro - Text コンポーネントを次のように構成します。Then configure the TextMeshPro - Text component as follows::

  • [テキスト] を Rover Explorer に変更しますChange Text to Rover Explorer
  • [フォント スタイル] を [太字] に変更しますChange Font Style to Bold
  • [フォント サイズ] を 1 に変更しますChange Font Size to 1
  • [追加設定] > [余白] を 0.03 に変更しますChange Extra Settings > Margins to 0.03

TextMeshPro コンポーネントが構成された Unity

ヒントの追加Adding tooltips

[プロジェクト] ウィンドウで、 [アセット] > [MRTK] > [SDK] > [機能] > [UX] > [Prefabs](プレハブ) > [ヒント] フォルダーの順に移動して、ヒント プレハブを見つけます。In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip folder to locate the tooltip prefabs:

ToolTips フォルダーが選択されている Unity プロジェクト ウィンドウ

[階層] ウィンドウで、RoverExplorer > RoverParts オブジェクトの順に展開し、そのすべての子のローバー パーツ オブジェクトを選択します。次に、[インスペクター] ウィンドウで [コンポーネントの追加] ボタンを使用し、ToolTipSpawner コンポーネントを追加して、次のように構成します。In the Hierarchy window, expand the RoverExplorer > RoverParts object and select all its child rover part objects, then in the Inspector window, use the Add Component button to add the ToolTipSpawner component and configure it as follows:

  • ヒントを表示するにはユーザーがそのパーツに視線を向けることが必要であるようにするため、 [Focus Enabled](フォーカスが有効) チェックボックスがオンになっていることを確認しますEnsure the Focus Enabled checkbox is checked to require the user to look at the part for the tooltip to appear
  • Simple Line ToolTip プレハブを、[プロジェクト] ウィンドウから [Tool Tip Prefab](ツール ヒント プレハブ) フィールドに割り当てますAssign the Simple Line ToolTip prefab from the Project window to the Tool Tip Prefab field
  • [ToolTip Override Settings](ヒントのオーバーライド設定) > [設定モード][オーバーライド] に変更しますChange the ToolTip Override Settings > Settings Mode to Override
  • [ToolTip Override Settings](ヒントのオーバーライド設定) > [Manual Pivot Local Position Y](手動のピボットのローカル位置 Y)1.5 に変更しますChange the ToolTip Override Settings > Manual Pivot Local Position Y to 1.5

すべての探査車パーツ オブジェクトが選択され、ToolTipSpawner コンポーネントが追加されて構成された Unity

[階層] ウィンドウで、最初のローバー パーツを RoverParts > Camera_Part の順で選択し、ToolTipSpawner コンポーネントを次のように構成します。In the Hierarchy window, select the first rover part, RoverParts > Camera_Part, and configure the ToolTipSpawner component as follows:

  • パーツの名前を反映するように、 [Tool Tip Text](ツール ヒントのテキスト)Camera に変更しますChange Tool Tip Text to reflect the name of the part, i.e., Camera

カメラの ToolTipText が構成された Unity

それぞれのローバー パーツ オブジェクトに対してこの手順を 繰り返し て、ToolTipSpawner コンポーネントを次のように構成します。Repeat this step for each of the rover part objects to configure the ToolTipSpawner component as follows:

  • Generator_Part では、 [Tool Tip Text](ツール ヒントのテキスト)Generator に変更するFor the Generator_Part, change the Tool Tip Text to Generator
  • Lights_Part では、 [Tool Tip Text](ツール ヒントのテキスト)Lights に変更するFor the Lights_Part, change the Tool Tip Text to Lights
  • UHFAntenna_Part では、 [Tool Tip Text](ツール ヒントのテキスト)UHF Antenna field に変更するFor the UHFAntenna_Part, change the Tool Tip Text to UHF Antenna field
  • Spectrometer_Part では、 [Tool Tip Text](ツール ヒントのテキスト)Spectrometer に変更するFor the Spectrometer_Part, change the Tool Tip Text to Spectrometer

[再生] ボタンを押してゲーム モードに入り、マウスの右ボタンを押したまま、視線入力がパーツの 1 つに当たるまでマウスを移動します。すると、そのパーツのヒントが次のように表示されます。Press the Play button to enter Game mode, then press-and-hold the right mouse button while moving your mouse until the gaze hit's one of the parts and the tooltip for that part will be displayed:

視線によってツールヒントがトリガーされた Unity の再生モード分割ビュー

結論Congratulations

このチュートリアルでは、MRTK で用意されているボタンとメニュー プレハブを Unity の TextMeshPro コンポーネントと共に使用して、シンプルなユーザー インターフェイスを作成する方法について学習しました。また、ボタンが押されたときにイベントがトリガーされるようにボタンを構成する方法についても学習しました。In this tutorial, you learned how to create a simple user interface using MRTK's provided button and menu prefabs alongside Unity's TextMeshPro component and how to configure the buttons to trigger events when they are pressed. さらに、動的なヒント UI 要素を追加して、ユーザーに追加情報を提供する方法についても学習しました。You also learned how to add dynamic tooltip UI elements to provide the user with additional information.

次のチュートリアル:7.3D オブジェクトの操作Next Tutorial: 7. Interacting with 3D objects