Introduction to Unity UI – Part 2

Aug 22 2022 , C# 7.3, Unity 2021.3, Unity C# 7.3, Unity 2021.3, Unity

In this second part of the tutorial, you’re going to add additional functionality like playing and pausing the music, selecting a track from a list inside a ScrollView, and changing the volume with a slider. As you add these features, you’ll learn all about Unity’s built-in UI components. By Ben MacKinnon.

5 (1) · 1 Review

Download materials
Save for later
Share
You are currently viewing page 3 of 3 of this article. Click here to view the first page.
Contents

Contents

Hide contents

Introduction to Unity UI – Part 2

20 mins

Adding a Toggle

Fortunately, there’s already a Toggle in the scene for you to use. Expand the VolumeSlider GameObject and you’ll see there’s a Toggle underneath it. This was part of the original prefab you added to the scene. The little volume icon was actually a Toggle all along. Select it in the Hierarchy to see the component details.

showing the toggle settings

  1. Is On: The current state of the Toggle.
  2. Transition & Graphic: The mode that the Graphic will transition, defaults to Fade. And a reference to the checkmark image.
  3. Group: If you want to create Radio Buttons, then you need to add a Toggle Group component to an object, and have all the Toggles reference the same group. Only one Toggle can be on in a group.
  4. On Value Changed: The trusty event! This time it reports a boolean status — the Is On value.

Your final task is to add a listener to the OnValueChanged event. This time, drag the jukebox from Scene / jukebox (the actual 3D jukebox GameObject, not the Manager one) onto the object field and select AudioSource ▸ mute. Again, it’s the Dynamic bool option you want.

setting up the toggle functionality

Save the scene one last time and enter Play mode. Get to the menu and try out all the UI and features you’ve added to JukeBox Hero!

showing the final result

Where to Go From Here

Download the completed project files by clicking the Download Materials button at the top or bottom of the tutorial.

You’ve learned all about the different UI components that come standard with Unity. Once you get the hang of these, check out the Unity UI Extensions package. It adds a whole host of new and exciting components for you to use in your projects.

Or, why not design your own components?! Through scripting and the use of the Vertex Helper, you can create completely custom UI components.

We hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!