Unity UI (interface) system detailed Guide (2021) – [FULL]

User interfaces (Unity UI) are the main features of almost any contemporary software application. Games are no exception to this rule. The vast majority of games use a kind of user interface to display details in the form of Health, skills, maps, ammunition for a pistol, and more. Unity 3D offers a variety of UI elements that you can use in your game.

unity ui tutorial

If the menu designs of your game are bad, or if the Unity Ui components that take place on the stage do not look good, it will create a bad image as a first impression. In other words, a game with a bad design of the first home screen will inevitably be biased. It may even cause you to lose potential players.

In our course, we will examine all the Unity UI components in detail and try to explain how they will be created, their labor-spending logic, and all their settings.

Unity UI: Canvas

Canvas has two important roles:

  1. Accommodates among other UI elements. In other words, all other interface elements must be Canvas’s child.
  2. Determines whether the UI system will be 2D or 3D. The 2D interface is the same as the OnGUI and Guitextures we’ve used so far: the interface is drawn on top of the game screen. 3 size support is a new feature with the UI system, and the interface you create with this feature can have a position and slope in 3D space. In this lesson, we will see both dimensions

Unity UI: Button

You can deduce what this guy is from his name. It acts as a clickable (interactive) button.

I found it appropriate to set up an easy interface consisting of a canvas and a few buttons together first, not to mention the features of this element. In this way, you will see that we can create an interface with the new system without writing good code, and you will meet several important terms: anchor and pivot.

Open an empty scene in unity. In this scene, we will check the UI system.

At first, we talked about the most basic unit of the UI system: canvas. We want an interface consisting of buttons, only these buttons have to be the child of the canvas. In this case, it is possible to create a canvas in two forms:

  1. GameObject-UI-Canvas can be created manually by following the path.
  2. We create a button directly with GameObject-UI-Button, and a new canvas is automatically created for us.

I 2. I’ll take the road. Follow the path GameObject-UI-Button. A canvas and a button will appear on your Hierarchy panel:

unity canvas

Canvas was created automatically for us. This is not enough, an event system was automatically created in a similar format. What does EventSystem do? It allows the interface you create to work on both PC and mobile devices. So you’re not putting in extra effort for the interface to spend effort on mobile devices, Unity is doing this job for you through EventSystem.

If you look at the Scene panel, you will see a large rectangular area and a small button placed inside this area. This rectangular area is our canvas. Currently, in canvas 2D mode, in short, the interface elements that we have created between canvas will be drawn directly on the game screen.

So, how do we edit the interface? The most convenient way to do this is to switch to 2D mode. In 2D mode, the Z-axis disappears; but we work with the X and Y axes. Just press the 2D button at the top of the Unity interface to switch to 2D mode:

unity 2d panel

Now select it by clicking on the button object that is located between canvas. Then click T on the keyboard or select the Rect Handles tool from the toolbar:


This tool works when editing UI elements. If you say why we use a separate tool because the UI elements do not have the Transform component, but the Rect Transform component, and this component also hosts different variables than the variables that the Transform component has.

A few new gizmos appear when we select the button:

unity pivot


Frankly, I didn’t see any benefit from a pivot. I don’t think you should ever play the pivot. I’ve seen that the pivot works quite well in a single issue, and that’s when you rotate the interface element (rotate). UI elements are Rotary around the pivot, and if you change the position of the pivot, the rotation methods of the objects will also change.

To rotate a UI element around the pivot, just move the mouse cursor a little outside any of the blue dots that occupy space at the ends of the rectangular line that surrounds that element. In this case, The Shape of the mouse cursor will change, and this interface element will rotate around the pivot as long as you hold down the Left mouse Button:


If you have not moved the pivot, the button will rotate around its center. But let’s just say we all want the button to rotate around its upper left point. Then what we need to do is grab the pivot and drag it to the top left of the button. Then rotate the button again. Now the button will rotate around the top-left point.

READ >   What is Unity For 2D Games? Unity Game Development (2021)


Now that we’ve eliminated pivot, we’ve come to the most fatherly point: anchor. Anchor will make plenty of use when placing interface elements. As the resolution of the screen changes, several elements determine how the interface elements behave, one of which is an important anchor.

You can see the anchor as an icon formed by combining 4 triangles on the canvas (you need to select the button object first). The interesting thing is that, in fact, every UI element has not one, but four anchors. Each of those four triangles represents an anchor. If you hold and drag any of these triangles, the four anchors are separated from each other:

unity anchor

Anchors have a very, but very important feature: each anchor actually communicates with a corner of the UI element to which it is connected. Please pay attention to the next sentence, so this is the dangerous conclusion point: the distance between an anchor and the corner to which that anchor is connected will remain “continuously” the same, no matter how much the resolution of the screen changes. For example:

unity 3d anchor

In this example, I tried to show two different situations. Position 1 is the same as before. Here, which anchor is connected to which corner (upper left anchor is connected to the upper left corner of the button, etc., etc.) and note the distance between the anchor and the vertex to which it is connected.

I wondered what this button would look like on a screen with less width, and I reduced the width of the Scene panel quite a bit. Anchors also moved with the screen (I will address this issue) and I encountered situation number 2. In number 2, the anchors got closer to each other, but in both cases, the distances between the anchors and the corners remained the same. Wonderful!

I strongly recommend that you make this system a little ergonomic in your own canvas to better detect it. Separate the anchors of the button from each other and sew them to the desired points. Carefully observe the distance between anchors and the corners to which they are connected. Then play with the size of the Scene panel. Anchors will move and the size of the button will change, but the distance between anchors and the corners of the button will remain constant.

Now let’s see how anchors are automatically positioned compared to what they are. The difference between states 1 and 2 in the previous picture was that the anchors on the left and right were closer to each other in number 2. The reason for this was that in the second case, the width of the screen was smaller.

Anchors are moved using the % system when positioning. I’ll tell you about it as an example:

When positioning anchors in unity, various % expressions appear on the screen, similar to the one shown in the picture. These determine how far away the relevant anchor will be from the edges of the screen.

Take anchor at the bottom left, for example. This anchor will always be located to the left of the canvas, as far away as the width of the canvas. Similarly, from the bottom point of the canvas, it will be located as far as %of the height of the canvas (which means 1/4 of it). No matter how much we change the height of the screen (which means indirectly the canvas), these proportions in the anchor will never change. The screen resolution is 100×100, while the bottom left anchor distance to the bottom left corner of the canvas (17,25) will be pixels, while the screen resolution will be 200×60 (34,15) pixels. I hope the concept is understood.

unity ui

A little tip about positioning UI elements

Shift key! This button can be very useful to you.

If you are moving an object from one place to another, when you press and hold shift, the object moves either on the horizontal axis or on the vertical axis, its position on the other axis does not change.

If you hold down the corners of the UI element and hold down Shift while you resize it, the width/height margin of the UI element does not distort, the object is sized so that it does not distort this margin on both axes.

Unity Ui: Button (Script)

When you select the button object, you may have noticed that there is a component named “Button (Script)” in the Inspector. I’ll go over the values here quickly.

Interactable: used to determine whether the button is clickable. If you turn this option off, the “On Click()” ranking of the button will not work.

Transition: the button is used to provide transition animations. And when do these transitions happen? For example, when you move the mouse cursor over the button, you switch from “Normal“ to “Highlighted“. Clicking on the button will switch from “Highlighted“ to “Pressed“. If the button is not Interactive, it always remains “Disabled”.

READ >   How to install Unity Android SDK? (2021)

If Transition is ”Color Tint“, the color of the button changes slightly during transitions. You can adjust these colors from the Inspector. The ”Fade Duration” value here determines how many seconds the transition between colors will occur.

If you have the “Sprite Swap” transition, you will change the sprite of the button in each transition. Sprite, whatever you call it, I’d say Texture2d’s version in the UI system.

If you have made Transition “Animation”, you can give the button an animation as detailed as you want on the occasion of the Animator component. For example, when you reach the top of the button with the mouse, let’s say that the size of the button increases a little, when you click on the button, we want the color of the button to be red. To achieve this, the first click on the “Auto Generate Animation” button:

unity button scrpipt

Give controller “Animation test” as the name and save asset anywhere. Now, with the button object selected, open the Animation window using the Window-Animation method. Replace normal at the top left with Highlighted

Unity UI: Text

Our next UI element is Text. The reason I chose this is that each button already has a Text. As a matter of fact, from what we’ve seen of the button, it’s time for text in that format.

An element that we call Text is used to print an article on the screen. Buttons come with a “Button” by default. To change this text as you wish, select the text, which is the child object of the button, and change the Text value under the “Text (Script)” component in Inspector. Note: you can also enter an article consisting of multiple lines in the text.

Important values that“Text (Script)” have are:

  • Horizontal Overflow: if the value is Wrap, the part of the article that does not fit the button is written to the bottom line. If the value is Overflow, the article may move out of the button.
  • Vertical Overflow: if the value is Truncate, the article does not overflow out of the button, if it is Overflow, it may overflow.
  • Best Fit: if checked, the size of the article is automatically adjusted to fit exactly in the rectangular area in which it is located. However, you can also set a lower limit (Min Size) and an upper limit (Max Size) to this automatic sizing again.

I don’t bother to explain since the other features here are quite obvious.

I want to share another good piece of information about Text: you can give effects to messages that you create through Text. There are currently three effects: Shadow, Outline, and “Position As UV1”. For example, let’s say you want to give a shadow effect to a post. All you need to do is select that Text object and follow the path Component-UI-Effects-Shadow. Now that article has a shadow. By playing with the settings in the ”shadow (Script)” component, you can color and position the shadow as you want. For example, text with a shadow applied.

Unity UI: Panel

As far as I understand, this UI element helps draw a box on the screen. By default, this box covers the entire monitor, only you can position the box as you want. I couldn’t find a “feature” to mention even more.

Unity UI: Image & Raw Image

Image is used to draw an image (Sprite) on the screen. The most important variable of this object is the “source Image” part, which is naturally among the “image (Script)” component. Just drag the sprite you want to draw here.

A different version of the image object is also available as RawImage. RawImage, on the other hand, is used to draw Texture on the screen, not Sprite. The “UV Rect“ contained here serves to draw not all of the texture, but a certain part of it on the screen.

Unity UI: Toggle

Under user agreements, there is a check box indicating that you have approved the agreement. That box is a toggle. The check box that we call Toggle is either checked or not (great choice to change the value of a boolean).

Open a new scene and create a Toggle between it by following the path GameObject-UI-Toggle. In a hierarchy, you will find that Toggle has three child objects: Background, Checkmark, and Label. The Background here is used to draw the background of the check box, while the Checkmark is used to draw the tick mark placed in the box. The label is used to change the text that Toggle has. Our main concern is the “Toggle (Script)” component in the Toggle object.

If we talk about the important variables involved in this component:

  • Is On: indicates whether the box can be checked at the start of the game.
  • Toggle Transition: a very unnecessary feature, leave it as Fade.
  • Group: sometimes you have a very checkable box in front of you, but only one of them can be selected at the same time (for example, checkboxes asking for gender). In this case, we can group the checkboxes in which only one of them can be marked. We’ll see about valuing this variable.
  • On Value Changed (Boolean): just as the button has “on Click ()”, it also has “on Value Changed (Boolean)”. Functions that are included in this list are called when we check the check box/remove the presence mark.
READ >   What are Unity HDRP and URP? how is it used?

The method that comes to mind to mention toggle is as follows: together we will do a one-question Control application. The question “in what light is passed?” will, and the Yesil will be red, yellow, and green (as you can imagine). Only one of these toggles can be marked at the same time. When we choose the right option (I wonder which one??) to the console “you won!” the message will be printed.

Open a blank scene in this format and create 1 Text and 3 Toggle objects between them. Take the text to the top and index the toggles under it as you wish. Change the names of the toggles to “Redmizitoggle“, “SariToggle” and “Greentoggle” (so that we can easily understand which toggle represents whom).

Select text and select the value “at what light? change it to“. Then select Redmizitoggle’s child object named “Label” and make the text there “Red”. If you say you would like to add a little more visuals, this time select the background child object of Redmizitoggle and make the “Color” value red. So the check box will be painted red. Very cool! Finally, Select toggle itself and make “is Onfalse.

Unity, Making The Interface Look The Same At Every Resolution

When processing the button, we saw how to interface elements can be sized together with the interface using anchors. But there are exceptions from time to time. For example, let’s say you draw a photo in the interface. You spread the anchors of the picture all over the canvas; the photo grows and shrinks with the canvas. But here is a small problem: the aspect ratio of the image is not preserved! This is not a problem for buttons, but we generally want the aspect ratio of the image to be maintained when drawing a photo. In such cases, there are several options that the new UI system provides us with.

Aspect Ratio Fitter:

This component ensures that the aspect ratio of the UI element to which it is assigned remains the same. You can give this component to the desired UI element by following the Component-Layout-Aspect Ratio Fitter path. The “Aspect Mode” variable that component has is important here:

In order of these options:

  • None: Component loses function.
  • Width Controls Height: like the width of the UI element changes, its height changes automatically to maintain the aspect ratio.
  • Height Controls Width: as the height of the UI element changes, its width changes automatically to maintain the aspect ratio.
  • Fit in Parent: either the width or height of the UI element is constantly associated with the edges of the parent object (while the aspect ratio is maintained).
  • Envelope Parent: the UI element is automatically sized to contain the entire parent object (while maintaining the aspect ratio).

I’m not interested in the last two options, but the two options before that are really useful. Using these two options, you can find an example scene that I have prepared between the example project.

There is another important point you need to know when using this component: the position of the pivot point. If you want the UI element to always be located on the far left of the screen and you are using the Aspect Ratio Fitter component, then you must move the pivot point to the upper-left corner of the UI element. In this way, automatic resizing of the UI element will occur over the right and bottom edges, and the position of the top-left point will not change.

Canvas Scaler

I really like this component; it’s also quite simple to use:

First, we resolve 1024×768 using the resolution button on the left of The Game panel:

Then we select the Canvas object and make” Ui Scale Mode “of the“Canvas Scaler (Script) “component” Scale with Screen Size”. From the new variables that we encounter, the reference resolution is 1024×768, and we make“Screen Match Mode “and” Expand”:

Now we are ready to make our interface. The point we need to pay attention to when preparing the interface is to collect anchor points of UI elements at one point instead of spreading them to four different points. In the example project, there is also a small example related to this issue; I suggest you examine it.

Note: it’s up to you to investigate other variables that Canvas Scaler has; I don’t know exactly what they are.

You can write all the questions that you are stuck with within the comments section. Also, check here for other topics: Unity 3D Category

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.