--- title: "2.4 - User Interface" content_type: tutorial url: "https://learn.unity.com/tutorial/2-4-user-interface-2?language=en" language: en difficulty: beginner duration_minutes: 90 unity_version: - "6.3" supported_unity_versions: - name: "6.3" url: "https://learn.unity.com/tutorial/2-4-user-interface-2.md?language=en&version=6.3" - name: "6.2" url: "https://learn.unity.com/tutorial/2-4-user-interface-2.md?language=en&version=6.2" - name: "6.1" url: "https://learn.unity.com/tutorial/2-4-user-interface-2.md?language=en&version=6.1" - name: "6.0" url: "https://learn.unity.com/tutorial/2-4-user-interface-2.md?language=en&version=6.0" - name: "2022.3" url: "https://learn.unity.com/tutorial/2-4-user-interface-2.md?language=en&version=2022.3" - name: "2021.3" url: "https://learn.unity.com/tutorial/2-4-user-interface-2.md?language=en&version=2021.3" last_updated: "2026-08-04T14:24:31.000Z" --- # 2.4 - User Interface This lesson shows you how to build world space UI in VR, including a welcome screen and a reset menu to reload the scene. 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. This lesson is part of the [Create with VR course](https://learn.unity.com/course/create-with-vr). Overview: [Video](https://connect-mediagw.unity.com/h1/20250923/videos/01806bd9-0e88-48a0-8dbd-1b28e61cbcef_2_4_0_intro_v2.mp4) ([Transcript (en)](https://connect-mediagw.unity.com/h1/20250924/da087f2c-ad05-4c2a-b61b-6762129ccb40_2_4_0_intro_v2.vtt)) ## 1. Add a world space UI into the room 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. **Note:** In Unity 6.3, when adding a UI element, the **UI** menu is now labeled **UI (Canvas)**. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/e7486414-8314-4b82-89e6-812bef02368c_2.4.1.mp4) **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](https://docs.unity3d.com/Packages/com.unity.ugui@3.0/manual/UICanvas.html) ## 2. Edit the welcome text Now that you have the canvas in place, it’s time to make a more useful welcome message. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/d84fd832-691f-4761-88d8-996ad873795c_2.4.2.mp4) **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. ![](https://connect-mediagw.unity.com/h1/20250923/learn/images/c793985d-7e1d-42d0-b941-f349350d82c5_WelcomeText.png) Your welcome text should now look the way you want it in the scene. ## 3. Add an OK button to the panel You don’t want the welcome text displayed forever, so now you’ll add an “OK” button that hides it. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/97886264-861e-4d1e-b596-255b54c90da6_2.4.3.mp4) **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. ## 4. Make the OK button Remove the panel Now that the button looks the way you want, you should make it remove the welcome panel when clicked. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/93d4b000-23f0-4485-91cb-2a833da519e2_2.4.4.mp4) **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. ## 5. Make a reset UI canvas 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. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/b1758869-477f-4ab3-b6e7-1c6902202b93_2.4.5.mp4) **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. ## 6. Show reset panel on secondary button press 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. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/cf1dfb4e-68be-4129-84e4-19f5fc43a259_2.4.6.mp4) **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](https://docs.unity3d.com/Packages/com.unity.xr.openxr@1.15/manual/features/htcvivecontrollerprofile.html) or the [Valve Index](https://docs.unity3d.com/Packages/com.unity.xr.openxr@1.15/manual/features/valveindexcontrollerprofile.html). **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. ## 7. Teleport to the starting position for reset UI 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. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/f37d30a6-4dee-41b4-8f7f-a0ad859df331_2.4.7.mp4) **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. ## 8. Add a Poke Interactor The **Poke** **Interactor** is an Interactor used to interact with interactables through poking, instead of with a raycast and button press. [Video](https://connect-mediagw.unity.com/h1/20250916/videos/c4ecacc9-4965-4288-95e4-49df474ee667_2.4.8.mp4) **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. ## 9. Recap [Video](https://connect-mediagw.unity.com/h1/20220608/videos/52ccec0b-d053-4997-b1ef-296177732ae4_2_4_recap_v2.mp4) ([Transcript (en)](https://connect-mediagw.unity.com/h1/20220608/90679f06-95da-41e6-9b01-82c900fc2177_2_4_recap_v2.vtt)) **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 ## 10. Extension Activities _(Optional)_ 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. [Video](https://connect-mediagw.unity.com/h1/20210212/videos/a630f627-b8b8-4769-bbd1-5f81066ce105_2.4.ext___Real_world_text.mp4) **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. [Video](https://connect-mediagw.unity.com/h1/20210212/videos/1d56754d-83c9-433d-abf0-be3f91e2445c_2.4.ext___Multi_step_UI.mp4) **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. [Video](https://connect-mediagw.unity.com/h1/20210212/videos/dba911c2-7746-4da3-a413-0d23a924b2f0_2.4.ext___Contextual_tooltips.mp4)