All content in this course uses:

Challenge — Interactive UI Menus

In this tutorial, you will build an interactive UI panel to disable different model parts, rotate the object, and adjust its transparency.  

Tutorial24_UIChallenge.zip

In this challenge, you will build an interactive UI panel to disable different model parts, rotate the object, and adjust its transparency. To do this, you will:

Create a World Space UI Canvas with an image for a background, text as a header, four toggles, a button, and a slider

Connect the four toggles to their respective Rover parts so you can turn the parts on and off

Connect a button to the animation so you can play and pause it

Connect the slider to the Rover body to adjust its transparency

Overview

Create a UI Canvas and convert it to World Space so you can properly place it in your 3D Scene.

component, change its position in the X, Y, and Z axes (Pos X, Pos Y, and Pos Z) to 

Create the UI’s Background with a Canvas

Add an Image component to the Canvas and change the color to create a panel overlay. 

With the Canvas selected, right-click in the Hierarchy and select 

Add a Background to the UI 

Add a Text GameObject to your Canvas to give the direction “Mars Rover Controller.” 

 in the Text input. Set the font size to 

, the horizontal and vertical overflow to 

to match the screen grab below to reduce the text’s scale so it fits the Canvas.

Add Text to your UI

Create a Toggle Canvas, add the Grid Layout components so we can organize our toggles, and add the toggles so we can turn off the cubes. 

selected, add a new Canvas and rename it 

, adjust the parameters so three toggles can fit on the Canvas. Adjust the spacing to 

). Set the Content Size Fitter's horizontal and vertical fit to 

Add four Toggle GameObjects as children of 

. Change each Text component to its respective name (Wheels, Panels, Arm, and Camera).

Add Four Toggles

Link each GameObject to its toggle so that it turns off when unchecked and back on when checked. 

 field (this is found in the Toggle component).

. This will toggle the object on and off by enabling and disabling it.

Link Up the Toggles

Add a Button to the Canvas and configure it so we can play the Rover rotation animation.

To make the text clearer, reduce its scale in all axes in the 

In the Text component, set the font size to 

Add a Button to Animate the Rover

Create a Slider as a child of the Canvas. 

selected in the Hierarchy, create a Slider (

Create a Slider as a Child of the Canvas

Create an empty GameObject and add the Transparency script component so we can adjust the Rover’s body transparency.

In the Hierarchy, create an empty GameObject and rename it 

Create a TransparencyController GameObject

You've now made a fully interactive UI. You used Unity’s built-in design tools to build a simple, clean UI to adjust and interact with the Mars Rover.

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

Modify animation and transparency by setting them as UI references

Automatically align UI components using Unity’s auto layouts features: Horizontal Layout, Vertical Layout, Grid Layout

Interact with these objects using the HoloLens

Continue on to put these new learnings to the test and challenge yourself to build a UI panel for a training application.

Unity Version 2018.4