WEBVTT 00:00.080 --> 00:00.620 Hello guys. 00:00.620 --> 00:01.640 Welcome to the video. 00:01.640 --> 00:04.130 In this one we're going to set up in game UI. 00:04.130 --> 00:06.920 We only need to have couple of UI elements. 00:06.920 --> 00:13.310 We just want to update the timer and fruit amount on the level and also how many fruits were collected. 00:13.310 --> 00:16.790 So let's go to one of the levels so we can see how it's going to work. 00:16.940 --> 00:23.000 And on the canvas we need to make UI and Text Mesh Pro. 00:23.790 --> 00:25.740 Actually, let's make an image. 00:26.010 --> 00:28.770 This one going to be, uh, timer UI. 00:29.370 --> 00:36.510 And then as a child we're going to make UI Text Mesh Pro, this one going to be timer text. 00:36.510 --> 00:38.640 We want to select the timer text. 00:38.640 --> 00:41.370 Go over here and stretch it. 00:42.240 --> 00:43.860 To the borders of the parent. 00:43.890 --> 00:46.440 Now parent can control the size of the timer. 00:46.440 --> 00:46.980 Text. 00:46.980 --> 00:47.820 Very nice. 00:49.490 --> 00:53.840 Now let's go and make it somewhat transparent and maybe bluish. 00:53.840 --> 00:55.400 I think something like. 00:56.600 --> 00:57.560 This. 00:58.820 --> 01:00.020 I just want to see how it looks. 01:00.020 --> 01:02.480 But later on we're going to make it fully transparent. 01:03.760 --> 01:08.110 Now let's go to Font Asset and let's choose Minecraft SDF. 01:08.320 --> 01:11.230 And also we want to make alignment in the center. 01:12.100 --> 01:14.560 Uh, time are going to look something like this. 01:14.560 --> 01:18.250 Let's say 34 seconds passed since the start of the game. 01:18.760 --> 01:21.580 So we can make font size bigger. 01:23.070 --> 01:25.110 Maybe 64 will work. 01:25.530 --> 01:28.770 Yeah, but the overall size can be smaller. 01:30.360 --> 01:32.550 Something like this should be okay. 01:32.910 --> 01:36.060 Now we can see that text is not entirely in the center. 01:36.060 --> 01:43.110 To fix it, we can take the text box over here and just slightly reduce the size on the Y. 01:43.560 --> 01:44.910 Okay, this looks good. 01:44.940 --> 01:51.480 Now let's take the timer UI, duplicate it, and let's rename this to fruits UI. 01:51.900 --> 01:54.360 I'm going to move it above so I can see everything. 01:54.360 --> 01:57.030 And this one will have information about fruits. 01:57.360 --> 01:59.730 I'm assuming it's going to look something like this. 01:59.730 --> 02:03.270 For example one out of six fruits on the level. 02:03.270 --> 02:06.240 And we could add an icon over here. 02:06.240 --> 02:12.210 So what I'm going to do is I'm going to make this a bit longer for the timer text. 02:12.210 --> 02:14.370 I'm going to reduce it on the right. 02:14.370 --> 02:16.410 So it's like this. 02:16.410 --> 02:19.620 And let's add another UI element image. 02:20.260 --> 02:23.710 I'm going to name it as, uh, Fruit Icon. 02:23.710 --> 02:29.470 Now let's go to graphics item I'm sorry item Fruits. 02:29.470 --> 02:32.860 And we're going to drag the apple icon over here. 02:33.130 --> 02:34.000 Nice. 02:34.000 --> 02:35.920 Now I think we should make it bigger. 02:36.190 --> 02:40.870 And I guess 175 by 175 will be just fine. 02:41.990 --> 02:42.320 Uh. 02:42.320 --> 02:46.310 Now let's press W and move it over here. 02:47.070 --> 02:52.350 Actually, I want to align it in the center and then move it to the right and a bit down like that. 02:52.350 --> 02:53.820 Okay, okay. 02:53.820 --> 02:54.750 Looks good. 02:54.750 --> 02:56.160 Maybe it could be smaller. 02:56.160 --> 02:58.530 Let me try 150 by 150. 02:59.130 --> 03:00.390 Yeah, I like it. 03:01.170 --> 03:02.490 Let it be like that. 03:02.520 --> 03:07.320 Now we want to take both elements and make them transparent on the background. 03:07.870 --> 03:09.310 If you want, you can keep the ground. 03:09.310 --> 03:10.030 Why not? 03:10.270 --> 03:12.670 And then I want to take the timer text. 03:13.770 --> 03:15.720 Attach it to the top left corner. 03:16.080 --> 03:16.680 Sorry. 03:16.680 --> 03:21.090 Timer to the top right and fruits UI to the top left. 03:21.640 --> 03:23.320 Now this looks good enough. 03:23.320 --> 03:26.050 I just want to take these two elements. 03:26.720 --> 03:32.930 And I want to move them down a little bit together like that should be fine, I like it. 03:33.050 --> 03:38.510 Now we need a reference to this text and this text so we can update information on them. 03:39.020 --> 03:40.370 We're going to go here. 03:41.940 --> 03:47.250 And first of all, I want to make this fade effect as a get private set. 03:47.280 --> 03:51.660 This will make it private so it cannot be edited outside of this script. 03:51.660 --> 03:54.150 It cannot be changed, but it will make it public. 03:54.150 --> 03:54.630 To get. 03:54.630 --> 03:58.830 This means other scripts can read information of the fade effect. 03:58.830 --> 04:00.300 They just cannot change it. 04:00.300 --> 04:04.590 Basically, it's like doing read only set up for this variable. 04:04.590 --> 04:06.120 From the outside of the script. 04:06.120 --> 04:09.330 We can only read this information inside of the script. 04:09.330 --> 04:14.760 We can edit this information and thanks to that it will not be visible over here in the inspector. 04:14.760 --> 04:17.610 And still it will be available to other scripts. 04:17.880 --> 04:18.720 Nice. 04:19.700 --> 04:21.980 This is actually a good practice to do it like that. 04:22.700 --> 04:31.160 Now we need serialize field, private text mesh, pro GUI, timer, text. 04:31.160 --> 04:36.620 And also we want to have serialized field private text mesh Progue root text. 04:37.190 --> 04:41.870 Now I want to make two public methods that we can call to update values on this text. 04:41.900 --> 04:46.700 One of them will be public void update root UI. 04:47.930 --> 04:54.170 And here we're going to pass int collected routes and int total fruits. 04:54.170 --> 04:58.640 And then inside we're going to do route text dot text. 04:59.900 --> 05:05.720 Equals to collected fruits plus slash in quotation marks. 05:06.630 --> 05:08.340 Plus total fruits. 05:08.580 --> 05:09.480 Nice. 05:09.480 --> 05:11.190 And we need one more method. 05:11.930 --> 05:15.920 Public void update timer UI. 05:15.920 --> 05:19.250 And here we're going to just pass the float timer. 05:19.250 --> 05:21.530 And then we're going to take timer text. 05:21.860 --> 05:23.840 Dot text equals to timer. 05:23.840 --> 05:27.140 And we're going to convert uh number to a text. 05:27.140 --> 05:28.580 So we're going to do two string. 05:29.030 --> 05:29.870 Nice. 05:29.870 --> 05:32.180 Now let's go ahead and use these two methods. 05:32.180 --> 05:35.570 And then I'm going to show you how to improve it a little bit more okay. 05:35.780 --> 05:42.290 On the game manager whenever we pick up fruit we can open curly brackets here. 05:45.180 --> 05:51.930 And we can do UI in game instance update route UI. 05:55.650 --> 06:00.000 Then we're going to give it, uh, fruits collected and total fruits. 06:00.330 --> 06:00.990 Nice. 06:00.990 --> 06:06.570 We also want to call this method once when we collecting fruits info. 06:07.490 --> 06:10.190 So I'm going to go here to the collect fruits info. 06:10.190 --> 06:12.590 And I'm going to paste this line of code here. 06:13.630 --> 06:14.470 All right. 06:14.620 --> 06:15.820 Are we good with the fruits? 06:15.850 --> 06:19.150 Now let's use the timer on the timer. 06:19.150 --> 06:21.700 We just want to make a variable. 06:21.700 --> 06:23.560 I'm going to make serialize field. 06:23.560 --> 06:25.690 Private float. 06:26.510 --> 06:28.400 Level timer. 06:28.730 --> 06:30.920 And maybe let's put it into level management. 06:30.920 --> 06:31.550 Why not? 06:33.220 --> 06:37.510 And now we're going to go and open update. 06:38.550 --> 06:42.690 And in the update we're going to do level timer equals to time dot time. 06:42.690 --> 06:48.840 As you might remember, time to time returns time in seconds since the start of the application. 06:48.840 --> 06:55.920 So let's just uh do UI in game dot instance, update timer UI. 06:55.920 --> 06:57.930 And we're going to pass a level timer here. 06:57.930 --> 07:00.780 And let's just see what is happening when we're doing it like that. 07:01.050 --> 07:02.040 Let's go. 07:04.520 --> 07:06.590 Uh, we have variables here. 07:06.590 --> 07:08.750 We need to assign them timeaa text. 07:09.940 --> 07:12.070 And this one is sorry. 07:12.070 --> 07:13.420 Root text. 07:15.520 --> 07:16.720 And fruit text. 07:16.720 --> 07:18.160 Let's go to play mode. 07:19.080 --> 07:24.480 Now we can see fruits are working fine and we can collect the fruits, so it's all good. 07:24.480 --> 07:28.650 But we can see glitch with the timer over here. 07:28.650 --> 07:34.860 That happens just because we take in the row number and passing it to the text to fix it. 07:34.860 --> 07:43.320 To make it displayed only in seconds, we can go back to the UI in game, and over here in a parenthesis 07:43.350 --> 07:44.430 we're going to type. 07:45.890 --> 07:48.080 Quotation marks zero zero. 07:48.080 --> 07:51.260 So this is the way of formatting the text. 07:51.260 --> 07:54.470 And it's not like I magically know this info. 07:54.470 --> 07:57.140 To be very honest, I never remember any of this. 07:57.140 --> 08:02.900 And whenever I need to do some type of formatting for the text, I just basically look it up online 08:02.900 --> 08:03.890 and then I use it. 08:03.890 --> 08:05.120 Simple as that. 08:05.120 --> 08:08.600 So I know that this one does the seconds right. 08:08.600 --> 08:14.300 Then we can just do plus space S, so it's a bit prettier and more understandable. 08:14.630 --> 08:16.880 And now let's go back and see this again. 08:22.790 --> 08:24.470 And this works perfectly fine. 08:24.470 --> 08:28.040 Now we can see only seconds and I like it a lot. 08:31.010 --> 08:38.180 Now we need to go and set up these for other levels, and I think it would be better to go to Asset 08:38.360 --> 08:40.580 Prefabs UI. 08:41.650 --> 08:48.040 Let's rename this to UI in game and we're going to drag it here. 08:48.160 --> 08:49.750 So wait a second, wait a second. 08:49.750 --> 08:53.410 We need to take fade image and we need to put it all the way below. 08:53.590 --> 08:54.220 Yeah. 08:54.220 --> 08:57.070 Now we can drag it here as a prefab. 08:57.810 --> 09:00.240 And then we can go to another scene. 09:00.900 --> 09:01.800 Level two. 09:01.830 --> 09:03.030 Let's save it. 09:03.030 --> 09:03.990 It's okay. 09:03.990 --> 09:04.200 Wait. 09:04.200 --> 09:06.000 There is a null reference exception. 09:06.360 --> 09:07.140 What's that? 09:08.010 --> 09:08.910 Or it was before. 09:08.910 --> 09:09.510 Okay. 09:10.660 --> 09:12.370 Let's go to level two. 09:12.700 --> 09:14.980 Save it and we can take. 09:15.870 --> 09:18.810 Prefab UI UI in game. 09:18.810 --> 09:19.950 Let's drag it here. 09:19.950 --> 09:24.990 Now I can remove the canvas that I had here before and this will be just fine. 09:25.050 --> 09:26.760 Now let's go to another scene. 09:27.680 --> 09:28.550 Level three. 09:30.000 --> 09:35.790 Um, prefab UI and I'm going to drag UI in game here and I'm going to delete the canvas. 09:36.270 --> 09:37.620 Now it all should be good. 09:37.620 --> 09:41.070 And also it will allow you to change something altogether on. 09:44.720 --> 09:45.020 Now. 09:45.020 --> 09:47.240 It should be good for all of the levels we have. 09:47.240 --> 09:52.280 And also if you change something in one UI, you can just apply overrides and it's going to be fine 09:52.280 --> 09:54.050 for all of the levels. 09:54.080 --> 09:59.630 Let's go to level one and let's run the levels and see if it works just fine. 10:01.590 --> 10:06.270 Now there is actually something that will be wrong with this, but I want to show it to you first. 10:07.750 --> 10:13.570 So as you can see, we jumped to the next level and timer is the same as it was in the first level. 10:13.600 --> 10:20.170 This happens because time to time shows you the time since start of the application, not since start 10:20.170 --> 10:20.950 of the level. 10:20.950 --> 10:23.320 So we need to go to the game manager. 10:23.320 --> 10:29.320 And over here in the update, instead of doing equals time dot time we're going to do plus equals time 10:29.320 --> 10:30.220 dot delta time. 10:30.220 --> 10:34.870 You know that delta time returns interval in seconds from the last frame to the current one. 10:34.870 --> 10:37.360 So basically this can be used as a timer for us. 10:37.360 --> 10:43.090 Now since we use an UI in game a couple of times in this script I want to make a variable for this. 10:43.990 --> 10:52.660 I'm going to do private UI in game UI in game UI like that, and then I'm going to go to the start. 10:54.270 --> 11:00.780 And in the start I want to do in game UI equals to UI in game dot instance. 11:04.560 --> 11:09.270 And we're doing this in the start, not in the awake, because we assign an instance in the awake. 11:09.720 --> 11:14.100 Okay, now let's go here and change it to in game UI. 11:18.110 --> 11:20.540 Over here as well in game UI. 11:20.750 --> 11:22.790 And somewhere here we have it. 11:22.790 --> 11:24.890 Yeah, in game UI. 11:24.920 --> 11:26.090 Okay, this is good. 11:26.090 --> 11:31.310 Let me save it and let's go and see the situation. 11:31.610 --> 11:32.120 Right. 11:32.120 --> 11:33.050 We're going to start the game. 11:33.050 --> 11:34.640 I'm going to run a couple of levels. 11:34.880 --> 11:39.710 We're going to see that we have pretty a nice UI that has most important information. 11:39.710 --> 11:41.750 What what happened there. 11:43.010 --> 11:45.530 Hey, man, what's up with you? 11:53.380 --> 11:54.790 You are in game. 11:59.110 --> 12:01.990 Do we not awake instance equals to this? 12:03.870 --> 12:06.990 In game UI equals to UI in game instance. 12:07.020 --> 12:08.070 Okay, I don't know what happened. 12:08.070 --> 12:09.150 Let me try again. 12:16.190 --> 12:17.150 What's wrong? 12:28.090 --> 12:29.680 Oh, I know what's wrong. 12:29.680 --> 12:38.530 We need to, uh, get in game UI before we collect fruits info, because collect fruit info gets in 12:38.530 --> 12:39.400 game UI here. 12:39.400 --> 12:43.180 So this one is supposed to be somewhere in the beginning like that. 12:44.340 --> 12:47.310 Okay, let's save it and let's go back and try this again. 12:52.060 --> 12:57.670 So as I was saying, we have nice and pretty UI that has most important information timer and fruits 12:57.670 --> 12:58.300 collected. 12:58.330 --> 13:02.950 I'm not going to make any health points because I'm planning to have fruits as my health. 13:02.950 --> 13:06.130 And if you want to use health points, it's actually very easy to do. 13:06.160 --> 13:09.520 You just need to deduct, you know, health points and not fruits. 13:09.520 --> 13:12.970 But the logic will be pretty much the same as I will have with the fruits. 13:12.970 --> 13:15.430 So yeah, if you want you can use health points. 13:16.150 --> 13:19.480 Uh well that's good for this video and I'll see you in the next one.