演習 - ボタンと動的メニューのパネル

  • 10 分

入力を提供するには、いくつかの方法があります。 入力によって特定のイベントがトリガーされ、いくつかの変更が実行されます。 UI コンポーネントは、ユーザーがシーン上のホログラムを操作する場合に役立ちます。

ボタンの静的パネルを作成する

  1. [階層] ウィンドウで、 RoverExplorer オブジェクトを右クリックし、[ 空の作成 ] を選択して、空のオブジェクトを RoverExplorer の子として追加します。 オブジェクトに Buttons という名前を付け、 Transform コンポーネントを次のように構成します。

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

    新しく作成された Buttons オブジェクトが選択され、配置されている Unity のスクリーンショット。

  2. プロジェクトウィンドウで、Assets>MRTK.Tutorials.GettingStarted>Prefabs フォルダーに移動し、PressableCylinderButton プレハブを Buttons オブジェクトにドラッグします。次に、PressableCylinderButton を右クリックして、複製 を選択し、コピーを作成します。これを Buttons の下に3つの PressableCylinderButton オブジェクトが揃うまで繰り返します。

    新しく追加された PressableRoundButton プレハブを含む Unity のスクリーンショット。

    TextMesh Pro のインポートを求めるメッセージが表示されます。 [Import TMP Essentials]\(TMP Essentials のインポート\) の最初のオプションを選択します。

  3. [階層] ペインで Buttons オブジェクトを選択し、[インスペクター] ウィンドウで [コンポーネントの 追加 ] を選択して オブジェクト バー コンポーネントを追加します。 次のように構成します:

    • オブジェクト バーのフロー方向: 水平
    • 間隔: X = 0.2、Y = 0

    [ボタン] の下の各オブジェクトをオブジェクト バー コンポーネントの[オブジェクト バー オブジェクト] リストに割り当てます。

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

  4. [階層] ウィンドウで、ボタンにそれぞれ ヒント、分解、リセット という名前を付けます。 ボタンごとに、ボタン名と一致するように、Pressable Button コンポーネントの Advanced StatefulInteractable Settings の SpeechRecognitionKeyword プロパティを変更します。

    ボタン テキスト ラベルが構成されていることを示すスクリーンショット。

  5. [階層] ウィンドウで[ ヒント ] ボタン オブジェクトを選択し、[インスペクター] ウィンドウで、 PressableButton.OnClicked () イベントを次のように構成します。

    • RoverAssembly オブジェクトを なし (オブジェクト) フィールドに割り当てる
    • [ 関数なし ] ドロップダウン リストから PlacementHintsController>TogglePlacementHints () を選択して、イベントがトリガーされたときに実行されるアクションとしてこの関数を設定します。

    構成されたヒント ボタン オブジェクト OnClick イベントのスクリーンショット。

  6. [階層] ペインで、分解 ボタン オブジェクトを選択し、[インスペクター] ウィンドウで、PressableButton.OnClicked () イベントを次のように構成します。

    • RoverAssembly オブジェクトを なし (オブジェクト) フィールドに割り当てる
    • [No Function]\( 関数なし \) ドロップダウンから 、ExplodedViewController>ToggleExplodedView() を選択して、イベントがトリガーされたときに実行されるアクションとしてこの関数を設定します。

    爆発ボタン オブジェクトの OnClick イベントが構成された Unity のスクリーンショット。

  7. [再生] ボタンを押してゲーム モードに切り替えます。 スペース バーを長押しして手をアクティブにしてから、マウスを使用して ヒント ボタンを押して、配置ヒント オブジェクトの表示/非表示を切り替えます。

    [ヒント] ボタンが押されている Unity 再生モードの分割ビューのスクリーンショット。

  8. [分解] ボタンを押すと、立体分解図のオンとオフが切り替わります。

    Explode ボタンが押されている Unity Play モードの分割ビューのスクリーンショット。

    リセット ボタンは 、モジュールの後半で実装します。

ユーザーの後に続く動的メニューを作成する

  1. プロジェクト ウィンドウで、 Packages>MRTK UX Components>Near Menu フォルダーに移動し、 NearMenuBase プレハブをクリックして階層ウィンドウにドラッグし、変換 位置 を X = 0、Y = -0.4、Z = 0 に設定し、次のように構成します。

    • [SolverHandler] コンポーネントの [Tracked Target Type](追跡対象の種類) が [Head] に設定されていることを確認します。
    • RadialView ソルバー コンポーネントの横にあるチェックボックスをオンにして、既定で有効にします。

    新しく追加されたメニューの近くのプレハブが選択された Unity のスクリーンショット。

  2. [階層] ウィンドウで、オブジェクトの名前を Menu に変更し、その MenuContent-HorizontalLayout (メニューとピン) > Buttons-GridLayout (ボタン) 子オブジェクトを展開して、次の 3 つのボタンを表示します。

    Menu オブジェクトが選択され、ButtonCollection オブジェクトが展開されている Unity のスクリーンショット。

  3. Buttons-GridLayout (ボタン) の最初のボタンの名前を Indicator に変更し、[階層] ウィンドウで、次のように Indicator ゲーム オブジェクトを構成します。

    • Frontplate > AnimatedContent > Icon > Label オブジェクトを選択し、TextMesh Pro コンポーネントをボタンの名前と一致するように変更します。 階層内で Label オブジェクトがアクティブになっていることを確認します。
    • PressableButton.OnClicked() イベントを構成します。まず、シェブロンのような Indicator オブジェクトを None (Object) フィールドに割り当て、次に > ドロップダウンから GameObject SetActive (bool) を選択します (引数のチェックボックスが選択されていることを確認します)。
    • UIButtonFontIcon オブジェクト>、Frontplate > AnimatedContent > Icon を選択し、アイコンをフォント アイコン セレクター コンポーネントの検索アイコンに変更します。 これはアイコンの一覧で確認するか、 現在のアイコン名 を アイコン 130 に設定します。

    インジケーター ボタン オブジェクトのボタン構成ヘルパーが構成されている Unity のスクリーンショット。

  4. シェブロン インジケーター オブジェクトを無効にするには、[階層] ウィンドウで、シェブロンのようなインジケーター オブジェクトを選択し、[インスペクター] ウィンドウで次の操作を行います。

    • 名前の横にあるチェックボックスを選択解除することで、デフォルトで無効にします。
    • [コンポーネントの追加] ボタンを使用して、方向インジケーター コントローラー (スクリプト) コンポーネントを追加します。

    Indicator オブジェクトが選択、無効、および DirectionalIndicatorController コンポーネントが追加された Unity のスクリーンショット。

  5. 2 番目のボタンの名前を TapToPlace に変更し、[階層] ウィンドウで 次のように TapToPlace ゲーム オブジェクトを構成します。

    • Frontplate > AnimatedContent > Icon > Label オブジェクトを選択し、TextMesh Pro コンポーネントをボタンの名前と一致するように変更します。 階層内で Label オブジェクトがアクティブになっていることを確認します。
    • RoverExplorer > オブジェクトを [なし] (オブジェクト) フィールドに割り当て、[関数なし] ドロップダウンから TapToPlace>bool Enabled を選択して、PressableButton.OnClicked() イベントを構成します (引数のチェック ボックスがオンになっていることを確認します)。
    • UIButtonFontIcon オブジェクトの Frontplate > AnimatedContent > Icon >を選択し、アイコンをフォント アイコン セレクター コンポーネントの手のアイコンに変更します。 これはアイコンの一覧で確認できます。または、[ 現在のアイコン名] を [アイコン 13] に設定します。

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

  6. [階層] ウィンドウで RoverAssembly オブジェクトを選択し、[インスペクター] ウィンドウで、次のように Tap To Place (スクリプト) コンポーネントを 構成します。

    • 名前の横にあるチェックボックスのチェックを外して、デフォルトで非アクティブにする。
    • On Placing Stopped () イベント セクション内で、+ アイコンを選択して新しいイベントを追加します。
    • RoverExplorer>RoverAssembly オブジェクトをNone (Object) フィールドに割り当てます。
    • [ 関数なし ] ドロップダウンから TapToPlace>bool Enabled を選択し、イベントがトリガーされたときにこのプロパティ値を更新します。
    • 引数のチェック ボックスがオフになっていることを確認 します。

    TapToPlace コンポーネントが再構成された Unity のスクリーンショット。