Use the Gear VR HMD Touchpad

Setting up the Gear VR HMD Touchpad

Choose your operating system:

Windows

macOS

Linux

Prerequisite Topics

In order to understand and use the content on this page, make sure you are familiar with the following topics:

HTTouchPad.png

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.

    HTTouchPad_Pawn_Setup.png

    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:

    HTTouchPad_Var_Setup.png

    • 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.

    HTTouchPad_Var_TouchSwipe.png

    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 section we will take a look what we need to do to detect if a tap or swipe took place.

Touch & Swipe Input Setup

In the following section, we will go over how to setup 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:

    HTTouch_TouchStartEndNodes.png

    Click for full image.

    Node Name

    Default Value

    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 Start 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 Touch Start variable and then connect the Input Touch Released to the Touch End variable. When completed this part of the Blueprint should look like the following image.

    HTTouch_TouchStartEndSetup.png

    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.

    HTTouch_TapSwipeNodes.png

    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

    Click for full image.

  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.

    HTTouch_TapOrSwipeLogic_02.png

    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.

    HTTouch_TapOrSwipeLogic_03.png

    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.

    HTTouch_TapOrSwipeLogic_04.png

    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 started from.

Determining Between Taps & Swipes

In the following section, we will setup 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 Unreal Units (UU) a tap took place. If that distance is over 20 UU, then a swipe took place.

    HTTouch_TapOrSwipeSetup_01.png

    Click for full image.

  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.

    HTTouch_TapOrSwipeSetup_02.png

    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.

  3. Next, drag off the True output of the existing Branch node and from the Executable Actions list search for and add a Branch Node. Then pull the Return value of the float > float node into the Condition 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.

  4. 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.

    HTTouch_TapOrSwipeSetup_04.png

    Click for full image.

  5. Finally to tell the difference between swiping left and right connect the float < 0 to the Condition input on the first Branch node that was added in the previous. Then to tell the difference between swiping up and down connect the float < 1 to the Condition input on the second Branch node.

    HTTouch_TapOrSwipeSetup_05.png

    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 differing 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.

    HTTouch_TapOrSwipeDisplayText_01.png

    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.

    HTTouch_TapOrSwipeDisplayText_04.png

    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

    HTTouch_TapOrSwipeDisplayText_02.png

    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.

HTTouch_TapOrSwipeDisplayText_03.png

UE4 Project Downloads

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

Help shape the future of Unreal Engine documentation! Tell us how we're doing so we can serve you better.
Take our survey
Dismiss