Use the Gear VR HMD Touchpad

Located on the side of the Gear VR HMD is a touchpad that allows users to interact with the VR project they are currently viewing. Users can interact with the VR projects by tapping or swiping their finger along this touchpad. In the following How To we will go over setting up the Gear VR HMD touchpad to display different text based on various touchpad inputs.

Steps

Below you will find instructions on how your player Pawn needs to be setup so that we can display what type of action is being performed on the Gear VR touchpad.

  1. First, open up your player Pawn Blueprint and from the Components tab, add a new TextRender component that is parented to the VRCamera and give it the following settings so that later on we can see what type of action was performed.
    Click for full image.
    Property Name Default Value
    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. Next, to determine if the input was a tap or a swipe we need to track the distance between the first touch and the last touch. If the distance between these numbers is under a certain amount, then a tap was performed. If the distance between these numbers is over a certain amount, then a swipe took place. To accomplish this, over in the Variables section, create two Vector 2D variables with the following names:
    • TouchStart
    • TouchEnd
  3. Finally, we need to add five Text variables that will be used to display if a tap or swipe took place and what direction the swipe originated. Add the following Text variables with the following names and values to your GearVR_Pawn Blueprint now.
    Node Name Default Value
    TouchTap TouchTap
    SwipeLeft SwipeLeft
    SwipeRight SwipeRight
    SwipeUp SwipeUp
    SwipeDown SwipeDown

With all of the needed components and variables added to the Pawn, in the next part we will take a look how to detect if a tap or swipe took place.

Touch & Swipe Input Setup

In the following section, we will go over how to set up the initial logic in our GearVR_Pawn Blueprint to determine if the user has just tapped or swiped the touchpad.

  1. First, right-click in the Blueprint Event Graph and search for the following Blueprint nodes, adding them to the Event Graph as they are located:
    Click for full image.
    Node Name Default Value
    Input 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. Next, we will need to record and then store the location of the first and last touch as we can use the distance between these two numbers to see if a tap or swipe has taken place. To accomplish this, first, connect the Get Player Controller node to the Get Input Touch State so that we can track when the first touch input the user does. To make things easier to work with, connect the Location X and Y to the Make Vector 2D node and then connect the Make Vector 2D node output to the inputs on both the Touch Start and Touch End variables as this will help us to easily store the start and end touch. Finally, connect the Input Touch Pressed to the Set Touch Start variable and then connect the Input Touch Released to the Set Touch End variable. When completed this part of the Blueprint should look like the following image:
    Click for full image.
  3. Now that our Touch Start and Touch End variables can be populated with data, next we are going to set up the logic to help determine if a tap or swipe took place. To accomplish this, first, add the following nodes to the Event Graph.
    Click for full image.
    Node Name Default Value
    **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. Before we can find out if a tap or a swipe took place, we first need to figure out the distance between the Touch Start and Touch End variables by subtracting them from one another. To get this working in our Blueprint, connect both Touch Start and Touch End variables to the inputs on the Vector2d - Vector2d node. HTTouch_TapOrSwipeLogic_01.png
  5. To tell if a tap or a swipe has taken place we can measure the length or magnitude of the Touch Start and Touch End variables. If the length between the two variables is lower than X, a tap has taken place. If the length is higher than X, then a swipe has taken place. To set this up in our Blueprint, take the output of the Vector2d - Vector2d node and connect it to the input on the Vector 2d Length node. Then connect the Return Value of the Vector 2d Length to the first input on the float > float and set the second input on the float > float to a value of 20 as this will define what distance is considered a tap versus a swipe.
    Click for full image.
    You can increase or decrease the distance that needs to be traversed on the touchpad for input to be considered a touch or swipe by increasing the number that is input into the second input on the float > float node
  6. To check if the user swiped left or right, we will need to see if the X value of the distance between Touch Start and Touch End is less than or greater than 0. If the distance is greater than 0, then it was a swipe left if not then it was a swipe right. To set this up, first, connect the output of the Vector2d - Vector2d node to the input of the Break Vector 2D node. Then connect the X output of the Break Vector 2D node to the first input on the float < float node and leave the second input with a value of 0.
    Click for full image.
  7. To check if the user swipes up or down, we need to see if the Y value of the distance between Touch Start and Touch End is greater than 1. If the Y value is greater than 1, then swipe up has occurred. If the Y value is less than one, then a swipe down has occurred. To set this up, connect the Y output on the Break Vector 2D node to the first input on the float > float node and then set the second input on the float > float node to a value of 1.
    Click for full image.

With the Blueprint logic to determine if we are tapping or swiping now completed, in the next section we will take a look at how to use this to display some text that tells the user if the tapped or swiped and which direction the swipe originated from.

Determining Between Taps & Swipes

In the following section, we will set up the Blueprint to detect the difference between a tap and a swipe and also give it the ability to display some text that shows what type of action took place.

  1. First, we need to figure out if the user is doing a tap or a swipe by adding a  Branch node to the Event Graph  and connecting the output of the Set Touch End to the input on the Branch node. Then connect the return value of the float > 20 nodes to the Condition input on the Branch node. When completed, this logic will then check the distance between the Touch Start and Touch End and if that distance is less than 20 units a tap took place. If that distance is over 20 units, then a swipe took place.
    Click for full image.
    The Gear VR HMD touchpad acts like a screen giving the touchpad the same resolution as the screen your device has. Because of this the units that the touch pad uses are in Slate Units.
  2. Now that we know the difference between a tap and swipe, next we need to figure out if the user is swiping up or down versus swiping left or right as we want to do different actions for each. To determine this first duplicate both the Absolute(Float) node and one of the float > float nodes and connect them to match the image below. This part of the Blueprint will then compare the Absolute value of X and Y to see if they are bigger and smaller than one another and then perform different actions on each. For example, if the Absolute value of X and Y are greater than one another then a swipe Left or Right has taken place. If the Absolute value of X and Y are less than one another, then a swipe Up or Down has taken place.
  3. Click for full image.
    Whenever you are comparing the length of two vectors, you always want to make sure you use the Absolute value of the vectors as it will remove any negative signs allowing you to compare only positive values.
  4. Next, drag off the True output of the existing Branch node and from the Executable Actions list search for and add a new Branch node to the Event Graph. Then, plug the Return value of the float > float node into the Boolean Condition input on the newly created Branch node. Now when the user swipes Left or Right, the True option will fire and when the user swipes Up or Down, the False option will fire. HTTouch_TapOrSwipeSetup_03.png
    Click for full image.
  5. Add two more Branch nodes to the Event Graph and connect their inputs to the True and False outputs of the Branch node that was added in the previous step. These two new Branch nodes will control what is displayed when the user swipes in a particular direction. The Branch node coming from the True input will control what happens when swiping Left and Right. The Branch node coming from the False input will control what happens when swiping Up or Down.
    Click for full image.
  6. Finally to tell the difference between swiping Left and Right connect the float < 0 to the Condition input on the first Branch node. Then to tell the difference between swiping Up and Down connect the float < 1 to the Condition input on the second Branch node.
    Click for full image.

With our Blueprint tap and swipe functionality now set up, in the next section we will take a look at displaying different text based on what type of input is applied to the Gear VR touchpad.

Performing Different Actions on Touch & Swipe

With the ability to not only the determined difference between a tap and a swipe but also the direction a swipe came from, in this part of the How - To we are going to set up our GearVR_Pawn Blueprint to display text that will show what type of input took place.

  1. Drag off the False output from the first Branch node that deals with Tapping or Swiping and from the Executable Actions list, search for and add a Set Text (TextRender) node.
    Click for full image.
  2. Next, drag the TouchUp Text variable into the Event Graph and select the Get option. Then connect it to the Value input on the Set Text node.
    Click for full image.
  3. Repeat the previous steps for the Up, Down, Left and Right directions and when completed your Blueprint should look like the following image:
    Copy Node Graph
    Click for full image.
    You can copy the finished version of this Blueprint into your Blueprint by clicking on the Copy Node Graph option and then copying the supplied text and pasting it into your Blueprint.

End Result

Once you have Compiled and Saved the GearVR_Pawn Blueprint, deploy the UE4 project on your Samsung Galaxy Smartphone and then put your phone into your Gear VR HMD. Now when you tap or swipe the touchpad with your finger, you should see texts that will display the action you performed like in the video below.

If the text fails to show up when you tap or swipe the Gear Vr touchpad, make sure that text has been input into the Default Value of the Text variable.

UE4 Project Downloads

Below you will find a link to where you can download the UE4 project that was used to create this example.