Gear VR HMD タッチパッドの使用方法

Gear VR HMD タッチパッドを設定する

Choose your operating system:

Windows

macOS

Linux

前提トピック

このページは以下のトピックへの知識があることを前提にしています。まず以下のトピックの内容についてご確認をお願いします。

HTTouchPad.png

Gear VR HMD の横に付いているタッチパッドを使って、ユーザーは今見えている VR プロジェクトとインタラクトすることができます。VR プロジェクトとインタラクトするには、タッチパッド上で指をタップまたはスワイプします。この操作ガイドでは、Gear VR HMD タッチパッドを設定し、タッチパッドの入力に応じて様々なテキストを表示していきます。

ステップ

Gear VR タッチパッド上での操作の種類が表示されるようにプレイヤーのポーンを設定するには、以下の手順に従います。

  1. まず最初にプレイヤーの Pawn ブループリントを開きます。[Component] タブで VRCamera を親にもつ TextRender コンポーネントを追加して以下の設定にすることで、行った操作の種類を後で確認できます。

    HTTouchPad_Pawn_Setup.png

    クリックしてフルサイズで表示

    プロパティ名

    デフォルト値

    Location

    X:100 Y:0 Z:0

    Rotation

    X:100 Y:0 Z:180

    Text

    TEMP TEMP TEMP

    Horizontal Alignment

    Center

    Vertical Alignment

    Text Center

  2. 次に、入力された操作の種類 (タップ / スワイプ) を判断するために、最初のタッチ位置から最後のタッチ位置までの距離をトラックします。この距離がある長さ未満であればタップ、それ以外であればスワイプとします。まず [Variables] セクションで 2 つの Vector 2D 変数を作成して以下の名前を付けます。

    HTTouchPad_Var_Setup.png

    • TouchStart

    • TouchEnd

  3. 最後に、Text 変数を 5 つ追加して、操作の種類、さらにスワイプの場合の始点を表示します。以下の名前と値を入れた Text 変数を GearVR_Pawn ブループリントに追加します。

    HTTouchPad_Var_TouchSwipe.png

    ノード名

    デフォルト値

    TouchTap

    TouchTap

    SwipeLeft

    SwipeLeft

    SwipeRight

    SwipeRight

    SwipeUp

    SwipeUp

    SwipeDown

    SwipeDown

これで必要なコンポーネントと変数がすべてポーンに追加されました。次のセクションでは、タップまたはスワイプ操作の実施を探知するために必要なことを説明します。

タッチ入力とスワイプ入力を設定する

このセクションでは、ユーザーのタッチパッド上での操作 (タップ / スワイプ) を判断するために、GearVR_Pawn ブループリントに初期ロジックを設定していきます。

  1. まず、ブループリント イベント グラフ の中を右クリックし、次のノードを探してイベント グラフに追加します。

    HTTouch_TouchStartEndNodes.png

    クリックしてフルサイズで表示

    ノード名

    デフォルト値

    Touch

    N/A

    Set Touch Start

    N/A

    Set Touch End

    N/A

    Get Player Controller

    N/A

    Get Input Touch State

    N/A

    Make Vector 2D

    N/A

  2. 最初のタッチ位置から最後のタッチ位置までの距離によってタップとスワイプを区別するので、この 2 点を記録して保存します。まず Get Player Controller ノードを Get Input Touch Start ノードに接続して、ユーザーが最初にタッチしたのはいつかをトラックします。Location X と Location Y を Make Vector 2D ノードに接続してから、Make Vector 2D ノードの出力 Touch Start 変数と Touch End 変数の両方の入力に接続しておくと、タッチの開始と終わりが簡単に保存されるので便利です。最後に、Input Touch Pressed を Touch Start 変数に接続して、Input Touch Released を Touch End 変数に接続します。ブループリントはこのようになっています。

    HTTouch_TouchStartEndSetup.png

    クリックしてフルサイズで表示

  3. これで Touch Start 変数と Touch End 変数にデータを追加できる状態になりました。次は、タップとスワイプを区別するロジックを設定します。まず、以下のノードをイベントグラフに追加します。

    HTTouch_TapSwipeNodes.png

    クリックしてフルサイズで表示

    ノード名

    デフォルト値

    Touch Start

    N/A

    Touch End

    N/A

    Vector2d - Vector2d

    N/A

    Vector 2d Length

    N/A

    Break Vector 2D

    N/A

    Absolute (Float)

    N/A

    float < float

    N/A

    float > float

    N/A

  4. タップ / スワイプが行われたかどうかを確認する前に、Touch Start 変数と Touch End 変数間を減算して距離を求めます。これをブループリントで行うためには、Touch Start 変数と Touch End 変数を両方とも Vector2d - Vector2d ノードの入力に接続します。

    HTTouch_TapOrSwipeLogic_01.png

    クリックしてフルサイズで表示

  5. タップ / スワイプが行われたことを伝えるために、Touch Start 変数と Touch End 変数の長さまたは大きさを計測します。2 つの変数の長さが X 未満であれば、行われた操作の種類はタップ、X より大きければスワイプです。ブループリントでこれを設定します。まず Vector2d - Vector2d ノードの出力を引き出して Vector 2d Length ノードの入力につなぎます。Vector 2d Length の Return Value を float > float ノードの最初の入力へ接続し、float > float ノードの 2 番目の入力の値を 20 に設定します。この値がタップとスワイプの判断基準の距離となります。

    HTTouch_TapOrSwipeLogic_02.png

    クリックしてフルサイズで表示

    float > float ノードの 2 番目に入力する値を増加させると、タッチとスワイプを区別する入力値となるタッチパッド上での移動距離の調節ができます。

  6. スワイプ方向 (左右) は、Touch Start と Touch End の間の距離 X 値で判断します。距離が 0 より大きい場合、スワイプ方向は左、0 より小さい場合は右です。これを設定します。まず、Vector2d - Vector2d ノードを Break Vector 2D の入力に接続します。次に、Break Vector 2D ノードの X 出力を float < float ノードの最初の入力へ接続して、2 番目の入力は 0 のままにしておきます。

    HTTouch_TapOrSwipeLogic_03.png

    クリックしてフルサイズで表示

  7. スワイプ方向 (上下) は、Touch Start と Touch End の間の距離 Y 値で判断します。Y 値が 1 より大きい場合、スワイプ方向は上、1 より小さい場合は下です。これを設定します。まず、Break Vector 2D ノードの Y 出力を float > float ノードの最初の入力へ接続し、float > float の 2 番目のノードに 1 を設定します。

    HTTouch_TapOrSwipeLogic_04.png

    クリックしてフルサイズで表示

これでタップとスワイプの違いを判断するブループリント ロジックが設定されました。次のセクションでは、タップ / スワイプを区別し、そしてスワイプの始点をユーザーに伝えるテキストの表示方法を説明します。

タップとスワイプ操作の区別

次のセクションでは、タップとスワイプの違いを判断し、行われた操作の種類を示すテキストが表示されるようにブループリントを設定します。

  1. まず、ユーザーが行っている操作がタップなのかスワイプなのかを判断するために Branch ノードをイベントグラフに追加して、Set Touch End の出力を Branch ノードの入力に接続します。次に float > 20 ノードの Return Value を Branch ノードの Condition 入力へ接続します。これで、ロジックが Touch Start と Touch End の間の距離を確認し、その距離が 20 アンリアル単位 (UU) 未満であれば操作種類はタップとなります。距離が 20 UU より大きい場合は、操作種類がスワイプとなります。

    HTTouch_TapOrSwipeSetup_01.png

    クリックしてフルサイズで表示

  2. これでタップとスワイプの区別が可能になりました。次はスワイプの上下方向と左右方向をそれぞれ別のアクションで処理します。上下と左右を区別するために、まず Absolute(Float) ノードと float > float ノードを 1 つ複製して、以下の画像と同じになるように接続します。ここでは、X と Y の Absolute 値の大小を比較し、それぞれに対して異なるアクションを実行します。例えば、X と Y の Absolute 値がプラスであれば、行われたスワイプの方向は左右、マイナスであれば上下とします。

    HTTouch_TapOrSwipeSetup_02.png

    クリックしてフルサイズで表示

    この 2 つのベクターを比較する時は必ずベクターの Absolute 値を使ってください。負の記号を取り除いて正数のみで比較することができます。

  3. 次に、既存の Branch ノードの True 出力を引き出して、Executable Actions リストから Branch ノードを検索して追加します。Float > float ノードの Return Value を引き出して、追加した Branch ノードの Condition に接続します。スワイプ方向が左右の場合は True オプション、上下の場合は False オプションが発行されます。

    HTTouch_TapOrSwipeSetup_03.png

    クリックしてフルサイズで表示

  4. Branch ノードをあと 2 つイベントグラフに追加して、それぞれの入力をさきほど追加した Branch ノードの True 出力と False 出力に接続します。追加した Branch ノードは、特定の方向にスワイプされた時の表示内容を調節します。True 入力から接続されている Branch ノードは、左右方向のスワイプ操作によるアクションを調節します。False 入力から接続されている Branch ノードは、上下方向のスワイプ操作によるアクションを調節します。

    HTTouch_TapOrSwipeSetup_04.png

    クリックしてフルサイズで表示

  5. 最後に、左方向と右方向の区別をつけるために、float < 0 をさきほど追加した 1 つ目の Branch ノードの Condition 入力に接続します。さらに、上方向と下方向の区別をつけるために、float < 1 をさきほど追加した 2 つ目の Branch ノードの Condition 入力に接続します。

    HTTouch_TapOrSwipeSetup_05.png

    クリックしてフルサイズで表示

ブループリントでタップ / スワイプ機能が設定されました。次のセクションでは、Gear VR タッチパッドに適用された入力の種類に応じて異なるテキストを表示する方法を説明します。

タッチとスワイプに異なるアクションを設定する

タップ / スワイプの区別だけでなく、スワイプの方向も区別できるようになりました。このセクションでは、 入力の種類を示すテキストが表示されるように GearVR_Pawn ブループリントを設定します。

  1. タップ / スワイプ操作を処理する最初の Branch ノードの False 出力を引き出して、Executable Actions リストから Set Text (TextRender) ノードを検索して追加します。

    HTTouch_TapOrSwipeDisplayText_01.png

    クリックしてフルサイズで表示

  2. 次に、TouchUp Text 変数をイベントグラフの中で引き出して Get オプションを選択します。Set Text ノードの Value 入力へ接続します。

    HTTouch_TapOrSwipeDisplayText_04.png

    クリックしてフルサイズで表示

  3. 上記の手順を上下左右各方向に繰り返します。完成したブループリントはこのようになります。

    Copy Node Graph

    HTTouch_TapOrSwipeDisplayText_02.png

    クリックしてフルサイズで表示

    [Copy Node Graph] オプションをクリックし、与えられたテキストをブループリントに貼り付ければ、完成したブループリントを自分のブループリントへコピーすることができます。

結果

GearVR_Pawn ブループリントをコンパイルおよび保存したら、UE4 プロジェクトを Samsung Galaxy スマートフォンへデプロイし、スマートフォンを Gear VR HMD に置きます。指でタッチパッドをタップ / スワイプすると、以下の動画のように自分のアクションが表示されるようになります。

Gear Vr タッチパッドをタップ / スワイプしてもテキストが表示されない場合は、Text 変数の Default Value にテキストが入力されているか確認してください。

HTTouch_TapOrSwipeDisplayText_03.png

UE4 プロジェクトのダウンロード

以下のリンクから、このサンプルの作成に使われた UE4 プロジェクトをダウンロードすることができます。

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル