When we talk about “UI Elements” in Unity we are referring to the onscreen dashboard as opposed to the game elements themselves. This would include things like a scoreboard, messages (e.g. Game Over), icons for game elements such as lives and current weapon, etc. These objects need to be grouped outside of the game play so, obviously, they do not interfere with the game play. In Unity, this means we place them into a “Canvas” that will overlay the screen but not interact with any of the game objects.
The first thing we need to do then, is add the Canvas. This is done by right clicking on the Hierarchy and selecting UI -> Canvas. Initially, adding the canvas to your project might appear to have no affect. Normally in Unity, you would expect something to appear. If you look closely though, you should notice two white lines.
That’s actually your canvas. If you zoom way, way, way, way, way out you will eventually see something like this.
That little thing down in the bottom left. That’s your game screen. The somewhat unsettling part is the two components on the canvas you see here are not actually that far off the game screen. In fact, they are actually on the game screen right where they are supposed to be.
The reason for the odd display is because by default, Unity converts “pixels” to “units” when displaying the canvas in your work area. As we already know, a unit in the Unity Editor corresponds to one meter of “physical” space. Thus, the ginormous representation for the canvas.
Now, Unity defaults, in my limited experience so far, are not arbitrary, so there is likely good reason for you to leave this. However, if you’d rather not do all that scrolling you can shrink the canvas down and overlay it directly on your work scene. Select the Canvas game object and then make the following changes in the Canvas component.
- Changed Render mode from ‘Screen Space – Overlay’ to ‘Screen Space – Camera’
- Drag the main camera into the ‘Render Camera’ field
- You will probably have to adjust the plane size. The default is 100 which for me, was still way larger than my display. So, I changed it to 10
- Change the sorting layer from ‘Default’ to ‘Foreground’
Now, the Sorting Layer is the part that makes me go “hmmmm….” I had to change the sorting layer to put it back on top, where before it just magically was. Testing, it did not seem to interact with any game objects, and my enemy ships still flew “under” the text, so it seems to be good. But I feel like something might have happened I don’t really want. At the very least, I will likely move it to its own layer and ensure it is on top.
You might also notice the alignment is not completely perfect, which threw me at first. But then I realized this was just due to the background image being slightly off-size for the 16:9 resolution. So, the white frame represents the actual screen size.
Either way, once you have your canvas set in a way you are comfortable working with, it is just a matter of adding components to it.
There is one difference between adding components to the canvas versus the game scene, however. When adding to the canvas you do not drop sprites and the like directly onto it. Instead, you add object types and then fill in the fields as needed. For instance, to add an image like the player lives indicator in the top left, you right click on the canvas in the Hierarchy and select UI -> Image. You can then drag and drop the desired image into the ‘Source Image’ field.
Text boxes, buttons, toggles, etc. are all added in the same way. Once they are added to the Canvas though, you will be able to interact with them just like any other game object. Create a script and attach it to the Canvas. This script will then be the access point to all the UI objects you place on the Canvas.