Challenge — Interactive UI Menus

The previous tutorial was an introduction to interactable User Interfaces (UIs) using different interaction components. Now we will practice what we learned in this challenge. By the end of the challenge, you will be able to use these scripts in your own projects and build out a fully-functional UI panel.

UI from the completed Scene

UI from the completed Scene

In this challenge, you will build out a fully-functional, Vive-interactable UI panel to control the environment type, Scene lighting, object rotation, and object Material. To do so, you will:

1. Build and design the interactive UI panel.
2. Convert the UI panels so they receive Vive input.
3. Add and configure the Environment Swap script to change the surrounding environment.
4. Add and configure the Lighting script to control the lighting in the room.
5. Add and configure the Material Swap script to control the Materials on the car model.
6. Add and configure the View script to modify the car model’s rotation.

This challenge has two parts: designing the Home Page (Part 1) and integrating the “Tool” scripts (Part 2).

In Part I, you will build your own UI panel and add functionality to switch to the other panels.

In Part II, you will link up various scripts to the UI so the buttons access important functionalities (environment swap, lighting manipulation, Material change, car rotation).

Part 1 of this two-part UI challenge will lead you through setting up multiple UI screens. We will finish with the ability to click through the different UI panels with button clicks, and then return to the Home panel.

Replace the default camera with the CameraRig Prefab so we can use our controllers.

Adding the CameraRig Prefab

1. Add a VR CameraRig Prefab to the Hierarchy.
2. Delete the Main Camera.

Add the Vive UI Laser Pointer component to your dominant hand’s controller so you can interact with the buttons.

Adding the laser pointer

1. In the Hierarchy, click on the right or left controller.
2. In the Inspector, add the Vive UI Laser Pointer​​​ component.
3. Feel free to choose any color you would like.

Add four Image GameObjects as children of your Home UI panel. These will hold the navigational icons, and eventually be our buttons so we can click to other screens.

Setting up the UI

1. In the hierarchy, click on UI > Home Screen.
2. Add an Image and adjust its Rect Transform width and height so we can add four images in a grid. We chose a width and height of .2.
3. Add a Text GameObject as a child of the Image.
4. Resize, reposition, and recolor (to white) the text so it sits on top of the image. Remember: scale up, center, and change the overflow of the text. See the UI Basic tutorial if you need a review.
5. Duplicate the image three times (Command + D or Control + D) and adjust the images evenly on the page. We are adjusting their positions to get an approximate idea of where they should lay before using the Grid Layout component to automatically space and align the images.
6. Change the text copy to View, Materials, and Environment, and rename the images to their respective text copy.

The UI after this step

Add a Canvas GameObject as the Home Screen’s child so we can house our button GameObjects separately from the rest of the Home Screen features (header and home).

Adding another Canvas for the buttons

1. In the Hierarchy, select the Home Screen canvas.
2. Create a new Canvas by right-clicking on the Home Screen GameObject
3. Ensure that it sits over the Home Screen Canvas, adopting its parameters (size, rotation, and position).

Align the images perfectly by adding a Grid Layout component to the Buttons Canvas and dragging the four images under the Canvas as children. We will adjust their new sizes in the subsequent steps.

Adding the images to the new Canvas

1. In the Inspector, set the Constraint Parameter to Fixed Column Count, with a Constraint Count value of 2.
2. Adjust their Cell Size to appropriate sizes. We chose .2 for both X and Y.
3. Adjust the spacing so there is an appropriate gap between all of the images. We chose .1 and .11 for X and Y, respectively.
4. Change the Child Alignment to Middle Center, so the GameObjects (images) align with the center of the panel

The UI after this step

Convert the images to buttons by adding a Button component.

Turning the images into buttons

In the Hierarchy, select all four images and add the Button Component in the Inspector.

Increase the buttons’ transparency by reducing the color’s Alpha, add icons to each button, and adjust them accordingly so we can clearly recognize their functionality.

Setting up the button images

1. Decrease the button images’ Alphas so they are completely transparent.

2. In the Hierarchy, add new images under each Image GameObject and adjust their width and height to match their parents’ width and height (.2).

3. These images will house our icons, and were created as separate images (as children of the buttons) so we can independently scale and position them once we add our icons.

The buttons in the hierarchy

4. In the Project window, find the Home Button and add it to the images, respectively (Assets > UI Images > Home Page).

The buttons with images added

5. Adjust the icons so they better fit their buttons. Because we added the second set of images as children, we can adjust these icons independently from the buttons (which are constrained to the Grid Layout).

The UI after this step

Tip — Lowering the Alpha of a Button's Image

A button must have an Image component to register as a clickable button. That Image component is locked to the size of the button. When using the Grid Layout, all buttons and images have the same dimensions, making customizing the size and shape of icons impossible.

To modify the button’s icon without changing the size of the Grid Layout, make the button transparent by reducing the Alpha and add a new image as a child. This child Image will house the icon, and can be tweaked manually (while the Grid Layout continues to control the size and shape of the parent button).

Set the UI Manager to reference each UI panel so it knows which panels to turn on and off.

Setting up the UIManager.

1. In the Hierarchy, select the UIManager.
2. Drag in the appropriate references so we link up the buttons to their respective panels.

What is the UI Manager?

The UIManager is an empty GameObject that holds one UI Manager script. Scripts that control the state of an object, are known as managers.

The UI Manager has two responsibilities:

1. Toggling on/off the different UI panels.
2. Adjusting the position and rotation of each panel to match that of the Home panel (at run time).

The UI Manager toggles on and off different panels by calling specific methods. For example, the UI Manager will toggle off the Home panel and toggle on another panel, depending on the method called (e.g., the Lighting panel when the SwitchToLighting method is called).

By toggling off the Home panel and toggling on the (called) panel, we simulate the UI flipping screens to another UI state.

Link up the buttons to their respective panels by referencing the UI Manager so we can click to different panel screens.

Setting up the OnClick event references

1. Find the UI Manager in the Hierarchy (Hierarchy > Managers > UI Manager).
2. Select all of the buttons and add a new OnClick event.
3. Drag the UI Manager in as a reference for all of the buttons.
4. Select each button’s respective method in the UI Manager:
   Lighting = SwitchToLights
   View = SwitchToView
   Materials = SwitchToMaterials
   Environment = SwitchToEnvironment

All four buttons selected to make adding the UIManager into the OnClick event easier

The Lighting Button with the correct UIManager method.

Convert the bottom Home image into a button by adding a Button component so we can use it to toggle back to the Home panel.

Setting up the Home button

1. Select the images holding the house icon and add a Button component.
2. Link up the UI Manager to the button’s OnClick event.
3. Select the SwitchToHome method.

Explore — Click Play and Try Out the UI

Go ahead and click Play. You can now point to and click the buttons to navigate to the next UI panel. Click the Home button to return to the Home Screen.

Now that we’ve designed and linked our Home Screen, let’s add functionality to the other four screens.

To save you some time, we’ve already designed and built out the other four screens for you. Now you need to set up the proper references to add functionality to each panel.

Feel free to build out the other panels yourself as an extra challenge. You can either match the panels we provided, or add your own creative touch by aligning the buttons differently.

The other screen setups

Add the UI - Full Prefab to the Scene and delete the old UI so we can use the new UI panels.

Creating a Prefab of the UI

In the Assets window, find the Prefab folder and drag in the UI - Full object.

Explore — Build the UI Yourself

Feel free to build these panels out yourself! All of the icons are in the UI Images folder.

Set the UI Manager to reference each UI panel so it knows which panels to turn on and off. In an earlier step, we set the UI Manager to reference the old UI. We must now repeat this step with the newly added UI Prefab.

Setting up the UIManager references

1. In the Hierarchy, select the UIManager GameObject.
2. Drag appropriate references into the UI Manager to link up the buttons to their respective panels.

Set the Environment Manager’s references so we can connect it to each Environment button.

Setting up the SwapEnvironment component

1. In the Hierarchy, select the Environment Manager.
2. In the Inspector, change the Size to 3, since we have three environments to choose from.
3. Drag the Room GameObject into the Room Object parameter. The first Element will be our model environment (currently active in the Scene). By dragging in the Room GameObject, the Manager knows to turn the room on or off when prompted.
4. The manager turns all of the GameObjects on/off at once, in each Element. Note: Since the Environment GameObjects is a list, you can add as many GameObjects to turn on and off at once (with the room GameObject). In this Scene, we only have one we need to turn off (the room).
5. Leave the Skybox Material as None, as we don’t need to have a Skybox applied to the environment when the room is active. See the Lighting - Intermediate tutorial for a refresher on Skyboxes.
6. In Element 1, add Day - PeaceGardens as your first Skybox Material (Assets > Materials > Skybox Materials).
7. Leave the Environment GameObjects list empty, since there are no 3D GameObjects in the Scene when you turn on the Skybox.
8. In Element 2, add Dusk - PeaceGardens. Leave the Environment GameObjects list empty as well.

What is the Environment Manager?

The Environment Manager is a script responsible for changing the environment. We will reference this GameObject so we can access the script when we link up our Environment UI panel in the next step.

Reference the Environment Manager from each Environment button so we can swap our environment and test our car model’s look and feel in photorealistic environments

Setting up the OnValueChanged event

1. In the hierarchy, select the Indoors button and drag in the Environment Manager GameObject as an OnClick reference.
2. Select the EnvironmentSwitch method.
3. Leave the index at 0. Remember: The index number references specific spots on the Environment Manager list. Index 0 references Element 0 in the Environment Manager.
4. Repeat this step for Outside - Day Button and Outside - Night Button, but change their index references to 1 and 2, respectively.

Set the the Light Manager’s references so we can manipulate the lights in the Scene.

Setting up the OnValueChanged for the Lights UI

1. Change the Lights list’s size to 5, since there are five Point Lights that we will manipulate in the Scene.
2. Drag each of the five Point Lights into the list.
3. Modify the Low Light, Med Light, and High Light values to appropriate ranges. We found .1, .75, and 1.25 to be appropriate values, respectively.
4. Warning: If the High Light is too high, it can irritate the user’s eyes. Use caution when adjusting this max parameter. We recommend a max of 1.5.

Link the Lights UI panel toggles to the Lighting Manager so we can use the UI to control each light’s intensity.

Setting up the Light Intensity UI.

1. Select the Low Light, Med Light, and High Light Toggle GameObjects and drag in the Light Manager as the reference.
2. Select their respective methods (ex: High Light Toggle > HighLights).
3. Select the Slider, and add five new OnValueChanged events.
4. Drag in the Point Lights as the references.
5. Select Light.Intensity to control the lights’ intensity values. Light.Intensity is a native feature in Unity, so we don’t need add a script to access this.
6. Adjust the slider’s Max Value to 2, so we don’t harm the user’s eyes.

Controlling the light intensity

Set the Material Manager’s references so we can change the Materials on the car with the UI panel.

Setting up the Material Manager

1. In the Hierarchy, select the Material Manager.
2. Add our nine car Materials to Materials list (Assets > Materials > Car Materials).
3. Add the Frame - Top and Frame - Sides to the M Rends list. These are the two parts of the car model that make up the car’s body.

The Material Manager

What is the Material Manager?

There are three things the Material Manager is responsible for:

1. Materials List: Holds all of the Material options for the car model
2. Mesh Renderers: Holds all of the Meshes to which we will add our Materials
3. Enabled Color Index: Describes which Material is active on the car model

Link up the Material Toggles to the Material Manager so we can swap out the Materials on the car by selecting the buttons.

Setting up the Material toggles

1. In the Hierarchy, select all of the Material Toggles and drag in the Material Manager as the reference.
2. Select the SwitchMaterial method and add the corresponding index number (e.g., Material 0 > Index 0).

Selecting the SwitchMaterial method from the Material Manager

Link up the Car Rotate Manager so we can rotate the car for six important views: Front, Left Side, Right Side, Rear, Front 3/4, Rear 3/4.

The Car Rotate component

1. In the Hierarchy, select the CarRotateManager GameObject.
2. Add the Car Placeholder into the CarRotatePresets.CarModel parameter.
3. Add the Player GameObject into the CarRotatePresets.Player parameter.
4. Add the Car Placeholder into the Rotation.ModelObject parameter
5. Adjust the Rotate Value to an appropriate speed. We found 1 to make sense, but you can use any value you would like.

The CarRotateManager

Assign the Rotation Manager as the reference for each position button so we can change the model’s position on each button click.

Setting up the View toggles

1. Drag the CarRotateManager into each button’s OnValueChanged event.
2. Assign the relative method to each button (ex: Front Toggle > Front()).

The View UI is now set up

Let’s set up the Left, Center, and Right buttons at the bottom of the panel by adding the Button Extender script and making a new On Click Hold event.

The Button Extender component

1. Select Left, Center, and Right, and add Button Extender as a new component
2. Create a new OnHold event.
3. Drag in the CarRotateManager as a reference.
4. Select the appropriate method based on the button:
   Left → RotateModelLeft
   Center → RecenterObject
   Right → RotateRight

The Left View button is set up to allow the car to rotate when the button is held down.

Explore — Try Out Your Fully Functional UI

Congratulations! You've officially made a functional UI to hold your tools for your Automotive Design Review VR application.

Be sure to click play and give it a try! You’ll notice that all of the panels move to the Home panel’s position and deactivate. When you click the Play button, a script tells the panels to match positions and then to activate or deactivate depending on the UI’s state.

You have now built a fully functional UI by adding new buttons and toggles, descriptive icons, and linking these interactive UI features to their respective managers to control the environment, lighting, and object positioning.

By completing this module, you’re now able to:

• Build and configure Environment, Position, Material, and Light Managers
• Build out a Vive-interactable UI with toggles and buttons
• Make this UI interactable with Vive controller input
• Configure the UI to control the environment, light intensity, object rotation, and object Materials.