User Interface in Unity — How to create one.
So our Space Shooter is coming along nicely. We have given the Player a challenging, strategic game so far with enemies dropping down on our Player, powerups giving our enemy a fighting change and some pretty graphics to go along with it.
Now, we need to give the Player a User Interface. Somewhere he can see his hard work pay off by a functioning score clock, a menus system that will allow him to restart and a blinding Game Over when things go bad.
Unity gives us all the tools we need to make these things possible fairly easily.
To start all you need to do is right click in the Hierarchy and UI. This will give you a drop down list that will show off the power of it’s internal UI builder. As you can see you can have text, images, toggles and sliders, input fields and drop down boxes. A lot of choice to make an awesome UI!
I encourage you to play around with this and see what you can build but in for learning purposes let’s just keep it simple and start with a score text. Click on the Text box in that drop down menu.
Now you will notice in the Hierarchy that it gives you 2 things — a Canvas and a EventSystem. I’ll go into those in a second, but one thing of note here is that you need to look in the Scene view. Note the size of the canvas. This really through me the first time I used it. It actually shrunk the game a lot. Like, you can’t even see it. Look in the bottom left corner as below gif shows:
See, strange. But I thought I would point that out to you now so you aren’t all confused.
So back to the Hierarchy. You will see we now have a Canvas and EventSystem object and inside the Canvas a text object.
Canvas — This is basically your UI. All of your elements that are going to go inside of your UI go here. Your Text boxes and drop downs, etc.
EventSystem — The Eventsystem is going to give you the actual functionality of the drop down buttons and things like that. We will go into this in more details later.
Let’s focus now on a score box as mentioned. You can see when we create a UI it already gives us 1 text box. Let’s use this and make it into that.
First, click on the Text box object and then rename it Score_text. Now we will understand that object is for the score and we can use it in our code. Next, in side of the components you will see the Text and New Text written in. Whatever is inside that box will be displayed on your canvas. Let’s change this to Score. Now you can see this text inside the Scene menu, but it’s black. Not good against our black background. Find the Color box at the bottom of the Inspector and let’s change that to white. There you go! Note you can move it around, so now we want to find a good spot for it.
So let’s put this in the top right corner where most Scores are (or left, it’s your preference. Now there are some important things to keep in mind here…
The first, if you were going to port this to a mobile device for example, the text Score is not going to shrink down with it. You will need to anchor this somehow. Good thing there is.. ahem, an anchor component you can use! See below gif:
See how the Score text left the screen when I shrunk my screen? The fix, again, the anchor that I did in the Inspector. Now when you shrink this it’s going to scale down with you.
Now, some of you smarty pants might be noticing that the actual text Score: is NOT scaling down or up as the screen shrinks or enlarges. This is because on our Canvas component Canvas Scaler it is set to Constant Pixel Size. This is keeping that text the same size no matter what. The text box is scaling, but not the text.
To fix that, just hit the drop down box and chose Scale With Screensize. Now the box AND the text is going to scale with whatever size the screen changes too.
Now I won’t go into the coding aspect of manipulating your UI elements, such as changing the score when the enemy is hit, etc in this article as it will be a bit more in depth with a lot of script communication and method calls and.. and… well you get the idea.
Tomorrow, I will add a Player Lives Image and show you how to change that image depending on how many lives they have.