2.4 - User Interface

To create some welcome screen text, the first thing you need to do is add a canvas with text and position it in the room.

1. Add a new Canvas to your scene:

• Add a new empty GameObject in your Hierarchy window, reset its position, and rename it “INTERFACE”.
• Create an XR > UI Canvas GameObject within that organizer GameObject.

2. Position the canvas appropriately in the room:

• In the Canvas GameObject’s Rect Transform component, set the Scale property to X = 0.1 , Y = 0.1, and Z = 0.1.
• Set the Pos Y and Pos Z properties so the canvas is at the back of the room.

3. Add a semi-transparent black background for the UI:

• In the Hierarchy window, create a UI > Image GameObject as a child GameObject of the Canvas GameObject and rename it “Welcome_Background”.
• In the Image component, select the Color property swatch.
• Change the color to black.
• Use the Alpha (A) slider to reduce the color’s transparency.

4. Fix windows rendering on top of your text:

The Order in Layer property of the Canvas component determines the rendering priority of UI elements in Unity, allowing you to control which canvases and their elements appear on top of or behind other canvases in the scene.

• In the Canvas component, set the Order in Layer property to 1.

5. Add text to the panel as a child GameObject:

• In the Hierarchy window, right-click Welcome_Background and create UI > Text - TextMeshPro as a child GameObject.
• Rename the new GameObject “Welcome Text”.

Note: If prompted, select Import TMP Essentials.

You should now have a semi-transparent box in the room with huge off-center text that says “New Text”.

Related resources:

• Canvas Render Modes

Now that you have the canvas in place, it’s time to make a more useful welcome message.

1. Edit the shape and placement of the background image:

• In the Image GameObject’s Rect Transform component, edit the Width, Height, Pos X, and Pos Y properties.

2. Edit the appearance of the text:

• In the Text GameObject’s TextMeshPro - Text (UI) component, change the Font Asset, Font Size, Vertex Color, and Alignment properties.

3. Change the contents of the text:

• In the TextMeshPro - Text (UI) component, change “New Text” to a short but informative welcome message about the scene.

Note: You can use “\n” to create a line break in the text.

4. Edit the size and spacing of the text box:

• In the Rect Transform component, edit the Width, Height, Pos X, and Pos Y properties to position in your text’s Rect Transform component.

Note: Make sure to leave some margins and space for an “OK” button.

Your welcome text should now look the way you want it in the scene.

You don’t want the welcome text displayed forever, so now you’ll add an “OK” button that hides it.

1. Add a button to the panel as a child GameObject:

• In the Hierarchy window, right-click the Welcome_Background and select UI > Button - TextMeshPro.

2. Edit the button’s text:

• Select the Button GameObject’s Text (TMP) child GameObject.
• Change the text to “OK” or “Got it!”.
• Edit the Text settings to match your other text.

3. Position the button appropriately:

• In the Rect Transform component, edit the button’s Position, Width, and Height properties.

4. If you want to change the color of the button as you interact with it:

• In the Button component, edit the Normal, Highlighted, Pressed, and Selected Color properties.

5. Prevent your ray from appearing active when it is over the background panel:

• In the Image component of the Welcome_Background GameObject, disable the Raycast Target property.
• In the Welcome Text GameObject’s TextMeshPro component, in the Extra Settings section, disable the Raycast Target property.

You should now have an “OK” button that changes color when it’s highlighted and clicked with the trigger.

Now that the button looks the way you want, you should make it remove the welcome panel when clicked.

1. Locate the On Click event for the button:

• On the Button GameObject, at the bottom of the Button component, locate the On Click event.

2. Disable the welcome panel:

• In the On Click event, select the Add (+) button to add a new action.
• Assign the Welcome_Background to the Object box.
• Open the No Function dropdown, select GameObject > Set Active (bool) function, and make sure the checkbox is disabled.

When you select the OK button with the Near-Far Interactor GameObject, the welcome panel should disappear.

Now that the welcome UI works perfectly, it’ll be easy to duplicate and repurpose the UI elements to make a Reset UI that reloads the scene.

1. Make new text for your reset screen:

• In the Hierarchy window, duplicate the Welcome_Background GameObject and rename the new GameObject “Reset_Background” and its Welcome Text child GameObject to “Reset Text”.
• Temporarily disable the Welcome_Background GameObject so you can more easily edit it.
• Edit the Reset Text property to be about resetting the scene to its original state.

2. Add a second button for your reset screen:

• Duplicate the button, then reposition it next to the original.
• Rename the buttons and edit their text to make one a “Cancel” button and the other an affirmative “Yes” button.

3. Make the Yes button actually reset the scene:

• Add a Load Scene component to the Yes button GameObject.
• In the On Click event, assign the Load Scene component and select the Load Scene > ReloadCurrentScene () function.

From the Reset canvas, you should now be able to select Cancel to hide the panel or Yes to reload the current scene.

There’s currently no way to return to the reset screen. To execute a reset, you can teleport the player back to the starting point when they press the secondary button.

1. Only show the welcome panel at start:

• Re-enable the Welcome_Background GameObject and disable the Reset_Background GameObject.

2. Test for a Secondary Button press:

• On the XR Origin (VR) GameObject, add an On Button Press component.
• Select the Add (+) button to add a new Action Binding.
• Assign the binding path to XR Controller > XR Controller (RightHand) > Optional Controls > secondaryButton.

Note: Different controllers have different buttons, triggers, and pads on them. If you’re not using an Oculus Quest, you will likely have to choose a different binding path that works with your device. For example, check out the OpenXR controller profiles for the HTC Vive or the Valve Index.

3. Show the reset panel on the button press:

• In the On Press property, select the Add (+)button to add a new action.
• Assign the Reset_Background GameObject.
• Open the No Function dropdown, select GameObject > Set Active (bool), and make sure the checkbox is enabled.

4. Hide the welcome panel on the button press:

• Select the Add (+) button to add a new action.
• Assign the Welcome_Background GameObject.
• Open the No Function dropdown, select GameObject > Set Active (bool), and make sure the checkbox is disabled.

When you press the secondary button, the welcome panel should disappear and the reset panel should appear.

If the user isn’t at the starting position when they press the secondary button, they need to be teleported back to the starting position to view the Reset panel.

1. Make sure you have a teleportation anchor at the start of your scene:

• If you don’t already have one, duplicate and reposition a teleportation anchor at the position you want your user to start in the room.

2. Make your player start at the correct location:

• Match the position and rotation of the XR Origin (VR) GameObject to the position and rotation of the starting anchor.

3. Add a new teleporting behavior to the XR Origin (VR):

• On the XR Origin (VR) GameObject, add a Teleport Player component.
• For the Teleport Anchor property, assign the teleportation anchor at the start of your scene.
• For the Provider property, assign your Teleportation Provider component.

4. Connect the teleportation action to the button click:

• In the XR Origin (VR) GameObject’s On Button Press component, for the On Press property, select the Add (+) button to add a new function.
• Assign the XR Origin (VR) GameObject.
• Open the No Function dropdown and select TeleportPlayer > Teleport ().

When you press the secondary button, the player should now teleport to the starting position of the scene in order to view the Reset UI.

The Poke Interactor is an Interactor used to interact with interactables through poking, instead of with a raycast and button press.

1. Add a Poke Interactor:

• Create a new GameObject as a child GameObject of the Right Hand Controller GameObejct and name it “Poke Interactor”.
• Add the XR Poke Interactor component to the Poke Interactor GameObject.
• Set the Layer of the Poke Interactor GameObject to UI.
• (Optional) Adjust the Poke Width and Poke Depth properties to your preference.
• You can now poke buttons to interact with them.
• Repeat these steps for the Left Hand Controller GameObject.

New Functionality:

• Welcome screen with OK button
• Reset screen to reload scene

New Concepts and Skills:

• VR UI best practices
• Worldspace vs Screenspace UI

Next Lesson:

• Comfort & Accessibility

If you want to further develop your skills, explore new concepts, and improve your project, check out some of the optional extension activities below.

Each one is tagged as [Easy], [Medium], [Difficult], or [Expert] and will also include a [Requires Programming] tag if some coding is required.

1. Add real-world text to the scene [Easy]

Add text onto a real-world oGameObject like a notebook to provide additional information to the user:

• Make a “TexMeshPro - Text” GameObject a child GameObject of whatever GameObject you want it to display on.
• Make sure the Canvas GameObject’s Canvas component’s Render Mode property is set to World Space.
• Bonus: Add audio narration that reads the text when you pick up the GameObject.

2. Add multi-step user interfaces [Medium]

Instead of having a single paragraph of instructions at the start of your VR room with an OK button, add a Next button that cycles through a few shorter strings of text:

• On your TextMeshPro - Text component, add the ShowMessagesFromList component, which can be found in the _Course Library > Scripts > Actions folder, then use the NextMessage() function to cycle through them. Note the On Complete () event on this component, which fires after there are no more messages to show.

3. Add contextual tooltips [Hard]

Add a small UI screen to guide the user in a particular task in your room:

• The UI screen should only appear when it is relevant.
• Bonus: If it’s a multi-stage task like grabbing a hat and putting it on your head, try displaying multiple messages on the UI, depending on what stage the user is on.
• Bonus: Ideally, the UI should only display the first time you complete that task.