If you build a VR game or experience, there’s a good chance you’ll end up needing some menus. There are a lot of great ways to build VR menus, ranging from basic laser pointers to some amazing interaction based systems. Since laser pointers are one of the simplest and most common systems, this guide will focus on how to create them. We’ll discuss how to use the SteamVR Laser Pointer system ( SteamVR_Laserpointer.cs ). And we’ll make your standard Unity UGUI (4.6 UI) interface work with the laser pointers.
SteamVR Laser Pointer (steamvr_laserpointer.cs)
The SteamVR Laserpointer is included in the SteamVR asset pack. Once you’ve imported the asset pack, you can see the script located in the SteamVR/Extras folder.
CameraRig & Setup
For this example, we’ll use the included [CameraRig] prefab and make a few minor modifications.
Create a new scene.
Delete the “MainCamera” from the scene.
Add the [CameraRig] prefab to the scene.
The CameraRig prefab is located in the SteamVR/Prefabs folder.
Select both the Controller (left) and Controller (right) children of the [CameraRig]
Remove the SteamVR TrackedObject component.
Add the SteamVR_TrackedController component
Add the SteamVR_LaserPointer component
Select a color for your pointers. I’ve chosen RED for mine…
VRUIInput.cs
Because the laserpointer script doesn’t handle input itself, we’ll need to add a new script to tell our UI when we want to interact with it.
Create a new c# script.
Name it VRUIInput
Replace the contents with this.
Attach the VRUIInput component to both the Controller (left) and Controller (right).
UpdatePoses
Update: this is fixed and not needed as of SteamVR 1.2.2, this fix is no-longer needed. Upgrade to 1.2.2 and skip this section! 🙂
Before your controllers will track, you’ll need to add the SteamVR_Update poses script to the camera. This is a known bug in the latest SteamVR asset pack.
Select the Camera (eye) child of the [CameraRig]
Add the SteamVR_UpdatePoses component to it.
Half way there!
If you press play now, you’ll see laser pointers beaming out of your controllers. They won’t do much yet, but go ahead and check them out to make sure they’re visible.
The UI
It’s time to create a UI that we can interact with.
Canvas
Create a new Canvas.
Set the RenderMode to “World Space”
Set the transform values to match these.
Scale x = 0.01
Scale y = 0.01
Scale z = 0.01
Width = 500
Height = 500
Position x = 0.0
Position y = 0.0
Position z = 8.0
Panel & Button
Under the Canvas, create a Panel.
Under the Panel, create a Button.
VRUIItem.cs
For our button to interact with the laser pointer, we need it to have a collider.
That colliders size & shape need to match our button. We could do this manually, but to avoid having to resize the collider whenever the button changes, you can use this simple script.
Create a new c# Script.
Name it “VRUIItem”
Replace the contents with this.
Attach the VRUIItem component to the button.
You should see a BoxCollider added automatically and scaled to the proper size.
Select the Button Component.
Change the Highlight color to something more obvious.. like green..
Add an event handler that changes the Text component to say something different (so we can tell if the click worked).
Conclusions
Here, I’ve duplicated the button 12 times and resized it a bit to show a bit more action. Go ahead and try that yourself, or build a real menu for your game now. 🙂
The SteamVR Laser Pointer component, combined with a couple simple scripts, can get you up and running in minutes. From here, you can simply replace the OnClick events with any normal Unity UI click events you’d use in a non-vr game.
While I’m a big fan of unique and interesting menu systems for VR, laser pointers are definitely an easy to use and intuitive method for input. And for some games or apps, they’re definitely the preferred choice.
VRTK
It’s worth noting that another great way to setup UI interactions is via VRTK (VR Tool Kit). VRTK is something I’ve used in the past and love. It’s pretty easy to get started with and adds a ton of functionality beyond just laser pointers. You can read more about VRTK here.