User Interface

Our game experience will not be complete without UI elements. We’ll be creating multiple functionalities in our game with UI and learning the workflow in Unity along the way. As part of our UI module, we’ll be incorporating the following components into the game:

• Onboarding screens for user onboarding

• A settings menu to reload our game by default and configure some settings such as sound and light intensity

Creating the Canvas

In order to start with the UI, we need to understand the Canvas GameObject. As explained earlier, Canvas is where our UI components are placed and configured. We will spawn the player in a different scene and work on our UI elements in this scene. Follow the steps below to set up the Canvas in VR:

• Go to the scene in the “Hierarchy” window. Right-click and navigate to “UI > Canvas.” When you add the Canvas, an Event System is added automatically.

• Use the World Space Render Mode because this mode allows you to view the Canvas in your VR headset.

• The Canvas is huge. So, you’ll resize it. Scale it down to the size that fits in the “Rect Transform” window. Scale it to 0.01 along all axes. You can also configure the height and width according to your needs. Adjust the Canvas to a place where you’d like to view the onboarding screens.

• After you’ve set the Render Mode, it’ll ask you for an Event Camera. Add the Main Camera from the XR Origin here.

• Add the “Tracked Device Graphic Raycaster” component. This component is part of the XR Interaction Toolkit and performs a ray cast against objects within this ray caster’s domain. We don’t need to modify anything in this component. It’s just needed for UI interactions in VR.

• Lastly, delete “Standalone Input Module” from “EventSystem” and add a new component “XR UI Input Module.” This module is also part of the XR Interaction Toolkit, and it acts as a base class for input modules that send UI input.

The following slides show the steps above in the Editor: