Unity VR : Wrist UI

One of the fun things about doing UI work in VR is the new ways we get to explore what UI can be. Some of the best implementations of UI involve immersing the player with a menu as part of the game as opposed to a “Pause” menu you would find in any normal game.

An example of this would be the Wrist UI/Menu found in multiple VR games now. It serves as an intuitive way to present UI information to a player, since in the real world, we already use wrist devices like a watch for information.

In this tutorial we’ll go over how to scale our UI down to fit on our wrist, how to mount the menu to our wrist, and how to bring up our wrist UI using the menu button on our controllers.

With that in mind, let’s jump in an make a Wrist UI.

To follow along, download the Github project found here.

1 : sCENE REVIEW

Here we have a great old pink table and the gun from way back in my grab interactables video. Why the gun? because it’s been a while and I want to shoot it again.

That’s it! Let’s build this UI and put it on our wrist!

2 : Creating and Scaling our UI

First lets start by adding a XR Canvas to our scene.

Write click and go to XR -> UI Canvas
- Rename canvas “WristUICanvas”
- Select the WristUICanvas
  - Transform (0, 1.2, .44)
  - Width = 15
  - Height = 30
  - Scale (.01, .01, 1)
  - Canvas Scaler -> Reference Pixels Per Unit = 20
- Right click on WristUICanvas and add UI -> Image as a child to it
  - Name this “Border”
  - In Rect Transform, click the square in the top left, then hold Shift + Alt and click the square in the bottom right.
  - Find the Border in the Sprites folder and make it the Source Image.
- Right click on WristUICanvas and add UI -> TMP Button as a child to it
  - Name this “Reset”
  - In Rect Transform, click the square in the top left, then hold Shift + Alt and click the square three rows down and three columns over.
  - Find the wristUIbutton in the Sprites folder and make it the Source Image.
  - Position (0, 1.25, 0)
  - Scale (.2, .1, 1)
  - Type the word “Reset” for the text
- Right click on WristUICanvas and add UI -> TMP as a child to it
  - Name this “GunShotCounter”
  - In Rect Transform, click the square in the top left, then hold Shift + Alt and click the center sqaure.
  - Position (0, 0 ,0)
  - Width = 10
  - Height = 10
  - Set Font Auto Size to True
  - Center Alignment for text

Well that was a lot, but when all is done, you should have something looking like this.

Granted mine might look a bit different because I decided to change the colors on some things, so feel free to do so the same!

Now let’s run through this. Starting off with the scale of the Canvas being set to .01. This essentially makes it so we’re working in centimeters. This will make it easier to conceptualize how big we want the menu. When we set the Height of the Canvas to 30cm, we’ve essentially set it to about a foot. (God I wish the U.S. just did the metric system so I could naturally picture this. Why are we still doing this still?!) Next we make the Pixel Per Unit 20. This will help sharpen the image. Try setting this to 100 to see what the difference is.

The rest of the things we’ve added are text to count how many times we’ve shot the gun and a reset button that will reset the count when we press it.

Let’s hook those up really quickly.

3 : connecting our Text and Button

Let’s first fix the counter. Just select the Gun Shot Counter and Add Component and look for the ShotCounter script that I’ve added to the project. There isn’t much to explain with this script. It has a private function to increase the count every time the gun is fired and a public function that should reset when we press the button.

Next do the following.

Select the Reset Button
Click the plus sign for OnClick()
Drag the GunShotCounter from the scene into the empty slot
Click the dropdown and go to GunShotCounter->ResetCounter

Now our counter will reset whenever we press the button and it will increase the count whenever we shoot the gun.

Next, let’s connect it to our wrist.

4 : Connecting Ui to our wrist

With things working correctly, let’s slap this thing on our wrist.

Expand XR Origin
Click and drag the WristUICanvas onto the LeftHandController.

This will of the Canvas now track with the Left Hand Controller. The problem now is that it won’t be exactly where we need it. In order to fix that, start up the Unity project and adjust the rotation and transform until it’s in a position that you like. Then copy the transform components, turn off playmode and paste the value into the transform again.

I found my setting to be good at

Pos X,Y,Z = (-.15, -.024, -.22)
Rotation(77, -154, -78)

I should have taken a picture here, but I’ve taken my headset off and it’s 1AM right now. I’m going to pick this up tomorrow at bringing up the UI using the menu button on the controllers.

5 : Using the Menu button on the controller

The last thing we need to do is activate the menu. We might not want it active 24/7, so lets learn how to turn this on and off.

In the Project search bar type “XRI Default Input Actions” and double click it
- Select XRI LeftHand
  - Click the plus sign for Actions
  - Name the new Action “Menu”
  - Select <No Binding>
    - Click dropdown for Path found in the top right.
    - Find the binding for menuButton [LeftHand XR Controller] and select it.
  - Save the Input Actions and exit out of the Input Mappings.

This will allow use to use the menu button on the Left Hand Controller to bring up the menu and also hide it. You could choose any button that you want, but I figured this works for this example.

Now let’s attach this new input to toggling the menu.

Select the WristUICanvas in the Scene
- Click Add Component and add the Script called “Wrist UI”
- Click Add Component and add Player Input
  - Set Default Map to XRI LeftHand
  - Expand Events
  - Expand XRI LeftHand
    - Click plus sign for Menu event
    - Drag WristUICanvas into the empty slot
    - Click dropdown menu and go to WristUI->ToggleMenu

The Wrist UI script is super simple. It will grab the Canvas component when the scene starts up and turn it off. We can then toggle the menu by pushing the menu button, which we’ve attached using the Player Input component.

5 : Conclusion

That’s it! A nice introduction to Wrist UI for your XR/VR games and simulations.

Of course you can always expand on this to incorporate all sorts of things. Maybe try popping up the menu when the wrist turns a certain amount like in Walk About Golf. You could also tie it into weapon selection like with Half-Life Alyx.

It’s an incredibly versatile tool and I hope you find it helpful in future projects! Cheers!