All content in this course uses:

2.4 - User Interface

In this lesson, you will learn how to implement world space user interfaces in VR. By the end of this lesson, the user will be greeted by a welcome screen that provides basic instructions. They will also be able to bring up a simple reset menu that allows them to reload the scene. 

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.

Add a new empty object in your Hierarchy, reset its position, and rename it “INTERFACE”.


2.  Position the canvas appropriately in the room:

In the Canvas’ Rect Transform component, set the XYZ 

 properties so the canvas is at the back of the room


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

 and rename it “Welcome Background”.  

Use the Alpha (A) slider to reduce the color’s transparency. 


4.  If your windows are rendering on top of your text:


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

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

Add a world space UI into the room

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

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

In the image object’s Rect Transform component, edit the 

On the text object, in the TextMeshPro - Text (UI) component, change the 

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


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

In the Rect Transform component., set the 

 to position in your text’s Rect Transform component. 

: 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.

Edit the welcome text

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

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

Change the text to “OK” or “Got it!”. 

Edit the Text settings to match your other text.

In the Rect Transform component, edit the button’s position, width, and height.


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

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


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

In the Background Image component, disable the 

object’s TextMeshPro component, in the Extra Settings section, disable the 

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

Add an OK button to the panel

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.

object, at the bottom of the Button component, locate the 

Assign the Welcome Background to the Object slot.

From the “No Function” drop-down, select 

 function and make sure the check box is deselected so that it is deactivated.

When you select the OK button with the trigger, the  welcome panel should disappear.

Make the OK button remove the welcome panel

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

 object and rename the new object “Reset_Background”.

Edit the text 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 object.

 event, assign the Load Scene component and choose the 

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

Make a reset UI canvas

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:

object, add an On Button Press component.

: 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 


3.  Show the reset panel on the button press:


4.  Hide the welcome panel on the button press:

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

Show reset panel on secondary button press

If the player is not 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 player to start in the room.


2.  Make your player start at the correct location:

 object to the position and rotation of the starting anchor.


3.  Add a new teleporting behavior to the XR Rig:

 object, add a Teleport Player component.

 property, assign the teleportation anchor at the start of your scene. 

 property, assign your Teleportation Provider.


4.  Connect the teleportation action to the button click:

object’s On Button Press component, for the 

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.

Teleport back to the starting position on button press

Recap

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 object like a notebook to provide additional information to the user:

Make a “TexMeshPro - Text” object a child object of whatever object you want it to display on.

Make sure the Canvas is set to world space Render Mode

Bonus - add audio narration that reads the text when you pick up the object.

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 was provided in the Course Library, 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.

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 is 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.

Extension Activities

Comp-L2-Prog.VRp: Beginner VR Development

Beginner VR Development

Aaron Sharp

2.4.ext - Real-world text.mp4

2.4.ext - Multi-step UI.mp4

2.4.ext - Contextual tooltips.mp4

2_4_4_v2.mp4

2_4_recap_v2.mp4

2_4_6_v2.mp4

2_4_5_v2.mp4

2_4_2_v2.mp4

2_4_3_v2.mp4

2_4_7_v2.mp4

2_4_1_v2.mp4

By the end of this lesson, you will be able to:

Recall best practices for UI in VR in order to design an experience that is comfortable and intuitive for the user.

Add a simple world space UI into the scene with text and a button in order to allow the user to read and interact with a user interface.

VR Developer Pathway Facilitator Kit.zip

VR Developer Pathway Facilitator Kit (Google Drive)

Unity Educator Hub

The VR Developer Pathway Facilitator Kit includes everything you need to successfully bring this Pathway into your learning context including a syllabus, complete lesson plans, standards alignment, teacher preparation guide, and more.  

Games

Film

Automotive

Skill-L2-Prog.VRp-2: Develop a VR app that demonstrates common interactions using Unity's XR interaction toolkit.

Unity Version 2022.3