---
title: "Challenge — Interactive UI Menus"
content_type: tutorial
url: "https://learn.unity.com/course/mr-functionality/tutorial/challenge-interactive-ui-menus-4?language=en"
language: en
container_type: course
container_title: "MR Functionality"
container_url: "https://learn.unity.com/course/mr-functionality.md?language=en&version=2018.4"
standalone_markdown_url: "https://learn.unity.com/tutorial/challenge-interactive-ui-menus-4.md?language=en&version=2018.4"
previous_title: "Challenge — MR Interaction"
previous_url: "https://learn.unity.com/course/mr-functionality/tutorial/challenge-mr-interaction-1?language=en&version=2018.4"
previous_markdown_url: "https://learn.unity.com/course/mr-functionality/tutorial/challenge-mr-interaction-1.md?language=en&version=2018.4"
difficulty: beginner
duration_minutes: 30
unity_version:
  - "2018.4"
supported_unity_versions:
  - name: "2018.4"
    url: "https://learn.unity.com/course/mr-functionality/tutorial/challenge-interactive-ui-menus-4.md?language=en&version=2018.4"
last_updated: "2026-08-04T14:21:51.000Z"
---

# Challenge — Interactive UI Menus

Build an interactive UI panel that toggles model parts, rotates an object, and adjusts its transparency.

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

## Overview

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:

1. Create a World Space UI Canvas with an image for a background, text as a header, four toggles, a button, and a slider
2. Connect the four toggles to their respective Rover parts so you can turn the parts on and off
3. Connect a button to the animation so you can play and pause it
4. Connect the slider to the Rover body to adjust its transparency

## Create the UI’s Background with a Canvas

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

![Creating a Canvas and changing the Render Mode to World Space](https://connect-mediagw.unity.com/h1/20200316/learn/images/f4c84cac-ed63-41f4-a8e0-b1c847e8a964_CreateCanvas.gif)

1. Create a new **Canvas** (**GameObject > UI > Canvas**).
2. With **Canvas** selected in the Hierarchy, convert its **Render Mode** to **World Space** under the Canvas component.
3. In the Canvas' **Rect Transform** component, change its position in the X, Y, and Z axes (Pos X, Pos Y, and Pos Z) to **-1.7**, **.75**, and **0**, respectively. Change its width to **1.7** and height to **5**.

## Add a Background to the UI 

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

![Adding a Panel](https://connect-mediagw.unity.com/h1/20200316/learn/images/f9fa921e-62e3-4894-9743-327c5173a97e_2019_02_13_16_12_55.gif)

1. With the Canvas selected, right-click in the Hierarchy and select **UI** > **Panel**.
2. Change the **Source Image** to **None**
3. Adjust the **Color** to your liking.

## Add Text to your UI

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

![Adding text to the Canvas](https://connect-mediagw.unity.com/h1/20200316/learn/images/a0265158-029f-45a0-a951-27f085e0309b_AddText.gif)

1. With the Canvas selected in the Hierarchy, create a **Text GameObject** (**UI > Text**).
2. Configure the **Text** component: Add **Mars Rover \[Enter\] Controller** in the Text input. Set the font size to **60**, alignment to **Left**, the horizontal and vertical overflow to **Overflow**_,_ and its color to **White**.
3. Configure the text's **Transform component** to match the screen grab below to reduce the text’s scale so it fits the Canvas.

![The text's Rect Transform component values](https://connect-mediagw.unity.com/h1/20200316/learn/images/68155074-d01b-4cd6-baf3-2d3f90051acb_RectTransform2.JPG)

## Add Four Toggles

_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._

![Setting up the Toggle Canvas](https://connect-mediagw.unity.com/h1/20200316/learn/images/3d729229-2764-486c-ae6e-e890002c24bc_2019_01_10_15_49_19.gif)

1. In the Hierarchy, with Canvas selected, add a new Canvas and rename it **ToggleCanvas** (**UI** > **Canvas**).
2. Add a **Vertical Layout Group** to ToggleCanvas via the Inspector (**Add Component** > **Vertical Layout Group**).
3. In **Vertical Layout Group**, adjust the parameters so three toggles can fit on the Canvas. Adjust the spacing to **-170** and child alignment to **Upper Left**. Check both **Width** and **Height** under **Child Force Expand**.
4. Add a **Content Size Fitter** to **ToggleCanvas** via the Inspector (**Add Component** > **Content Size Fitter**). Set the Content Size Fitter's horizontal and vertical fit to **Preferred Size**_._
5. Add four Toggle GameObjects as children of **ToggleCanvas** to turn the Rover’s parts on and off (**Assets** > **Prefabs** > **Toggle**). Set its width to **120**_,_ height to **20**_,_ and scale on each axis to **2**_._
6. Rename each toggle to **ToggleWheels**, **TogglePanels**, **ToggleArm**, and **ToggleCameras**. Change each Text component to its respective name (Wheels, Panels, Arm, and Camera).

![Adding toggle elements](https://connect-mediagw.unity.com/h1/20200316/learn/images/e0be4a2e-25ea-4a79-a803-4a10f11a59b2_2019_01_10_15_57_06.gif)

## Link Up the Toggles

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

![Setting up the toggle events](https://connect-mediagw.unity.com/h1/20200316/learn/images/8d5fb22b-8699-4201-8144-50cb8c191b8e_LinkToggles.gif)

1. In **ToggleWheels**’ Inspector, drag **RoverWheels** into the **OnValue Changed (Boolean)** field (this is found in the Toggle component).
2. Under the **Event Trigger** component, select the drop-down **No Function** > **GameObject** > **SetActive**. This will toggle the object on and off by enabling and disabling it.
3. Repeat Steps 1-3 for **TogglePanels**, **Toggle Arm**, and **ToggleCameras**, dragging in the respective **Cube** **GameObject.**

## Add a Button to Animate the Rover

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

![Adding a Button to animate the Rover](https://connect-mediagw.unity.com/h1/20200316/learn/images/4b34ef74-403e-4456-9454-2936121afd2b_AddButton.gif)

1. With the Canvas selected, add a **Button** **GameObject** (**UI** > **Button**).
2. In **Rect Transform**, set the Button's **Pos Y** to **-1** and the scale on each axis to **.007**.
3. Expand the **Button** in the Hierarchy to reveal its child **Text GameObject**. Set its text input to **Rotate Rover** .
4. To make the text clearer, reduce its scale in all axes in the **Rect Transform** to **.15**_._ In the Text component, set the font size to **100** and the horizontal/vertical overflow to **Overflow**.
5. With the Button selected, find the **On Click()** parameter in the **Button (Script)** component, click the **+**, and drag the **MarsRover GameObject** into the **None (Object)** field.
6. Select the drop-down titled **No Function** and pick **Animator** > **Play (string)**. Type **Rotate** into the text parameter.

![The OnClick() event for the Button](https://connect-mediagw.unity.com/h1/20200316/learn/images/cf25a6d3-eeda-4b11-ad9b-b099dd66913b_LinkAnim.JPG)

## Create a Slider as a Child of the Canvas

_Create a Slider as a child of the Canvas._

![Adding a Slider](https://connect-mediagw.unity.com/h1/20200316/learn/images/e07c3e1e-ac73-43b4-9296-2e9c942f1de5_Slider.gif)

1. With Canvas selected in the Hierarchy, create a Slider (**UI** > **Slider**).
2. In the Slider's **Rect Transform** component, set its **Pos Y** to **-1.5** and scale on each axis to **.007**_._
3. In the **Slider component**, set the Value to **1**.

![Set the Value of the Slider to 1.](https://connect-mediagw.unity.com/h1/20200316/learn/images/c85c2a48-e653-4a94-b368-d2ac895f682a_13_1.gif)

## Create a TransparencyController GameObject

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

1. In the Hierarchy, create an empty GameObject and rename it **TransparencyController**.
2. Drag the **Transparency.cs** script from the Project window (**Assets** > **Scripts**) to the  **TransparencyController**_’_s Inspector.
3. Drag the **RoverBody GameObject** into the **Rover** field. Drag the **OpacitySlider** into the **Opacity Slider Ref** field.
4. Change the Alpha Color to **White**.
5. Drag the **RoverBody_Transparent** Material from the Project window (**Assets** > **Material**) into the **Current Material Transparent** field.

## Key Takeaways

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:

1. Modify animation and transparency by setting them as UI references
2. Automatically align UI components using Unity’s auto layouts features: Horizontal Layout, Vertical Layout, Grid Layout
3. 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.