All content in this course uses:

Challenge — Adding Functional Buttons to your UI Panel

In this challenge, you will be building out a fully functional UI panel. 

Tutorial21_UIChallenge.zip

The previous tutorial was an introduction to interactable UIs using the 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.

In this challenge, you will build an interactive UI panel prototype that controls Scene objects. To do so, you will:

Hook the buttons up to the Cargo GameObject

Interactive UI Menus

Create a new Canvas to house your interactable UI objects.

Adjust the width, height, and scale of the Canvas. 

Tip — Best Practices for Adjusting Resolution/Scale

Remember that the width and height of the Canvas is equivalent to setting resolution, and the scale is used to set the size of the Canvas. 

Open up the Scene and notice the different GameObjects that we will turn on and off: the light tower and cargo items.

Create a UI Canvas

Add a Panel GameObject to your Canvas so the menu has a background.

In the Hierarchy, right-click the Canvas and add a 

Make the UI Menu’s Background

Add the buttons to the Canvas so we can turn the cargo on and off.

 buttons to turn the Cargo GameObjects on and off. (

 Turning them on and off really just means making the cargo appear and disappear by pressing the buttons, making visibility of the entire Scene easier.)

Change each button's text to represent its functionality: 

Reposition the buttons so both are visible and in the middle of the panel. 

It's best practice to rename them as you go.

Add On/Off Buttons

Set the Cargo GameObject as the two buttons’ reference so we can activate and deactivate the cargo in the Scene.

. This will turn the Cargo GameObject on when this button is clicked. (

: Make sure the checkbox is checked. See the image below for reference.)

, but leave the checkbox unchecked so the button turns the Cargo GameObject off when the button is pressed. 

Hook the Buttons Up to the Cargo GameObject

Add the Toggle GameObject to the menu so we can turn the lights on and off.

) to control the Spot Light in the Scene. Rename it 

Reposition and scale the toggle to make it a similar size to the other UI elements (see the image below).

 to give it functionality by adding a new event and dragging in the 

: Be sure to select the Dynamic Method and not the Static Method — this allows the light to be toggled on and off versus just on.)

Turn off the Directional Light to better see the light tower in action. 

Add a Toggle as a Light On/Off Switch

Add the Day_Night script component to the Directional Light so we can adjust the Scene’s sun position and view the Scene at different times of the day.  

script component so we can modify the Directional Light’s

 controls its parent object’s rotation. In this challenge, we assign the script to the Directional Light so we can simulate the sun's movement throughout the day.

The NightandDay script has two parameters: 

. The Speed parameter controls how fast the Directional Light rotates, simulating the rotating sun. The Slider is our control mechanism to update this value at runtime. As we will see in the next step, we configure the slider so that its value updates the Speed value.

Configure the Sun to Rotation

Add a Slider GameObject to the UI menu so we can adjust the sun’s rotation, simulating different times of day.

 Change the size so that it's visible and position it underneath the Toggle.

 Now give the Slider functionality by adding a new event to the 

 event in the Inspector so we can assign the logic reference in the next step.

script. Remember, this is how we access the script’s logic.
 


 values to set the sun's speed across the sky. We chose 

in the Slider component to adjust the maximum speed that the sun will travel across the sky. You can choose any value you would like. We thought -25 and 25 worked well.

25 will maximize the sun’s clockwise movement across the sky. In other words, it will maximize the speed of the rotation between day and night.

-25 will cause the sun to move in the opposite direction.

Add a Slider to the Menu

That’s it! You’ve finished making your UI panel. Go ahead and deploy it to your Oculus Go and give it a try.

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

1. Create a UI menu with interactable functionality

2. Control Scene objects with the UI menu

Unity Version 2019.3