Unity VR : Buttons

/ Tutorial, Unity, VR / By

Unity VR : Buttons

If you’ve played any VR games recently, you’ll notice that many of them have buttons. There are numerous ways to implement one in Unity, so don’t take mine as the holy grail of button implementation.

In this tutorial we’ll learn how to make VR button. We’ll cover how to make a button from basic components, how to make that button springy with configurable joints, how to use triggers to detect buttons being pressed and how to connect our buttons to different events like opening a door.

To follow along, download the Github project found here.

1 : Scene Review

In this scene we have our normal table. I have also added the door frame from the previous tutorial, but instead of having a door with a handle attached, we’re going to turn this into a door that slides open when we press the button. That’s pretty much it for the Scene!

With that out of the way, let’s figure out how to create a button.

2 : Building a Button

Start by doing the following.

  • Right click in the Scene and add a new empty GameObject. Call it Button.
  • Right click and go to 3D Object -> Cube
  • Make it a Child of the Button object and name it Frame
  • Give it’s Transform the following values
    • Position (0, 0, 0)
    • Scale (.2, .1, .2)
  • Remove the Box Collider component
  • Add a RigidBody
    • Use Gravity = False
    • Is Kinematic = True
  • *Optional* – Add a mesh to the frame to change its color
This will act as our frame for the button. We remove the collider to prevent it from messing with the PushButton, which we will create next.
  • Right click and go to 3D Object -> Cube 
  • Make it a Child of the Button object and name it PushButton
  • Give it’s Transform the following values
    • Position (0, .055, 0)
    • Scale (.14, .05, .14)
  • *Optional* – Add a mesh to the frame to change its color
This is the PushButton. It will be what our players push down in order to make contact with the Trigger, which we’ll create now.
  • Right click and go to 3D Object -> Cube 
  • Make it a Child of the Button object and name it Trigger
  • Give it’s Transform the following values
    • Position (0, -.01, 0)
    • Scale (.1, .05, .1)
  • *Optional* – Add a mesh to the frame to change its color
When the PushButton makes contact with this object, it will serve as the means to signal that the button has been pushed.
Next, move the Button around in the Scene until it is sitting on top of the pink table. I found a good spot at (0, 1.05, .64).
With the Button in position and assembled, lets get it working.

3 : The Push Button

Let’s start by making the PushButton work.

  • Select the PushButton
    • Set its Tag to Button
    • Add a RigidBody
      • Uncheck Use Gravity
      • Lock Rotation for X, Y and Z
      • Collision Detection = Continuous Dynamic
    • Add Configurable Joint
      • Drag the Frame into the slot for Connected Body
      • X Motion = Locked
      • Y Motion = Limited
      • Z Motion = Locked
      • Angualar X, Y and Z Motion = Locked.
      • Linear Limit -> Limit = .01
      • Expand Y Drive
        • Position Spring = 75
        • Position Damper = 10

First we turn off gravity and limit motion and rotation with the rigidbody. We only wish for the button to move on the Y-axis so we leave that free.

On the Configurable Joint, we again lock down all motion and rotation, but leave the Y axis as limited. We set the Linear Limit to a low amount, which will allow small movement around the Y axis, but not so much movement that it will dip above or below the frame. Finally, we set the spring to a high amount and the damper to a decent amount. This will allow the button to spring back quickly, but the damper will help reduce that momentum in a shorter amount of time so it won’t oscillate as much.

The hard part is done! Let’s mess with the Trigger.

4 : The Trigger

This will be responsible for signaling that the button has been pressed. Let’s start by adding some components.

  • Select the Trigger
    • Box Collider
      • Set “Is Trigger” to True
    • Click Add Component and add a Script called VR Button

We set Is Trigger in Box Collider so we can use the functions OnTriggerEnter and OnTriggerExit in the VR Button Script. We also tag it with Button so we know what we are colliding with when these functions are triggered.

The VR Button Script is nice and simple. If you wish to go over it in detail, I have left comments within the Script explaining everything going on.

The main takeaways are that we have a Dead Time variable, which is used to make the button inactive for x amount of time after the button is released and two Events we can use when the button is pressed and released.

5 : Clicking the Button

With that, our Button works! If you press play and use the editor to move the push button, it should show a message in the debugger.

The problem is, our hands cannot click the button. The reason is, they don’t have any colliders on them. Well… They do, but we need them set as triggers to use as direct interactors.

Luckily, the easy fix is already done. I’ve created a new prefab with our hands and animations, but also with colliders! In order to use them do the following.

  • In the project go to Prefabs -> 10 Buttons where you’ll see Left Hand With Colliders and Right Hand With Colliders.
  • Click on  LeftHand Controller in the Scene
    • Locate the HandComplete Script and replace the Hand Prefab with the Left Hand With Colliders
  • Repeat the same for the Right Hand

It’s not perfect collisions, but it works!

Now you can start up the Scene and press the button.

6 : Making the Button Do Something

We’ve finally made it. It’s time to make that door open. I’ve provided a script for the sliding door that you can feel free to go over if you want, but I don’t think door movement is relevant to the main focus of this tutorial which is VR Buttons.

To call the function attached to the sliding door, do the following.

  • Expand the GameObject in the Scene called ButtonDoor.
  • Select the Trigger found on the Button
    • Locate the VR Button script
      • Click the plus sign for OnPress()
      • Drag the SlidingDoor object into the empty slot.
      • Find the Function SlidingDoor ->ToggleDoorOpen

What we’ve done is connect the ToggleDoorOpen to the OnPressed event found in our VRButton Script. Whenever we push the button now, the door will open and close!

7 : (Optional) Adding Sound

We can also add a clicking sound to the button when it’s pressed.

  • Select Trigger
    • Add Component Audio Source
      • Go to Project -> Audio and drag the buttonclick sound to the empty AudioClip source
      • Play On Awake = false
      • Move Spatial Blend to 3D (1)
    • VR Button Script click plus sign for OnPressed
    • Drag Audio Source into the new empty slot
    • Go to AudioSource -> Play

    Now when we click it, it will open the door and make a button clicking sound!

    8 : Conclusion

    Now you have the tools to make whatever button you like. For more practice, try making one out of cylinders with the same methods.

    Cheers and I’ll see you in the next one!