1 00:00:04,130 --> 00:00:05,030 ‫Welcome back. 2 00:00:05,060 --> 00:00:11,330 ‫In this video, we are going to have a look at UI elements and in particular, we are going to have 3 00:00:11,330 --> 00:00:12,380 ‫a look at text. 4 00:00:12,920 --> 00:00:15,680 ‫So I've created a new project. 5 00:00:15,680 --> 00:00:17,540 ‫I call it Pong Basics. 6 00:00:17,870 --> 00:00:21,740 ‫And here I want to create a UI element. 7 00:00:21,740 --> 00:00:27,770 ‫So in the hierarchy view I make, I do right click and then I go to UI. 8 00:00:27,980 --> 00:00:29,390 ‫I have multiple options here. 9 00:00:29,390 --> 00:00:32,960 ‫I have text, image, raw image, button and so forth. 10 00:00:33,110 --> 00:00:35,030 ‫For now, I'm just going to use text. 11 00:00:35,390 --> 00:00:39,980 ‫And as you can see, the new text appears on our screen here at the bottom left. 12 00:00:40,280 --> 00:00:44,390 ‫So if we zoom out to the right position, we will see. 13 00:00:44,390 --> 00:00:46,730 ‫This is where our text currently is. 14 00:00:46,850 --> 00:00:48,080 ‫It's at the bottom left. 15 00:00:48,080 --> 00:00:53,670 ‫So this is the render mode that we have for our canvas, which is screen space overlay. 16 00:00:53,690 --> 00:01:02,600 ‫So what that does, it will overlay whatever we assign to the UI layer or to the UI space here on top 17 00:01:02,600 --> 00:01:05,720 ‫of our game mode or game view itself. 18 00:01:06,140 --> 00:01:13,790 ‫So now no matter what we have in there as our game object, so let's say we add a 3D cube and position 19 00:01:13,790 --> 00:01:16,090 ‫it at 000. 20 00:01:16,100 --> 00:01:17,170 ‫This is where it is. 21 00:01:17,180 --> 00:01:20,960 ‫And as you can see, it's somewhere around here. 22 00:01:20,960 --> 00:01:29,450 ‫So the game mode itself is very tiny in comparison to this huge screen that is or to this huge layer, 23 00:01:29,450 --> 00:01:33,430 ‫which is our UI layer, our canvas, which is put on top of. 24 00:01:33,800 --> 00:01:36,470 ‫So that's what the screen space overlay does. 25 00:01:36,980 --> 00:01:40,940 ‫There are other options for, for example, screen space camera. 26 00:01:40,970 --> 00:01:47,090 ‫What that will do is you need to give it a camera here, render camera, and it will take a different 27 00:01:47,090 --> 00:01:47,660 ‫approach. 28 00:01:47,660 --> 00:01:55,820 ‫So now it's based on where the camera currently is and you have a certain canvas in between the camera 29 00:01:55,820 --> 00:01:56,870 ‫and the play mode. 30 00:01:56,870 --> 00:02:01,580 ‫And it's it's almost like a layer on top, but it's still a slightly different approach. 31 00:02:02,090 --> 00:02:09,620 ‫Then you have world space where you can assign a specific width and height for your canvas and you can 32 00:02:09,620 --> 00:02:12,350 ‫do some additional layer changing and so forth. 33 00:02:13,280 --> 00:02:19,130 ‫We will use the different render modes throughout the course, so no worries there. 34 00:02:19,340 --> 00:02:23,540 ‫You will see those in detail in the next videos or in the next chapters. 35 00:02:23,660 --> 00:02:26,540 ‫I just wanted to quickly show you the different modes. 36 00:02:26,840 --> 00:02:34,040 ‫Now within the canvas we have the text and at the same time we also have created a an event system. 37 00:02:34,040 --> 00:02:40,160 ‫So whenever we create a UI and we didn't have a UI element before, our canvas and event system are 38 00:02:40,160 --> 00:02:42,620 ‫created for us directly, automatically. 39 00:02:43,070 --> 00:02:45,200 ‫And I created a text. 40 00:02:45,200 --> 00:02:52,730 ‫As you can see, it's child of our canvas, so it's inside of our canvas folder and now we can go ahead 41 00:02:52,730 --> 00:02:54,110 ‫and change the text, for example. 42 00:02:54,110 --> 00:02:56,120 ‫So here we had new text. 43 00:02:56,270 --> 00:02:59,180 ‫Let's change that to a plain zero. 44 00:02:59,600 --> 00:03:02,180 ‫And as you can see, we can barely see that zero. 45 00:03:02,210 --> 00:03:05,750 ‫So let's change the font size to, let's say 50. 46 00:03:06,080 --> 00:03:08,500 ‫And now you might say, oh, --, where did it go? 47 00:03:08,510 --> 00:03:09,740 ‫I can't see it anymore. 48 00:03:09,770 --> 00:03:16,340 ‫That has to do with the fact that the height and width don't fit with the font size anymore. 49 00:03:16,340 --> 00:03:18,560 ‫So our text. 50 00:03:19,620 --> 00:03:20,610 ‫Element itself. 51 00:03:20,610 --> 00:03:23,970 ‫Our text UI element has a height of only 30. 52 00:03:24,420 --> 00:03:31,500 ‫So only if I increase it to four, for example 60, I will be able to see my number again on my text 53 00:03:31,500 --> 00:03:31,950 ‫again. 54 00:03:32,430 --> 00:03:39,030 ‫Now let's go back to 30 and say I still want to keep it at 30, but I still want to see my zero, so 55 00:03:39,030 --> 00:03:40,580 ‫how can I solve it otherwise? 56 00:03:40,590 --> 00:03:43,860 ‫What you can do is you can use overflow. 57 00:03:43,860 --> 00:03:52,470 ‫So horizontal overflow and vertical overflow will do so that as you can see, your number will still 58 00:03:52,470 --> 00:03:53,040 ‫appear. 59 00:03:53,070 --> 00:03:55,920 ‫Now, however, it's cut off. 60 00:03:55,920 --> 00:03:58,320 ‫So how do I move my zero? 61 00:03:58,620 --> 00:04:02,520 ‫Well, you can move it from here. 62 00:04:02,520 --> 00:04:05,940 ‫So let's zoom out to the point where we can actually see something. 63 00:04:05,940 --> 00:04:07,760 ‫So you can move it around here. 64 00:04:07,780 --> 00:04:13,080 ‫As you can see with our transform editor here or with our Transform tools. 65 00:04:13,080 --> 00:04:15,810 ‫Now, you can drag it around and you can see where it is. 66 00:04:16,380 --> 00:04:21,690 ‫Another way to change the position of something is, of course, to change, direct, transform here 67 00:04:21,690 --> 00:04:24,420 ‫directly so you can add values here. 68 00:04:24,420 --> 00:04:27,600 ‫So you could say zero zero is the right position for you. 69 00:04:27,630 --> 00:04:29,520 ‫Now the zero is not in the center. 70 00:04:29,520 --> 00:04:30,350 ‫Why is that? 71 00:04:30,360 --> 00:04:35,010 ‫Well, that's because the alignment of our text here is not centered. 72 00:04:35,010 --> 00:04:41,490 ‫So you can align it centrally in both directions and then it will be perfectly centered and you can 73 00:04:41,490 --> 00:04:44,310 ‫still change that by changing the anchor. 74 00:04:44,310 --> 00:04:48,570 ‫So here, for example, now it's an anchor preset to the center. 75 00:04:48,660 --> 00:04:53,580 ‫You could anchor it to the top left, so now let's anchor it to the top left. 76 00:04:53,580 --> 00:04:59,100 ‫As you see, nothing has changed except for the post Y and the Pose X. 77 00:04:59,100 --> 00:05:00,960 ‫So those two values have now changed. 78 00:05:00,960 --> 00:05:08,310 ‫So if we bring those back to zero and zero, you can see that our zero goes back or goes perfectly to 79 00:05:08,310 --> 00:05:11,280 ‫the edge of our top left corner. 80 00:05:12,330 --> 00:05:17,520 ‫Now, of course, we would want to move it a little bit so that we still see the zero. 81 00:05:17,520 --> 00:05:19,380 ‫So let's move it into our game. 82 00:05:19,740 --> 00:05:22,950 ‫Now, Black might be that might not be the right color for you. 83 00:05:22,950 --> 00:05:29,700 ‫If you want to change that, you can go to the color property here and change the color to, for example, 84 00:05:29,700 --> 00:05:33,240 ‫red or white or green or whatever you like. 85 00:05:33,330 --> 00:05:33,900 ‫All right. 86 00:05:34,380 --> 00:05:37,560 ‫So let's take this pink because it's it fits into the blue. 87 00:05:37,590 --> 00:05:38,850 ‫We can see it very well. 88 00:05:39,810 --> 00:05:43,740 ‫And then what you can do is, of course, change the line spacing. 89 00:05:43,740 --> 00:05:49,590 ‫So let's say you have a second line in here. 90 00:05:54,580 --> 00:05:56,290 ‫Then you can change the line spacing. 91 00:05:56,290 --> 00:05:59,770 ‫So let's say you want to have a bigger distance between lines. 92 00:05:59,770 --> 00:06:01,450 ‫So that's the line spacing. 93 00:06:02,590 --> 00:06:04,270 ‫One is totally fine. 94 00:06:04,960 --> 00:06:08,920 ‫And finally, of course, you can change the font any time. 95 00:06:08,920 --> 00:06:12,340 ‫So the standard is A and there are no further fonts. 96 00:06:12,340 --> 00:06:13,090 ‫By default. 97 00:06:13,090 --> 00:06:18,820 ‫You can download fonts either from the asset store or you can import them from wherever you downloaded 98 00:06:18,820 --> 00:06:19,600 ‫them, for example. 99 00:06:19,690 --> 00:06:22,900 ‫So you download them to your machine and then you can import it from there. 100 00:06:23,170 --> 00:06:29,590 ‫But be careful that you don't download fonts that you don't own because some fonts actually cost money 101 00:06:29,620 --> 00:06:30,640 ‫most of the don't. 102 00:06:30,640 --> 00:06:35,680 ‫So just search for free fonts or royalty free fonts and then use those. 103 00:06:36,310 --> 00:06:36,850 ‫All right. 104 00:06:36,850 --> 00:06:39,520 ‫So that's about the font and the text. 105 00:06:39,520 --> 00:06:46,570 ‫And now let's have a look at how we can change that number programmatically in the next video.