Language:
Page Info
Tags:
Skill Level:
Engine Version:

Use the Google Daydream Touchpad Buttons

Choose your OS:
Prerequisite Topics

This page assumes you have prior knowledge of the following topics. Please read them before proceeding.

HTGVRTouchpad_Hero_Image.png

The Google Daydream Motion Controller (MC) has a number of different buttons on the Touchpad that can be setup to handle a wide variety of different input tasks in Unreal Engine. In the following How-To, we will take a look at how to set up and use the Touchpad.

In this How-To, we will be starting with a Pawn that already has a VR Camera and Motion Controller support added to it. If you do not have this setup, please check out the documents listed in the Prerequisite Topics list at the top of this page.

Steps

Below you will find information on how to use the Google Daydream Motion Controller touch pad.

  1. First, open up your Player Pawn Blueprint, go to the Component tab, add a new Text Render Component named FaceButtonPressed, and make sure that this Component is parented to the Motion Controller Component as shown in the image below.

    HTGVRTouchpad_00.png

  2. Click on the Text Render Component and then, in the Details panel, set the following properties with the corresponding values from this table:

    Click for full image.

    Property Name

    Value

    Location

    X = 20, Y = 0, Z = 0

    Rotation

    X = 0, Y = 0, Z = -180

    Horizontal Alignment

    Center

    Vertical Alignment

    Text Center

    World Size

    13.0

  3. Next, we need to create a new Text variable that will store and display what button is currently being pressed on the Motion Controller Touchpad. To accomplish this, go to the Variables list and create a new Text variable called ButtonText.

    HTGVRTouchpad_02.png

  4. The Google Daydream Motion Controller Touchpad has five buttons that can be used. Four of the five buttons are activated by pressing Up, Right, Down and Left on the Touchpad. The fifth button is triggered when a user touches the surface of the Touchpad. To set this up in our Blueprint, add the following five Motion Controller (R) FaceButton Event nodes to the Event Graph.

    Click for full image.

    Node Name

    Default Value

    Motion Controller (R) FaceButton1

    N/A

    Motion Controller (R) FaceButton2

    N/A

    Motion Controller (R) FaceButton3

    N/A

    Motion Controller (R) FaceButton4

    N/A

    Steam Touch 0

    N/A

  5. Now we are going to set up the logic for displaying which button on the Touchpad was pressed. To accomplish this, drag the ButtonText variable into the Event Graph and choose the Set option, since we want to set the text that is displayed.

    Click for full image.

  6. Connect the Pressed output on the Motion Controller (R) FaceButton1 Event node to the input on the Set Button Text node and then, in the Button Text field, input the following text:

    • Face Button 1 Touch Pad UP

    Click for full image.

  7. If we pressed the Motion Controller Face Button 1 now, nothing would happen, as we have the only set up the ability to input the text we want to display. To display the text, you will first need to right-click in the Event Graph and then search for the Set Text node, as this will set the text to display the value of the Set Button Text variable. When searching for the Set Text node, make sure to select the SetText(FaceButtonPressed) option so that it will automatically add a reference to the "Face Button Pressed" Text Render Component.

    Click for full image.

  8. Next, we need to connect the Set Button Text node to the Set Text node so that the text input in the Set Button Text node will be displayed when the Touchpad button is pressed. To accomplish this, connect both outputs on the Set Button Text node to the available inputs on the Set Text node and when completed your Blueprint should look like the following:

    Click for full image.

  9. Repeat this process for the remaining button directions. When doing this, make sure to change the text input into the Set Face Button Text to reflect the button that is being pressed. When this step is completed, your Blueprint should look like the following image:

    Copy Node Graph

    Click for full image.

  10. Finally, we need to attach the text that tells us which Motion Controller is pressed to the Motion Controller so that when the Motion Controller is moved, the text will move along with it. To get this working, add the following nodes to the Event Graph:

    Node Name

    Default Value

    GoogleVRMotionController

    N/A

    FaceButtonPressed

    N/A

    Get Motion Controller

    N/A

    AttachToComponent

    N/A

    Once the nodes have been added, connect the AttachToComponent node to the output of the SetRelativeLocation node. Then connect the FaceButtonPressed to the Target input on the AttachToComponent node. Finally, plug in the GoogleVRMotionController to the GetMotionController node and connect the output of that into the Parent input on the AttachToComponent node. When completed, this part of your Blueprint should look like the following image:

    Copy Node Graph

    Click for full image.

End Result

Compile and save your Blueprint and then use the Launch On button to deploy and launch the project to your smartphone. When the project is deployed to your phone, put your phone in the GoogleVR HMD and pick up the Daydream Motion Controller. Now when you press in any of the cardinal directions on the Touchpad, the button you pressed should be displayed, like in the following video:

Unreal Engine Project Downloads

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

Tags