Our most comprehensive learning experiences

Pathway

Collections of tutorials and quizzes organized to teach a specific topic

Course

Tutorial

Create a 2D game

Build a VR Experience

2D Lighting Pixel Art

Create with Shader Graph

Unity Studio

Editor Essentials

Scripting

For Educators

Objects & Components

Physics

Materials & Shaders

Audio

AI & Navigation

Animation

All content in this course uses:

This lesson shows you how to build world space UI in VR, including a welcome screen and a reset menu to reload the scene.

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.



 In Unity 6.3, when adding a UI element, the 

window, reset its position, and rename it “INTERFACE”.

GameObject within that organizer GameObject.

2.  Position the canvas appropriately in the room:

 properties so the canvas is at the back of the room.

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

GameObject and rename it “Welcome_Background”.  

 slider to reduce the color’s transparency. 

4.  Fix windows rendering on top of your text:

 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.

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

Rename the new GameObject “Welcome Text”.

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’s time to make a more useful welcome message.

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

 component, change “New Text” to a short but informative welcome message about the scene. 

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

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

 properties to position in your text’s 

: 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 now you’ll add an “OK” button that hides it.

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

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

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

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

You should now have an “OK” button that changes color when it’s 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:

 function, and make sure the checkbox is disabled.

GameObject, the welcome panel should disappear.

Make the OK button Remove the panel

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

 GameObject and rename the new GameObject 

GameObject so you can more easily edit it.

 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:

 canvas, you should now be able to select 

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:

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

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:

 GameObject to the position and rotation of the starting anchor.

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

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

4.  Connect the teleportation action to the button click:

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 to the starting position for reset UI

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

Create a new GameObject as a child GameObject of the 

GameObejct and name it “Poke Interactor”.

You can now poke buttons to interact with them.

Add a Poke Interactor

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

 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 

 button that cycles through a few shorter strings of text:

 function to cycle through them. Note the 

 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.

 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.

 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

Deleted User

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.

Games

Film

Automotive

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

Unity 버전 6.3