GameDev : UI System (Part I)
Now we have to create the UI part of our game.
UI is another important part of Unity and in every project like game or application, we NEED the UI.
Objective : set up the UI System
First of all,
to create UI in Unity, simply go to Hierarchy, Right Click, UI.
This allows us to choose what part of UI we need. As we can see, there are many options : Text, Image, Button , Slider, many many features.
We need a text for now, and we have 2 choose : TEXT and TEXT MESH PRO.
The only difference is that Text Mesh Pro has more advanced functions for the Text and other things, but are both same thing : allow us to write text.
For simplicity, I use TEXT.
If we click on Text
Unity automatically creates two things in addition to Text: a Canvas and an Event System.
Let’s look at this components
Canvas is the CONTAINER for the user interface, if we look inside our scene, we see that the Canvas is completely DETACHED from the Scene.
TIP : every time we search for an object inside the Scene, we can’t go around to try to find it right? Imagine a big map, is nearly impossible find what we need in few time.
The shortcut is : highlight the object we need in the hierarchy, go over the scene and simply press F
If we search the Canvas…
..is HUGE!
And it’s completely different thing!
The little part in the lower left corner after I zoom in is our Scene!
Inside this big empty picture, we manage every thing about UI.
The second thing is the EVENT SYSTEM.
It is not something we see, but the fact is it manage every logic and system behind UI.
If we back to our Text, we see that we can move around the Canvas, and if we move it…
…we move Text inside the Canvas, but we see it in the Game View.
As any object, Canvas and Ui have their Inspector.
In the Text Inspector, we change the name from Text to Score_Text.
To change the Text inside the Game, we change here
And name it Score.
If we look at the Text in Game now, it changes into “Score”
The text is really small, under Font Size I change in 25
And here we can change the Color of Text
I set the Text to White Color.
Now, let’s look at this : I put the Text at the right top corner of the Canvas.
But if I change the dimension of the screen…
…the Text disappear.
This because we need to ANCHOR OUR TEXT TO THE CANVAS.
Again, in the Inspector, there is a voice, RECT TRANSFORM.
Left click there, and a menu will open.
With menu open, we can click ALT to setting the Position, SHIFT to setting the PIVOT, or both to implement Position and Pivot
I don’t remember if we talked about PIVOT, but in few words, the Pivot is the point of ROTATION OF ANY OBJECT.
If the Pivot is at top right, means that object rotate ON BASE OF THAT POINT.
I set Position and Rotation on top right corner.
As we can see, when I rotate the object, the PIVOT or THE POINT OF ROTATION IS BASE ON RIGHT TOP CORNER.
And if I stretch the window
The Text don’t change its position.
Remember always to use THE RECT TRANSFORM to set RIGHT POSITION OR ROTATION.
In next article we continue with UI!
