Day 68 of 100 Days of VR: Creating a Menu In Unity

Here, we are in the final part of the Google Daydream series: creating a menu in VR. The menus that I’m thinking about are the general purpose kinds. Things like for Main Menu/Restart/Quit, Inventory management, etc.

Off of the top of my head, there are 2 ways we create a menu. We can have it appear:

1. In front of us to interact with
2. On the controller so we’ll have to look down on our remote to see our menu

Having the UI appear on our controller might just be the equivalent of having the UI appear in world space and then making it a child of our controller.

With that being the case, let’s create a simple menu and see how we can interact with it with the Daydream setup.

Creating a Menu in Unity

From our existing game, let’s create a new scene that we can use that will be just used for the menu.

1. Hit Ctrl + Shift + S or File > Save Scene As… to create a new scene. Let’s call it Menu
2. Now let’s do some clean up in our new scene. First things first, let’s get rid of Ball from the game hierarchy. Just delete it.
3. In GvrControllerPointer, remove the PlayerController script component. We’re going to create a new one that will allow us to interact with our menu.
4. Let’s also remove the TouchpadMovement We’re not going to be using that for this.

Now that this is done, let’s create a simple menu for us to use.

As you might recall from working with UI in the previous series of using the Google Cardboard, our UI will only show up when we use World Space when developing with the VR SDK.

Let’s just create a simple UI for now. Here’s what it’ll look like in the end.

Here’s what we’re going to have to do to create this menu.

1. Create a UI Panel that will hold our game object. We can create it, by right clicking the game hierarchy and select: UI > Panel. By doing this, Unity will automatically create a Canvas game object for us. For now, it might be easier for us to edit the UI by clicking the 2D button at the top of the Scene tab.
2. Right now, the panel has its Alpha set to be around the 50% mark, making it semi-transparent. Fix that by selecting the Color in the Image component for the panel and set the alpha value to be 255.
3. Next up, we adjust the size of Panel to be a more menu like size. Change the scale to: (1.5, 2, 1)
4. Next, we’re going to create the buttons. Select UI > Button from the hierarchy to create another button. I set the Width to be 100 and the Height to be Next, I set the position to be (0, 30, 0).
5. Every UI button comes with a Text, change the text value to be Button 1
6. Duplicate our button and repeat Step 4-5 with each button, except each button will be 15 less in the Y position

Now at this point, we should have our panel with the buttons, now let’s work on bringing the canvas onto the world space for us to interact with.

7. In Canvas, change the render mode to be World Space. This will move our UI into the game world as opposed to an overlay.
8. Now that we have our Canvas, our UI is too big, we’ll scale it down. Set the scale to be (0.01, 0.01, 0.01)
9. Now if we want to be able to interact with our UI, we need to add Google’s graphic raycaster script to our canvas. Add the Gvr Pointer Graphic Raycaster script too

Now that we’re here, we have almost everything that we need. We still have one problem.

Currently, the UI uses a Rect Transform that only moves in 2-dimensions. How do we deal with 3D?

The answer is simple, we child it to a 3D game object.

10. In the hierarchy, create an Empty Object, let’s call it Menu Container. Set Canvas as a child of it.
11. With Menu Controller working in 3D space, we can move and rotate it around like we can any normal Game Object. Let’s move it in front of our camera. Set the Position to be (0, 2, 3).

Finally, now with all of this done, we have a working menu that we can interact with. Here’s what the menu looks like in our hierarchy.

Conclusion

With this, we have the scene set up for us to play around with the menu. We don’t have to add anything more to the menu itself. The only thing we need to do is use event triggers for the button so we can interact it, but we’ll do more of that in later posts.

Now with all of this in place, we can finally start writing some code to interact with the menu! We’re going to do a simple button click first, but then we’re going to progress into more complex actions later.