WEBVTT 00:00.000 --> 00:00.450 Hello guys. 00:00.450 --> 00:01.470 Welcome to the video. 00:01.470 --> 00:05.040 In this one I want to show you how to make a simple button. 00:05.040 --> 00:07.530 That's just what we need to start the game. 00:07.530 --> 00:09.780 And that's the only thing we want to do in this video. 00:09.780 --> 00:13.200 But we need a font so we can make this button pretty. 00:13.200 --> 00:17.580 Because of that, we're going to import the font I attached to this lecture. 00:17.580 --> 00:18.870 It is pixelated font. 00:18.870 --> 00:21.060 It is named as Minecraft. 00:22.850 --> 00:24.290 Let's just go to assets. 00:24.290 --> 00:25.610 Drag it here. 00:26.300 --> 00:27.560 I'm just going to. 00:28.180 --> 00:29.410 Go ahead click. 00:29.500 --> 00:35.890 Actually we need to go to Window Text Mesh Pro Font Asset Creator because this is just a font. 00:35.890 --> 00:38.410 But we cannot use it inside of unity to make it work. 00:38.410 --> 00:41.620 Inside of unity we need to create assets with this font. 00:41.650 --> 00:44.350 Let's click import tmp essentials. 00:46.720 --> 00:48.010 Okay, good. 00:48.040 --> 00:53.440 Now let's close this, and let's take this font over here and drag it to the source font. 00:53.860 --> 00:58.030 Now we want to just click Generate Font Atlas. 00:59.840 --> 01:02.090 Ah, it keep popping up, I hate it. 01:02.090 --> 01:03.710 Let's click save. 01:04.420 --> 01:08.860 And here I want to go to graphics or actually we have TM Pro folder. 01:08.860 --> 01:13.900 Here we have okay let's go inside of this folder once and we're going to save it here. 01:14.290 --> 01:14.830 Nice. 01:14.830 --> 01:18.640 Now let's take this to oh man I'm just going to close it. 01:18.640 --> 01:22.090 Let's go and drag this to the Text Mesh Pro like that. 01:22.090 --> 01:25.240 And here I'm going to drag it to the fonts folder like that. 01:25.240 --> 01:28.390 Now it is nice and pretty over here and we can use it. 01:28.540 --> 01:30.430 Now let's make a button. 01:31.190 --> 01:32.180 To make a button. 01:32.180 --> 01:34.130 First you need to make canvas. 01:34.340 --> 01:35.390 I'm going to make. 01:36.240 --> 01:37.200 Uh, UI. 01:37.900 --> 01:43.660 Canvas and canvas is what is used to, you know, set up UI for an entire game. 01:43.660 --> 01:47.260 Either you want to have buttons, health bar, everything done under the canvas. 01:47.260 --> 01:50.080 Also, this event system over here is very important. 01:50.080 --> 01:51.850 Do not delete this object. 01:51.850 --> 01:58.330 Okay, now let's go to canvas and first thing we want to do is to change UI scale mode to scale with 01:58.330 --> 01:59.530 the screen size. 01:59.530 --> 02:06.850 To explain why, I'm going to quickly make UI button text Mesh Pro and I'm going to explain how buttons 02:06.850 --> 02:07.420 are working. 02:07.420 --> 02:10.510 This is just for explaining the scale of a canvas. 02:10.750 --> 02:20.260 Now let's just click here by holding Alt and Shift, and let's make this button big like 500 by 500. 02:21.380 --> 02:25.340 Now because this canvas is not scaled with the screen size. 02:25.340 --> 02:29.960 If you change resolution, for example, to 4K, this button going to be smaller. 02:29.960 --> 02:35.630 If you change resolution to something lower or three aspect and drag it like so, you can see button 02:35.630 --> 02:38.270 is not changing itself and that is the problem. 02:38.270 --> 02:43.640 But if you go ahead and choose UI scale, mode, scale with the screen size. 02:43.640 --> 02:47.780 Now this button will always be, uh, fit. 02:48.610 --> 02:50.050 Let me just make it smaller. 02:50.050 --> 02:51.130 It's real big. 02:51.160 --> 02:53.200 Like 120 by 120. 02:53.200 --> 02:53.710 Okay. 02:54.510 --> 02:58.170 So now, no matter what size of a screen you have, it's a big monitor. 02:58.170 --> 03:00.150 It's a mobile phone, anything like that. 03:00.150 --> 03:03.840 The button will always stay at the same size. 03:04.890 --> 03:06.180 And that is what we need, right? 03:06.180 --> 03:12.240 You can see I'm changing resolution and button is the same to an opposite of what was when we had. 03:14.090 --> 03:17.090 Uh, constant or what was that constant pixel size? 03:17.090 --> 03:19.460 Now you can see but on smaller bigger. 03:19.460 --> 03:23.060 But if we change it to scale with the screen size it will stay the same. 03:23.060 --> 03:23.750 Nice. 03:23.750 --> 03:30.860 Also, let's set reference resolution to 1920 by 1080 and we don't need to do anything else for now. 03:30.860 --> 03:31.910 This is just good. 03:33.000 --> 03:34.590 Now I'm going to delete the button. 03:34.950 --> 03:38.220 I'm going to scale out a bit. 03:38.640 --> 03:39.210 I'll wait. 03:39.210 --> 03:39.750 How it was. 03:39.750 --> 03:41.730 It was like that right I forgot. 03:41.730 --> 03:42.270 Yeah. 03:42.270 --> 03:44.190 And now we need to create a button. 03:44.190 --> 03:48.390 We're going to focus on canvas because this is the entire canvas you have. 03:48.390 --> 03:50.130 And this is the center of it. 03:52.150 --> 03:53.200 Over here. 03:53.200 --> 03:57.730 You only have corner of the canvas and it's not representing what you see in the game. 03:58.970 --> 04:02.180 This canvas represents what you see in the game. 04:02.420 --> 04:04.670 Now let's go ahead and just. 04:05.760 --> 04:07.170 Click create button. 04:07.750 --> 04:10.540 UI button text Mesh Pro. 04:11.980 --> 04:13.480 Now we have a button. 04:13.600 --> 04:19.300 And over here, first thing I want to do is to attach it to the center of the screen. 04:19.300 --> 04:27.010 You can do that by clicking here and setting pivot point and also setting position to the center of 04:27.010 --> 04:27.550 the screen. 04:27.550 --> 04:31.960 You can do that by holding shift alt and click in the center. 04:31.960 --> 04:34.240 Now this button will be always in the center. 04:34.240 --> 04:37.570 Even if you change something, it will be attached to the center. 04:37.720 --> 04:41.140 Later on we're going to attach things to left and right, but as of now, let's just keep it in the 04:41.140 --> 04:41.710 middle. 04:41.920 --> 04:44.260 Also, I want to increase this button in size. 04:44.260 --> 04:47.590 We can focus on the button and click T. 04:48.460 --> 04:49.930 To stretch the button. 04:53.170 --> 04:56.020 I think it should be something like this. 04:56.020 --> 04:56.710 Should do. 04:56.740 --> 04:58.330 Yeah, this is fine. 04:58.510 --> 05:01.570 Now let's go ahead to the Text Mesh Pro over here. 05:01.570 --> 05:05.710 And let's change font asset to Minecraft Asdf. 05:06.400 --> 05:11.110 Now font is pixelated and next step would be to make it white. 05:12.930 --> 05:13.950 Let's make it white. 05:13.980 --> 05:16.020 Now we cannot see it because of the background. 05:16.020 --> 05:18.300 And we can go to the button itself. 05:18.900 --> 05:22.860 Go to image and change color to something bluish. 05:23.810 --> 05:24.710 Wait a second. 05:24.710 --> 05:25.970 Something like. 05:26.970 --> 05:27.870 This. 05:27.870 --> 05:28.920 And let's just. 05:30.150 --> 05:31.950 Make it transparent. 05:32.810 --> 05:35.270 Just so we have some background, but it's not that important. 05:35.270 --> 05:37.340 We can even, like, remove it. 05:37.340 --> 05:37.790 Totally. 05:37.790 --> 05:38.480 It's fine. 05:38.990 --> 05:40.400 Now let's go back to text. 05:40.400 --> 05:43.160 We can see the text, but we can see this kind of small. 05:43.160 --> 05:45.920 One of the options would be to check auto size. 05:45.920 --> 05:50.120 And then it will take the shape of the button and it will adjust the font size. 05:50.120 --> 05:54.050 So text will be fit into the uh size of the button. 05:54.050 --> 05:57.140 For example, this is going to say new game. 05:57.770 --> 06:00.020 And also it's a bit difficult to read now. 06:00.020 --> 06:03.320 So what I want to do here is to go all the way down. 06:05.460 --> 06:09.090 And add this dilate to the face of the text. 06:09.090 --> 06:10.620 Let's make it one. 06:10.770 --> 06:15.990 Now it is a bit difficult to read, but it's okay because we're going to go to outline and change thickness 06:15.990 --> 06:17.100 to one. 06:17.400 --> 06:19.290 And now it is crispy, nice. 06:19.290 --> 06:22.260 It is easy to read and still it looks pixelated. 06:22.260 --> 06:23.370 I kind of like it. 06:23.370 --> 06:27.120 If you wanted to have differently, just play with the variables over here. 06:27.120 --> 06:30.930 Try to adjust to what you want to have and maybe even use different font. 06:30.930 --> 06:31.800 That's fine. 06:32.130 --> 06:37.800 Now I can see my text is not entirely in the middle, even though I did align things over here. 06:37.800 --> 06:39.870 So I'm going to select Text Mesh Pro. 06:39.870 --> 06:44.760 And here I can define the size of a text box, not the button itself but text box. 06:44.760 --> 06:48.120 And I'm just going to reduce it slightly from the top. 06:48.510 --> 06:51.810 But I want this to be always in the center of the object. 06:51.810 --> 06:54.210 So I'm going to go ahead over here. 06:54.210 --> 06:55.380 Oh it's stretched okay. 06:55.380 --> 06:55.860 It's fine. 06:55.860 --> 06:58.560 We're going to use this more during the creation of UI. 06:58.560 --> 06:59.250 So no worries. 06:59.250 --> 07:00.660 There is no doubt you will understand. 07:00.660 --> 07:02.610 How does it work as of now. 07:02.610 --> 07:03.690 Let's leave it at that. 07:03.690 --> 07:04.740 I think this is good. 07:04.740 --> 07:07.560 Let's rename this to New Game. 07:09.340 --> 07:13.090 And now we can make this button work. 07:13.090 --> 07:15.970 As of now, even just like that, it is clickable. 07:15.970 --> 07:21.370 You can click on the button, you can see it's flashing a bit, but it does not do anything to make 07:21.370 --> 07:22.300 it do something. 07:22.300 --> 07:28.270 We need to use a script so we can go to scripts and let's make. 07:29.130 --> 07:30.120 Script. 07:30.120 --> 07:31.260 It's going to be UI. 07:31.290 --> 07:33.330 Main menu. 07:37.070 --> 07:41.120 Now let's take the canvas and drag the script on the game object. 07:41.120 --> 07:43.640 And inside of this we need to do something. 07:43.640 --> 07:48.320 We just need to make one simple method that will start the playable scene we have. 07:49.840 --> 07:56.860 First of all, we want to have a public stream scene name is going to be the text that has name of the 07:56.860 --> 08:03.580 scene we're going to use and we need using Unity Engine scene management here. 08:03.940 --> 08:08.560 Now we can make a public void new game. 08:08.800 --> 08:10.510 And this method will do this. 08:11.320 --> 08:15.820 Scene manager load scene with a name of a scene name. 08:15.820 --> 08:16.780 Just like that. 08:16.810 --> 08:18.700 Now let's go back to unity. 08:24.040 --> 08:26.020 You can see it has seen name over here. 08:26.020 --> 08:28.300 We can go to asset scenes. 08:28.300 --> 08:29.560 Take the name of a scene. 08:29.560 --> 08:31.300 I'm just going to copy it. 08:31.600 --> 08:34.330 Go to canvas and paste this in here. 08:34.330 --> 08:36.610 Now we can go to New Game. 08:36.610 --> 08:39.460 And here you can choose what will happen on click. 08:39.460 --> 08:44.560 Let's just click plus drag canvas then go here. 08:44.560 --> 08:46.330 Find the script you want to use. 08:46.330 --> 08:48.310 Then find the method you want to use. 08:48.310 --> 08:50.140 And this will be new game. 08:50.260 --> 08:52.060 Now when we go to play mode. 08:54.110 --> 08:56.630 You'll see there is nothing here except the button. 08:56.630 --> 09:01.820 And if you click this button, you go to the main scene and you can play the game. 09:03.250 --> 09:03.940 Yay! 09:03.940 --> 09:04.750 Very good. 09:04.750 --> 09:06.370 I like it a lot. 09:06.370 --> 09:07.870 So that's the button. 09:07.870 --> 09:09.310 That's how you create buttons. 09:09.310 --> 09:10.600 Very simple thing to do. 09:10.600 --> 09:11.440 Very easy one. 09:11.440 --> 09:12.970 And let's go to next video. 09:12.970 --> 09:16.540 We're going to develop more of like buttons and UI elements. 09:16.540 --> 09:17.320 I'll see you there.