Creating a UI Canvas in Unity
We’ve got some cool Powerups for our Player now, but there’s one thing missing in our retro-arcade shooter — our score! How else will we know how awesome we are at destroying enemy spaceships?!
But first, before we implement the Scoring system, we’ll have to create a Canvas — Unity’s UI System. This is a layer that is always on top of the screen — for any UI elements you deem necessary to be displayed!
Creating the Canvas
Creating a Canvas UI is very easy in Unity! You simply just have to right-click in your Hierarchy, scroll down to UI, and select Canvas. Just like that you’ve created a layer for all your UI elements to appear on!
Once you create a Canvas, you might not notice it in your Scene window. This is because the Canvas is extremely large in the Scene view, but scales to your Game view at all times!
This is how big it is:
Creating a Score placeholder
Now we’ll create our first UI display: the score! Or at least a placeholder, before we utilize it in code, to visualize how it will appear in our Game.
To create our Score placeholder, we’ll right-click on our new Canvas in the Hierarchy, scroll down to UI, and select Text. Then rename our new element Score Text, and change the default text to Score: 000000 (or another big number, to see our maximum bounds)
Now with our placeholder created, we can fix up it’s placement in the Scene window.
When initializing a UI element, you’re default selector in the Scene view is the Rect Tool. This allows you to stretch the bounds of your UI element to your liking, as well as position it in on the Canvas.
Stretch your Score Text box out a bit and change your font size to your pleasing. Then drag your Score Text to the position you think best (usually out of the Player’s view to the outside of the screen).
You can change the colour, font, and alignment in the Inspector window as well.
The last thing you want to make sure of is your anchor point — initially in the center of your Canvas (the 4 triangles pointing to a center point). This is where your UI element will be tethered to when your Game screen scales to different sizes.
Your UI element will retain a permanent distance from your anchor point at all times, so it’s best to make your anchor point as close as possible to avoid scaling issues!
Scaling Issues
After mentioning Scaling Issues, we should fix one right away. Currently, when we scale our Game window, our Score Text remains with a constant pixel size no matter how big, or small, our Game window is:
To fix this we need to change our UI Scale Mode (inside the Canvas Scaler component) to “Scale With Screen Size” instead of “Constant Pixel Size”.
And now our Canvas should scale properly with what ever size window our Player wants to play at!
While many find UI design and implementation a little intimidating, Unity makes the process quite easy and gets you started in a very beginner friendly fashion. That’s not to say it won’t get complex, cause trust me, it can, and will!
Now that we have the basis of our UI Canvas in place, next we’ll be utilizing the Canvas in code and updating our Score in real-time!
