Introduction to Unity UI – Part 2
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.
Introduction to Unity UI – Part 2
In the first part of this tutorial, you learned all about the Unity Canvas system, how to set up different UIs for different screen resolutions, and the differences between World Space and Screen Space UI. Finally, you set up two buttons to transition back and forth between a 3D scene and a 2D menu.
In this second part of the tutorial, you’re going to add the following functionality to JukeboxHero:
- Playing and pausing the music.
- Selecting a category of music from a drop-down.
- Selecting a track from a list inside a ScrollView.
- Changing the volume with a slider.
- Muting the music with a toggle.
As you add these features, you’ll learn all about Unity’s built-in UI components.
Getting Started
This tutorial builds upon what you created in Part 1, so you can use the same project now that you used for the first part. If you need a new copy, download the starter project by clicking the Download Materials button at the top or bottom of the tutorial.
Open the starter project in the latest Unity 2021 LTS version. You can use the Unity Hub to download and install the latest version.
Once you’re set up, open the starter project in Unity and open the JukeboxHero scene in the Assets / Scenes folder. Press Play and you’ll see a quaint bar scene with a jukebox playing away to itself in the corner. The World Space UI you made in Part 1 hovers above the jukebox. Clicking the button transitions the camera before fading into a 2D menu with a Back button. Clicking this button reverses the transition.
Speaking of buttons, it’s time to add two more!
Revising the UI Button
Drag two more Button prefabs into the Hierarchy. Drag them from the Assets / Prefabs / Button prefab onto the ScreenCanvas / Panel / Menu GameObject. Name the first one Button Play and the second Button Pause. Change the Text component on each to Play and Pause respectively.
All three buttons will be on top of each other at this stage — which isn’t very useful if you want to be able to click all of them! These buttons should sit neatly at the bottom of the panel, and Unity has another component that will help achieve this.
Create a new Empty Child of the Menu GameObject by right-clicking on Menu and selecting Create Empty. Name this new object Button Layout. This layout should fit across the bottom of the panel, so click the Anchor Presets and while holding Shift select the Bottom Stretch option.
This will set the Anchor values to Min (X:0, Y:0) and Max (X:1, Y:0), and the Pivot to be (X:0.5, Y:0) (bottom center). You don’t want it right on the bottom of the panel, so change the RectTransform values to Left & Right: 84, Pos Y: 202 and Height: 125.
Next, add a Horizontal Layout Group component to Button Layout. Change the Spacing value to 6 and the Child Alignment to Lower Center. Uncheck the two Force Expand checkboxes, and check the Control Child Size Width box instead.
You won’t see anything different in the scene yet. That’s because the Horizontal Layout Group only affects objects that are a child of itself. Drag each of the buttons onto the Button Layout GameObject so they become children of it. Make sure that the Button Back is the first button in the Hierarchy.
Observe what happens to your buttons. Not only have they moved, but they now sit nicely all in a row, and they all fit within the confines of the Button Layout RectTransform.
Now to make the new buttons do something. Add an event to the OnClick of each. Locate the JukeBox GameObject under Managers in the Hierarchy and drag it into each of the OnClick event’s GameObject slots. For the Button Play, select PlaybackController.Play, and for Button Pause, PlaybackController.Pause.
You may have noticed the buttons do look a little squashed now. Also, do you really need a Play button when the music is already playing, or a Pause button when the music is paused?
Select the Managers / JukeBox GameObject in the Hierarchy. Notice in the Inspector the PlaybackController component has open events for OnEnterPlay and OnExitPlay. You can use your events to show and hide the appropriate buttons.
Set the On Enter Play event to turn off the Button Play and turn on the Button Pause, and set the On Exit Play to do the opposite.
If you changed the Alpha on the Canvas Group, change it back to 0 then Save the scene and press Play to test your latest changes. When the menu opens, press the Pause button and the audio will stop. When this happens, the Pause button turns off and the Play button turns on. But because of the layout group, it looks like only the text of the button changes!
That’s two features knocked out with just three buttons and a layout group! Time to tackle the rest and take a look at some more of Unity’s UI components.
Designing Drop-downs
Drop-downs are a very common piece of UI — particularly in options menus. There’s another prefab prepared for you, so drag it out from the Assets / Prefabs folder onto the same Menu GameObject in the Hierarchy as before.
At first, the drop-down doesn’t look especially different than the button. Expand the children of the Dropdown GameObject and you’ll see it has a child named Template that’s disabled. Enable it in the Hierarchy and you’ll see what happens when the user clicks the drop-down in the game.
You can use the template component to customize the look and behavior of the drop-down, but because the actual values for the drop-down can be given from code, you only customize one generic Item for the list. Play around with the design and layout of each of the objects inside the template. You can always revert the changes back to the prefab defaults if you mess it up. When you’re done, turn the Template GameObject off again and go back up to the Dropdown once more.
Take a look at the options inside the Dropdown component:
- Template: This is the GameObject group you just inspected. This group turns on when the player clicks the drop-down.
- Caption Text: The Text component that sits on the drop-down itself. It will show the currently selected option.
- Item Text: The Text component that sits inside the Item template. This text component will take on the values you put in Options.
- Value: The index of the currently selected Option.
- Options: Here you input the values that will show up inside the drop-down list.
- On Value Changed: This is the event that gets fired when the user selects an option from the list, and the index of that option is sent with the event.
You’re going to use the drop-down to select different categories of music for the jukebox. Select the Managers / Jukebox in the Hierarchy and have a look at the Jukebox component. You’ll see a list of playlists available in the jukebox: blues, classical, old time and swing. Add these as the options to your drop-down. Make sure you type them in the correct order because the selection is index-based. Also notice that the text on the dropdown takes on the value in the first option.
Your drop-down is set up to filter between the different playlists from the jukebox, but in order to change the track you’ll first need to display a track list for each playlist. For this, you’re going to need a ScrollView.