Utilize 2D UI in VR!

Objective: Bring 2D UI into your VR world space!

Previously we discovered 3D UI elements. 2D UI elements can easily be incorporated to make your games more immersive. In this tutorial I create an interactive panel using 2D sliders and buttons.

By default when you create a canvas in Unity the render mode is set to screen space overlay. This render mode is typical for a HUD, where the UI is always on the screen and never moving. We want to place these UI elements into our actual world, so we need to set the render mode to ‘World Space.’

Now you can resize your canvas and place it in the area that you want it. I am going to be setting up a 2D version of the controls I’ve created previously using 3D UI elements.

You can add an image, stretch to the size of the canvas, give it a dark color and lower the alpha channel. This way you can read the text easier.

Next, we can add a slider. The slider had an ‘On Value Event’ which is the same as the 3D lever UI, so this will be easy to set up. First, the min/max range I am working with needs to be -1 to 1.

Now we need to add the event.

One last step is to add a component to the canvas. We need to add ‘Tracked Device Graphic Raycaster.’ This will allow the Raycast in your hand to interact with the canvas, now you will be able to grab and manipulate the slider and whatever event you have attached to the slider will begin!

You now know what it takes to utilize 2D UI elements in your VR space! Don’t be afraid to experiment with your UI, and I’ll see you in the nest tutorial!