4.シーンを対話型にする4. Making your scene interactive

概要Overview

前のチュートリアルでは、ARSession、ポーン、およびゲーム モードを追加して、チェス アプリの Mixed Reality セットアップを完了しました。In the previous tutorial you added an ARSession, Pawn, and Game Mode to complete the mixed reality setup for the chess app. このセクションでは、オープン ソースの Mixed Reality Toolkit UX Tools プラグインの使用方法について説明します。このプラグインには、シーンを対話型にするためのツールが用意されています。This section focuses on using the open source Mixed Reality Toolkit UX Tools plugin, which provides tools to make the scene interactive. このセクションが完了するまでに、ユーザー入力でチェスの駒を移動できるようになります。By the end of this section you'll be able to move the chess pieces with user input.

目標Objectives

  • Mixed Reality Toolkit UX Tools プラグインをダウンロードするDownloading the Mixed Reality Toolkit UX Tools plugin
  • ハンド インタラクション アクターを指先に追加するAdding Hand Interaction Actors to your fingertips
  • シーン内のオブジェクトにマニピュレーターを作成して追加するCreating and adding Manipulators to objects in the scene
  • 入力シミュレーションを使用してプロジェクトを検証するUsing input simulation to validate the project

MRTK UX Tools プラグインのダウンロードDownloading the MRTK UX Tools plugin

ユーザー入力の操作を開始する前に、プラグインをプロジェクトに追加する必要があります。Before you start working with user input, you'll need to add the plugin to the project.

  1. GitHub 上にある Mixed Reality UX Tools の リリース ページで、UX Tools for Unreal v0.9.0 のリリースに移動し、UXTools.0.9.0.zip をダウンロードします。On the Mixed Reality UX Tools releases page on GitHub, navigate to the UX Tools for Unreal v0.9.0 release and download UXTools.0.9.0.zip. ファイルを解凍します。Unzip the file.

  2. プロジェクトのルート フォルダーに、Plugins という名前の新しいフォルダーを作成します。Create a new folder called Plugins in the root folder of the project. 解凍された UXTools プラグインをこのフォルダーにコピーし、Unreal エディターを再起動します。Copy the unzipped UXTools plugin into this folder and restart the Unreal editor.

プロジェクト プラグイン フォルダーを作成する

  1. UX Tools プラグインには、ボタン入力シミュレーション、および ポインター を含むコンポーネント用のサブフォルダーのある Content フォルダーと、その他のコード用の C++ Classes フォルダーがあります。The UXTools plugin has a Content folder with subfolders for components including Buttons, Input Simulation, and Pointers, as well as a C++ Classes folder with additional code.

注意

コンテンツ ブラウザー[UXTools コンテンツ] セクションが表示されない場合は、 [表示オプション] > [プラグイン コンテンツを表示する] をクリックします。If you don’t see the UXTools Content section in the Content Browser, click View Options > Show Plugin Content.

プラグイン コンテンツを表示する

プラグインがインストールされたら、プラグインから提供されるツールを使用する準備が整います。まずはハンド インタラクション アクターから使い始めます。With the plugin installed, you're ready to start using the tools it has to offer, starting with hand interaction actors.

ハンド インタラクション アクターを生成するSpawning Hand Interaction Actors

UX 要素とのハンド インタラクションは、ハンド インタラクション アクターを使用して実行されます。これにより、近接および遠隔のインタラクションのポインターとビジュアルが作成および起動されます。Hand interaction with UX elements is performed with Hand Interaction Actors, which create and drive the pointers and visuals for near and far interactions.

  • 近接インタラクション は、人差し指と親指で要素をつまむか、指先でそれらをつつくことによって実行されます。Near interactions are performed by pinching elements between index finger and thumb or by poking them with a fingertip.
  • 遠隔インタラクション は、仮想ハンドの光線を要素にあてて、人差し指と親指を一緒に押すことで実行されます。Far interactions are performed by pointing a ray from the virtual hand at an element and pressing index and thumb together.

この例では、MRPawn にハンド インタラクション アクターを追加すると、次の処理が行われます。In our case, adding a Hand Interaction Actor to MRPawn will:

  • ポーンの人差し指の先端にカーソルを追加します。Add a cursor to the tips of the Pawn’s index fingers.
  • ポーンを介して操作できる多関節ハンド入力イベントを提供します。Provide articulated hand input events that can be manipulated through the Pawn.
  • 仮想ハンドの手のひらから伸びる手の光線を通して、遠くの相互作用入力イベントを許可します。Allow far interaction input events through hand rays extending from the palms of the virtual hands.

これらの概念を理解するために、操作を続行する前に、ハンド インタラクションに関するドキュメントを参照することをお勧めします。In order to drive these concepts home, you're encouraged to read through the documentation on hand interactions before continuing.

準備ができたら、MRPawn ブループリントを開き、 [Event Graph](イベント グラフ) に移動します。Once you're ready, open the MRPawn Blueprint and go to the Event Graph.

  1. Event BeginPlay から実行ピンをドラッグ アンド リリースして、新しいノードを配置します。Drag and release the execution pin from Event BeginPlay to place a new node.

    • [Spawn Actor from Class] を選択し、 [クラス] ピンの横にあるドロップダウンをクリックし、Uxt ハンド インタラクション アクター を検索します。Select Spawn Actor from Class, click the dropdown next to the Class pin and search for Uxt Hand Interaction Actor.
  2. 2 番目の Uxt ハンド インタラクション アクター を生成します。今回は、 に設定します。Spawn a second Uxt Hand Interaction Actor, this time setting the Hand to Right. イベントが開始されると、Uxt ハンド インタラクション アクターがそれぞれの手で生成されます。When the event begins, a Uxt Hand Interaction Actor will be spawned on each hand.

イベント グラフ は、次のスクリーンショットと一致している必要があります。Your Event Graph should match the following screenshot:

Uxt ハンド インタラクション アクターを生成する

Uxt ハンド インタラクション アクターには、オーナーと最初の変換場所が必要です。Both Uxt Hand Interaction Actors need owners and initial transform locations. ハンド インタラクション アクターが表示されるとすぐに仮想ハンドにジャンプするため、最初の変換は重要ではありません (この動作は UX Tools プラグインに含まれています)。The initial transform doesn’t matter since the Hand Interaction Actors will jump to the virtual hands as soon as they're visible (this behavior is included in the UX Tools plugin). ただし、SpawnActor 機能では、コンパイラ エラーを回避するために変換入力が必要であるため、既定値を使用します。However, the SpawnActor function requires a Transform input to avoid a compiler error, so you'll use the default values.

  1. Spawn Transform ピンの 1 つからピンをドラッグ アンド リリースして、新しいノードを配置します。Drag and release the pin off one of the Spawn Transform pins to place a new node.

    • Make Transform ノードを検索し、戻り値 をもう一方の Spawn Transform にドラッグして、両方の SpawnActor ノードが接続されるようにします。Search for the Make Transform node, then drag the Return Value to the other hand’s Spawn Transform so that both SpawnActor nodes are connected.
  2. 両方の SpawnActor ノードの下部にある 下矢印 をクリックして、 [所有者] ピンを表示します。Click the down arrow at the bottom of both SpawnActor nodes to reveal the Owner pin.

    • [所有者] ピンの 1 つからピンをドラッグ アンド リリースして、新しいノードを配置します。Drag the pin off one of the Owner pins and release to place a new node.
    • self を検索して Get a reference to self 変数を選択し、Self オブジェクト参照ノードと他のハンド インタラクション アクターの [所有者] ピンの間にリンクを作成します。Search for self and select the Get a reference to self variable, then create a link between the Self object reference node and the other Hand Interaction Actor’s Owner pin.
  3. 最後に重要な点として、両方のハンド インタラクション アクターの [Show Near Cursor on Grab Targets](つかむ対象の近くにあるカーソルを表示する) チェック ボックスをオンにします。Last but not least, check the Show Near Cursor on Grab Targets box for both Hand Interaction Actors. これで、人差し指が近づいたときに、つかむ対象に重ねてカーソルが表示されるようになり、ターゲットに対する指の位置を相対的に確認しやすくなります。This will cause a cursor to appear on the grab target as your index finger approaches it, which will make it easier to see where your finger is relative to the target.

    • コンパイル保存 を行って、メイン ウィンドウに戻ります。Compile, save, and return to the Main window.

接続が次のスクリーンショットと一致していることを確認しますが、ブループリントを読みやすくするためにノードをドラッグしてもかまいません。Make sure the connections match the following screenshot, but feel free to drag around nodes to make your Blueprint more readable

Uxt ハンド インタラクション アクターのセットアップを完了する

MRTK UX Tools プラグインに用意されているハンド インタラクション アクターの詳細については、ドキュメントを参照してください。You can find more information about the Hand Interaction Actor provided in the MRTK UX Tools plugin in the documentation.

これで、プロジェクトの仮想ハンドはオブジェクトを選択できるようになりましたが、オブジェクトを操作することはできません。Now the virtual hands in the project have a way of selecting objects, but they still can't manipulate them. アプリをテストする前の最後のタスクは、シーン内のアクターにマニピュレーター コンポーネントを追加することです。Your last task before testing the app is to add Manipulator components to the actors in the scene.

マニピュレーターの添付Attaching Manipulators

マニピュレーターは、多関節ハンドによる入力に応答するコンポーネントであり、つかんだり、回転させたり、および変換したりできます。A Manipulator is a component that responds to articulated hand input and can be grabbed, rotated, and translated. マニピュレーターの変換をアクターの変換に適用すると、アクターの直接操作が可能になります。Applying the Manipulator’s transform to an Actors transform allows direct Actor manipulation.

  1. [ボード] ブループリントを開き、 [コンポーネントの追加] をクリックして、 [コンポーネント] パネルで Uxt 汎用マニピュレーター を検索します。Open the Board blueprint, click Add Component and search for Uxt Generic Manipulator in the Components panel.

汎用マニピュレーターを追加する

  1. [詳細] パネルの [汎用マニピュレーター] セクションを展開します。Expand the Generic Manipulator section in the Details panel. ここから片手または両手操作、回転モード、スムージングを設定できます。You can set one-handed or two-handed manipulation, rotation mode, and smoothing from here. 好きなモードを自由に選択して、ボードを コンパイル し、保存 します。Feel free to select whichever modes you wish, then Compile and Save Board.

モードを設定する

  1. WhiteKing アクターについて上記の手順を繰り返します。Repeat the steps above for the WhiteKing Actor.

MRTK UX Tools プラグインに用意されているマニピュレーター コンポーネントの詳細については、ドキュメントを参照してください。You can find more information about the Manipulator Components provided in the MRTK UX Tools plugin in the documentation.

シーンのテストTesting the scene

良い知らせです。Good news everyone! これで、新しい仮想ハンドとユーザー入力でアプリをテストする準備が整いました。You're ready to test out the app with its new virtual hands and user input. メイン ウィンドウで [再生] を押すと、MRTK UX Tools プラグインから 2 つのメッシュ ハンドが提供され、それぞれの手の平からハンド レイが伸びているのを確認できます。Press Play in the Main Window and you'll see two mesh hands provided by the MRTK UX Tools plugin with hand rays extending from each hand’s palm. 次のように、手とその相互作用を制御できます。You can control the hands and their interactions as follows:

  • 左 Alt キーを押しながら 左手 を制御し、左 Shift キーを押して 右手 を制御します。Hold down the left Alt key to control the left hand and the left Shift key to control the right hand.
  • マウスを動かして手を動かし、マウス ホイール を使用してスクロールして、手を 前方 または 後方 に移動します。Move your mouse to move the hand and scroll with your mouse wheel to move the hand forwards or backwards.
  • 左マウスをクリックして ピンチ、マウスの中央ボタンをクリックして 指さし を行います。Click the left mouse button to pinch, click the middle mouse button to poke.

注意

PC に複数のヘッドセットが接続されている場合、入力シミュレーションが機能しない可能性があります。Input simulation may not work if you have multiple headsets plugged into your PC. 問題が発生している場合は、他のヘッドセットを取り外してみてください。If you're having issues, try unplugging your other headsets.

ビューポート内のシミュレートされた手

シミュレートされた手を使用して、チェスの白キングを手に取り、移動して、置いて、ボードを操作してみましょう。Try using the simulated hands to pick up, move, and set down the white chess king and manipulate the board! 近接インタラクションと遠隔インタラクションの両方を試してみてください。手がボードとキングを直接つかめる位置まで近づくと、ハンド レイが消え、人差し指の先が指カーソルに置き換わります。Experiment with both near and far interaction - notice that when your hands get close enough to grab the board and king directly, the hand ray disappears and is replaced with a finger cursor at the tip of the index finger.

MRTK UX Tools プラグインに用意されているシミュレートされた手の機能の詳細については、ドキュメントを参照してください。You can find more information about the simulated hands feature provided by the MRTK UX Tools plugin in the documentation.

これで、仮想ユーザーがオブジェクトと対話できるようになったので、次のチュートリアルに進み、ユーザー インターフェイスとイベントを追加する準備ができました。Now that your virtual hands can interact with objects, you're ready to move on to the next tutorial and add user interfaces and events.

次のセクション: 5.ボタンの追加およびピースの位置のリセットNext Section: 5. Adding a button & resetting piece locations