VR User Interface

Tutorial

·

Beginner

·

+10XP

·

45 mins

·

(179)

Unity Technologies

VR User Interface

You will learn how to:

  • Create Crisp Text using Text Mesh Pro
  • Import custom fonts from Google Fonts to use with Text Mesh Pro
  • Precision Grab Interactable Objects that avoids "jumping" to your hand

Languages available:

1. New Canvas in World Space


  1. GameOBject > UI > Canvas

  1. In Inspector, see "Render Mode" to World Space

  1. Set Width to 3, Height to 4. Set the X position to -4.23, and Y position to 2.06

  1. Rotate the Canvas -90 on the Y axis

  1. Add text (right click > UI > TextMeshPro) If you don't have TMP, go to Window > Package Manager and install it.

  1. In the Inspector, set text Width to 3 and Height to 4.

  1. Set font size to 0.7, and Center the text

Our new Text Mesh Pro text in a new canvas

Our new Text Mesh Pro text in a new canvas


2. Custom Google Fonts


  1. Visit fonts.google.com, pick a font, click the "+" button.

  1. Click the resulting box "1 Family Selected" and click the download button

  1. Extract the font, and drag the TTF (TrueType Font) into Unity to import it.

  1. To make the font usable by TextMeshPro (TMP), go to Window > TextMeshPro > Font Asset Creator

  1. In the Font Asset Creator window, drag the font you imported into the "Source Font File" field.

  1. Click "Generate Font Atlas" button.

  1. Click "Save As". I saved it into the Assets > TextMeshPro > Resources > Fonts & Materials folder. Close the Font Asset Creator window.

  1. With the TextMeshPro Text selected from the Hierarchy, Drag the newly created TMP Font Asset (F icon) into the Inspector window's "Font Asset" field.

3. Formatting Text


  1. Adjust the font size so "Jump Start!" is on one line (I used .41)

  1. Add an "Underlay" (a drop shadow) in the Inspector window. I used settings: Offset X: .46, Offset Y: -.82, Softness: .137

  1. In the Hierarchy, duplicate the TMP text (Control + D), naming the title "JumpStartText", and the new copy, "Directions"

  1. In the Inspector's Text field, add the directions (the order clamps should be connected). I used the text:

  1. Red Good

  1. Red Dead

  1. Black Good

  1. Black Dead

  1. Left align the text (click the left alignment button)

  1. Select the Canvas in the Hierarchy and move it down the Y position. I used .42 so it's not so high in the air.

4. Billboard Background for Text


  1. Drop in an Interactable prefab cube (the same one we used earlier, so I can later shrink this down into a small "clipboard" sized instructions) from Assets > VRTK > Prefabs > Interactions > Interactables

  1. Set the cube scale to X:1, Y:2.59, Z:3.2 and the position to X:-4.85, Y:1.31, and Z:-0.8

  1. In the Hierarchy, rename the Interactable prefab to "Billboard".

  1. Drop the Canvas onto the Billboard, making it a child object (allowing you to move the billboard and canvas & text together)

5. Clipboard-sized Instructions


  1. In the Hierarchy, duplicate (control + D) the Billboard, naming it "Clipboard".

  1. Set the scale of the Clipboard to X: 0.1, Y:0.2, Z:0.2

  1. Move the Clipboard using vertex snapping (Control + Drag) to the clamp table.

  1. Optional: Hide the "Test SZ" and Cylinder, it's just in the way, by selecting them in the Hierarchy and unchecking the box at the top of the Inspector Window.

Result after these steps

Result after these steps



6. Adjustments and Precision Grabbing Objects


  1. In the Hierarchy, select the Canvas inside the Clipboard. Adjust it's X position so it's closer to the cube. I used X: 0.51

  1. In play mode, currently, when I pick up the Clipboard, it "snaps" to an unexpected orientation on my hand. Let's change to to be more precise.

  1. In the Hierarchy, expand the Clipboard > Interaction Logic > Interactable.GrabLogic > Actions > PrimaryAction > select the Interactable.GrabAction.FollowAction

  1. In the Inspector, set the Grab Offset dropdown menu to "Precision Point".

Test out the difference between grabbing a clamp (it jumps to your hand's orientation) and the Clipboard (doesn't jump).


Complete this tutorial