Unity UI: Canvas Overlay & Buttons
Intro
In this article, we are going to cover one type of Canvas; the Screen Space Overlay. We also add interactive buttons to create a virtual piano.
Canvas Overlay
In creating a UI, you will need to create a new Canvas to place your UI elements on.
This will create a Canvas object and an EventSystem. The EventSystem allows the UI to be interactive and detect the mouse and mouse clicks on UI elements.
You can have multiple Canvases in your scene, so I will rename this Canvas to “VP_Canvas” as it will be the canvas for the virtual piano.
This Canvas will be a Screen Space Overlay, which is one of three options. Before talking more about what this means, I quickly want to cover the Canvas Scaler. The Canvas Scaler Mode determines how the Canvas will be rescaled when deployed to different screen sizes. The most useful mode is the Scale With Screen Size. This will adjust to the scale of the UI to fit the current screen size. If you deploy this to a console, pc or mobile screens it will adjust the UI to fit proportionally to them.
The Reference Resolution determines the aspect ratio the scale will use and I would like to match the deployment screens which would be a 16:9 ration. This makes the Reference Resolution 1920 x 1080.
Back to the Screen Overlay…
Looking at the image above, you can see the game object appearing tiny in the scene view and the Canvas appearing enormous. When UI elements are added to the Canvas they will appear, but will not appear in the game screen. It is being rendered on a different layer and the Canvas is like a transparent layer that is placed on top of the game layer. You will see this better once we add a button.
Adding A Button
Right click on the Canvas and select the Button in the UI section.
When a Button element is added, add Text component is automatically parented to the button. I will not being placing a text into the button so you can either disable or delete the Text component.
The Button comes with a default sprite that is white and you can adjust the color of the image in the Inspector. We can also assign our own image for the Button.
Looking back at the Canvas in the Screen vs the Game view you can see how the Screen Overlay Canvas is rendered on a different layer in the Scene view where the scale is much larger, but in the Game View it is rendered as a transparent film over the camera and scaled down to the game objects.
When the mouse interacts with the button you have different Transition: Color Tint, Sprite Swap and Animation. Color Tint allows you to change the color of the button image, Sprite Swap allows you to change the image and Animation allows you to play an animation.
We are going to use a sprite swap transition. Each transition gives you different controls or events to trigger those transitions. The controls are Highlighted, Pressed, Selected and Disabled. Highlight is when the mouse hovers on the button, Pressed is when the mouse clicks on the button, Selected is when the mouse clicks the button to turn it on and Disabled is when the mouse clicks the button to turn it off.
For the Virtual Piano, we are going to change the image of the button when the mouse hovers over it.
Adding Sound When Clicked
We will need to create a script to handle what we want to do when the Button is clicked. In this case, we are going to play a sound and change the pitch depending on which button or key is pressed on our Virtual Piano.
To play a sound we will need an AudioSource component which we will need to reference. After this, we will want to play the sound clip that we assign in the inspector and lastly we will create a float that will control the pitch of the sound clip when played.
Add an AudioSource component to the the Button element.
Assign the Button (now with an AudioSource) to the Audio Source slot of the script, add a sound clip to the scrip and assign a pitch value that you want the sound clip to have.
Back in the script, we will need to create a public method that will handle what we want to happen when the button is clicked. Mae sure it is public so we can access it.
Through the AudioSource we are going to set the pitch to the pitch amount we assign in the inspector.
Again, through the AudioSource we can play the clip once and pass in the sound clip assigned in the inspector.
On the Button Element, we can run the method we just created when the Button is clicked. First, we will need to assign the Button that has the script on it. Click on the dropdown and select the public method we created on the script.
Adding Sound When Hover
Lets add a sound when the mouse hovers over the button since we have a transition when that occurs.
In the script, we will need to add a new AudioClip variable so we can assign it in the inspector.
Create another public method to access when the mouse hovers event occurs. Just like the clip we will set the pitch to the same pitch amount as the button click clip and we will play the assign sound clip using the PlayOneShot via the AudioSource.
To detect when the mouse is hovering over the button we will need to add an Event Trigger Component.
We are going to use the Pointer Enter event and just like the On Click trigger, we are going to assign the Button Element that has our script. When this Event occurs we are going to call or trigger our hover method to run.
Create the Virtual Piano
To create a virtual piano all you need to do is duplicate the original button and change the pitch value for each button to give it a different note.
The hover sound pitch change were not working at the start, so make sure to set the pitch of the AudioSource to the pitch amount at the start.
