WEBVTT 00:00.080 --> 00:00.590 Hello guys. 00:00.590 --> 00:01.670 Welcome to the video. 00:01.670 --> 00:04.430 So we already have a main menu scene. 00:04.430 --> 00:06.350 We have the game scene. 00:06.350 --> 00:10.370 And in this one I want to show you how to make the end scene. 00:10.370 --> 00:11.990 It's going to be very simple one. 00:11.990 --> 00:13.370 We're just going to show some credits. 00:13.370 --> 00:15.050 We're going to roll the text and that's it. 00:15.050 --> 00:17.090 It's going to be simple but effective. 00:17.090 --> 00:21.260 And if you want to add some more graphics there you can easily do that, especially once we're done 00:21.260 --> 00:22.160 with the UI section. 00:22.160 --> 00:26.690 You're going to know enough information to do any upgrades that you want to have. 00:26.690 --> 00:28.910 So as of now let's start with simple. 00:28.910 --> 00:33.590 Let's make a prefab for this background so we can use it in another scene. 00:34.160 --> 00:38.600 Uh we're just going to go to prefabs drag it here like so. 00:38.600 --> 00:42.290 Now you can see that this background says none in the material. 00:42.290 --> 00:45.620 And if you drag it to the scene again it's going to be purple like that. 00:45.620 --> 00:52.610 So what we need to do is to select the background, lock it, go to Asset Materials and drag this background 00:52.610 --> 00:53.750 material here. 00:53.750 --> 00:54.680 Just like that. 00:55.220 --> 00:55.850 Nice. 00:55.850 --> 00:57.350 Now we can unlock it. 00:57.350 --> 01:01.970 And every time you use a background it's going to have this yellow background by default. 01:01.970 --> 01:06.080 And then if you want to change it you can choose color and click Update Background. 01:06.080 --> 01:08.090 And it's going to change it okay. 01:10.140 --> 01:11.280 Um, yeah. 01:11.280 --> 01:15.780 There is also an error with the material over here. 01:15.780 --> 01:19.740 We can easily fix it, but actually it's not that important I guess. 01:19.860 --> 01:26.520 But if you want to fix it, just do mesh shared material, dot main texture and we're going to save 01:26.520 --> 01:26.970 it. 01:26.970 --> 01:28.530 Now we can go back. 01:30.870 --> 01:38.430 And if you change color to something else, let's say blue and update again, we'll be fine. 01:41.880 --> 01:43.890 Okay, now let's delete it from here. 01:43.890 --> 01:49.410 And let's go to asset scenes and let's make a new scene. 01:50.440 --> 01:52.330 Uh, going to be seen. 01:52.360 --> 01:54.850 Seen the end? 01:54.850 --> 01:55.930 Just like that. 01:59.020 --> 02:01.030 Now we can go inside of this scene. 02:01.060 --> 02:02.440 Let's save it. 02:05.750 --> 02:07.790 We can go to asset prefabs. 02:07.790 --> 02:11.120 Let's take a background, drag it in the middle like so. 02:11.180 --> 02:12.950 I want to have green color. 02:12.950 --> 02:15.380 So I'm going to do green update. 02:15.970 --> 02:20.470 And I want this background to be a little bit darker and also further away. 02:20.470 --> 02:25.210 So I'm going to go to main camera, choose size 7.5. 02:25.300 --> 02:28.270 And I'm going to go to background itself and click. 02:29.210 --> 02:31.940 2D sprite square. 02:32.450 --> 02:34.880 So now it will take entire space of the object. 02:34.880 --> 02:42.470 And over here we can just choose black color and make it transparent to something like 40. 02:42.500 --> 02:44.990 So it's a bit darker than usually we have. 02:47.820 --> 02:49.950 Now let's go and make a canvas. 02:49.980 --> 02:51.030 UI. 02:51.030 --> 02:52.020 Canvas. 02:54.130 --> 02:59.710 And inside of this canvas, I want to make an empty object and I'm going to call credits. 03:00.770 --> 03:07.520 Inside of the credits, we're going to make UI text, mesh Pro text, and this text will say anything 03:07.520 --> 03:08.540 that you want. 03:08.870 --> 03:17.240 Uh, for example, let's go and do Minecraft as the font first, and let's try to increase the size. 03:18.520 --> 03:24.850 I'm going to try 60 by 100, and we need to align text in the center. 03:24.850 --> 03:27.250 And this text definitely could be bigger. 03:27.250 --> 03:29.860 So I'm going to increase size to something like. 03:30.390 --> 03:33.090 This and I'm going to write here D. 03:33.090 --> 03:34.950 And just like that. 03:35.490 --> 03:37.590 Now I want to have another text element. 03:37.590 --> 03:45.300 So let's add one more and we're going to just take it, move it down and change text to something else 03:45.300 --> 03:49.290 created by Alex, something like that. 03:49.290 --> 03:54.330 I think I'm going to stretch the text box or actually let's take the element and stretch the entire 03:54.330 --> 03:55.110 element. 03:57.400 --> 03:59.290 From this one font could be smaller. 03:59.290 --> 04:03.190 So I'm going to reduce font size to something like 60. 04:03.190 --> 04:08.590 And we can make another element, drag it down and write something else. 04:12.540 --> 04:13.980 Uh, for example. 04:15.110 --> 04:16.610 Visit unity. 04:16.610 --> 04:18.020 Alex Dave.com. 04:18.850 --> 04:19.990 Yeah, I have a website. 04:19.990 --> 04:21.190 I can put a website here. 04:21.190 --> 04:21.910 Why not? 04:22.450 --> 04:25.720 And now there is something else I want to tell you. 04:25.720 --> 04:26.920 As of now, you can see. 04:26.920 --> 04:28.720 Actually, let me make one more. 04:28.720 --> 04:32.140 I'm going to write something like thank you. 04:32.620 --> 04:34.630 And yeah this is good for elements. 04:34.630 --> 04:35.440 Should be okay. 04:35.470 --> 04:36.550 Now wait a second. 04:36.550 --> 04:40.630 I want to write something else to learn how to make games. 04:40.630 --> 04:41.110 All right. 04:41.110 --> 04:42.550 This is good I like it. 04:42.550 --> 04:47.800 And then I'm going to put one more, drag it down and say thank you. 04:47.800 --> 04:48.520 All right. 04:48.520 --> 04:54.490 So you probably noticed how irritating it was to move object down every time we create a new one. 04:54.490 --> 04:58.900 Plus to that, they have an even space between them. 04:58.900 --> 05:03.040 And I really need to check the space between them to align them properly. 05:03.040 --> 05:04.630 And I don't want to do that manually. 05:04.630 --> 05:06.730 That takes lots of time and energy. 05:06.730 --> 05:10.570 Luckily for us, unity has a component that will do it for us. 05:10.570 --> 05:17.530 Let's go to credits and let's make I mean add component vertical layout group. 05:17.530 --> 05:19.270 Let's click enter. 05:19.270 --> 05:23.560 And now you'll see all of the elements are aligned automatically. 05:23.560 --> 05:28.330 We only need to change child alignment from upper left to middle center. 05:28.330 --> 05:33.160 And if you want to have more space in between them, you can increase spacing value over here. 05:33.850 --> 05:35.740 Uh, for example, let's do. 05:36.450 --> 05:37.290 60. 05:37.440 --> 05:39.030 Okay, this looks good to me. 05:40.110 --> 05:44.340 Now let's go ahead and we're going to talk about similar components later on. 05:44.340 --> 05:47.670 Once we create level selection they're going to be layout group. 05:47.670 --> 05:50.280 And I'm going to talk more on how to use them. 05:50.280 --> 05:53.190 As of now let's just do simple setup like you see on the screen. 05:53.190 --> 05:58.770 Now let's go ahead and align the credits element to the bottom middle like that. 05:58.770 --> 06:00.960 And I'm going to move it a little bit below. 06:01.320 --> 06:02.610 All right this is good. 06:02.610 --> 06:05.790 Now we need a script that will move this text up. 06:06.510 --> 06:11.880 I'm going to go to Asset Scripts and let's make a new Monobehaviour script. 06:12.330 --> 06:13.230 Hey where is it. 06:13.950 --> 06:14.490 Come on. 06:15.050 --> 06:15.710 Yeah. 06:15.740 --> 06:17.960 UI credits. 06:20.650 --> 06:21.580 Very good. 06:21.580 --> 06:24.340 Now we're going to find the script UI credits. 06:24.610 --> 06:26.650 And over here we need to do something simple. 06:26.650 --> 06:27.550 We're going to need. 06:27.760 --> 06:28.270 Um. 06:28.450 --> 06:29.140 Let's do. 06:30.430 --> 06:34.150 Generalize field private rect transform. 06:34.150 --> 06:41.440 I'm going to name it as just rect t, and then I'm going to have serialized field private float speed. 06:41.440 --> 06:44.020 And let's make it as 200 by default. 06:45.840 --> 06:47.310 Then we're going to open up the gate. 06:47.310 --> 06:50.040 And in the update we're going to do react to. 06:52.170 --> 06:55.200 Dot anchored position plus equals. 06:55.200 --> 06:58.560 And we need a value to move this object up. 06:58.560 --> 07:02.220 So we're going to do vector two dot up multiply by speed. 07:02.220 --> 07:05.670 Maybe let's change it to a scroll speed. 07:05.670 --> 07:06.240 Yeah. 07:06.240 --> 07:09.090 And multiply by time dot delta time. 07:09.510 --> 07:10.230 Very nice. 07:10.230 --> 07:11.550 Now I'm going to save it. 07:11.550 --> 07:13.770 And let's go back to unity. 07:18.630 --> 07:20.340 Drag this on the object. 07:22.020 --> 07:26.520 And let's assign React Transform over here and go to play mode. 07:28.480 --> 07:31.810 And you can see when we start in the scene, we have credits. 07:32.440 --> 07:34.270 Very cool, I like it. 07:35.960 --> 07:36.740 Very nice. 07:36.740 --> 07:39.560 Now let's go ahead and save the scene. 07:40.180 --> 07:45.850 And then we're going to go and enable this scene when we reach in the final point on the level. 07:46.360 --> 07:51.070 Uh, before that, we need to go to File build profiles. 07:51.070 --> 07:53.080 Here we have scene list. 07:53.200 --> 07:56.800 And over here we need to add all of the scenes we used in the project. 07:56.800 --> 07:59.020 So let's go to asset scene. 07:59.110 --> 08:03.430 Let's choose main Scene and place it over here at first. 08:03.430 --> 08:09.010 So this is going to be run first if you build the project and then the end over here. 08:09.010 --> 08:11.860 So now they are in a scene build and they can be used. 08:13.800 --> 08:16.050 Next step would be to close this window. 08:16.260 --> 08:20.760 Let's go to, um, sample scene or I'm sorry, sample scene. 08:22.040 --> 08:27.380 And we need method on the game manager that we can call from the finish point. 08:27.920 --> 08:30.980 Let's go to game Manager somewhere below. 08:31.010 --> 08:32.360 I'm going to make a method. 08:32.630 --> 08:33.710 Public void. 08:34.500 --> 08:39.840 Um, load the end scene and it will do something simple. 08:39.840 --> 08:46.650 Scene manager load the scene with the name D, and that's the name we have in the asset folder. 08:48.950 --> 08:50.300 Okay, this is good. 08:50.300 --> 08:52.130 Now let's go to finish point. 08:54.220 --> 08:59.830 And over here I'm going to just do Game Manager dot instance. 09:00.550 --> 09:03.850 I'll load the end scene just like that. 09:03.880 --> 09:06.070 Now it's going to load the scene immediately. 09:06.070 --> 09:10.360 And I would like to do it with a delay, but I'm going to show you how to load it with a delay in the 09:10.360 --> 09:13.420 next video once we make fade in and fade out effect. 09:13.630 --> 09:14.200 All right. 09:14.200 --> 09:16.120 As of now, let's just load it immediately. 09:16.120 --> 09:17.590 Let's go back to. 09:18.780 --> 09:19.710 Unity. 09:19.710 --> 09:23.250 And I'm going to go to asset scenes main menu. 09:23.250 --> 09:26.160 And I'm going to run entire sequence from start to finish. 09:26.160 --> 09:27.540 Let's go new game. 09:27.540 --> 09:28.530 We are here. 09:28.530 --> 09:35.340 Then I'm going to jump into this, uh, finish point and game is finished and we have the end message. 09:35.340 --> 09:35.940 Cool. 09:35.940 --> 09:42.030 Now I want to be able to skip this scene and jump back to main menu once I've seen them or something 09:42.030 --> 09:42.690 like that. 09:42.690 --> 09:45.060 We can do that easily by going to. 09:47.390 --> 09:49.220 The end over here. 09:49.220 --> 09:52.610 And let's make a button, an invisible button. 09:52.610 --> 09:55.460 We're going to make a UI button. 09:55.460 --> 09:57.830 Text mesh Pro we're going to stretch it. 09:59.420 --> 10:00.560 Like that. 10:00.800 --> 10:03.110 Then we're going to remove text from here. 10:05.280 --> 10:11.280 And we're going to make it transparent, but it will be clickable and we just need the event. 10:11.550 --> 10:14.730 Uh, that would run the main menu scene if we want to. 10:15.440 --> 10:18.950 Or speed up the text, and then it would go to main menu. 10:20.270 --> 10:22.040 How can we do this? 10:22.370 --> 10:23.300 Uh, first. 10:23.300 --> 10:24.440 Maybe. 10:25.670 --> 10:27.710 Maybe we can take this component. 10:29.130 --> 10:30.210 Let's take it. 10:30.510 --> 10:36.720 Paste this component into canvas as new and I'm going to remove it from credits over here. 10:37.740 --> 10:42.360 And we can write all the functionality for this scene in one script. 10:43.850 --> 10:45.020 I'm going to do. 10:45.080 --> 10:45.680 Uh. 10:46.460 --> 10:49.490 Private void skip credits. 10:51.260 --> 10:58.490 And I want to make a boolean that says if credits are skipped and bill credits are skipped. 10:59.680 --> 11:01.180 Then we're going to do this. 11:01.180 --> 11:09.460 If ready skipped are false, then we're going to just do scroll speed equals to um 2000. 11:10.790 --> 11:13.520 Or basically let's just multiply it by ten. 11:15.080 --> 11:20.600 Uh, multiply by ten and we're going to do credit skipped equals to true and then else. 11:20.600 --> 11:28.100 So if credits are skipped then we're going to just do scene manager load scene of the main menu. 11:30.170 --> 11:30.830 Okay. 11:31.850 --> 11:32.570 Uh, for this. 11:32.570 --> 11:37.070 Maybe just in case, let's make, uh, serialize field Privatestring. 11:37.400 --> 11:39.710 Main menu. 11:39.710 --> 11:41.240 Scene name. 11:41.240 --> 11:45.590 I'm going to make it equals to main menu by default, but you can change it later on. 11:48.190 --> 11:49.510 And I'm going to use here. 11:49.510 --> 11:50.170 Main menu. 11:50.170 --> 11:51.190 Scene name. 11:54.410 --> 11:55.160 Very nice. 11:55.160 --> 11:56.360 Now let's go back. 11:59.220 --> 12:01.290 Let's select this button. 12:01.650 --> 12:03.300 Let's add event. 12:03.330 --> 12:05.250 Drag the canvas over here. 12:05.250 --> 12:06.960 Find UI credits. 12:07.800 --> 12:10.680 And that method is private, so we cannot see it. 12:10.680 --> 12:12.420 Let's go back and make it public. 12:13.540 --> 12:14.170 Public. 12:14.710 --> 12:15.970 I'm going to save it. 12:16.000 --> 12:16.870 Go back. 12:20.630 --> 12:22.040 And. 12:22.250 --> 12:22.970 Oh, I'm sorry. 12:22.970 --> 12:24.980 We need canvas here. 12:25.580 --> 12:26.720 UI credits. 12:26.780 --> 12:27.290 Skip. 12:27.290 --> 12:27.980 Credits. 12:28.010 --> 12:28.370 Okay. 12:28.370 --> 12:29.120 Let's try. 12:36.170 --> 12:38.390 Nice works very well. 12:38.390 --> 12:40.400 I like it and we can start the game again. 12:44.460 --> 12:50.580 What we could do now is to check if text went off the screen, and if that happened, we can go to main 12:50.580 --> 12:51.930 menu automatically. 12:51.930 --> 12:57.720 Let's just take the credits and move them up till the text leaving the screen. 12:57.810 --> 13:04.140 So for example here and we can see the position is 1784. 13:04.140 --> 13:04.410 Okay. 13:04.410 --> 13:06.330 Let it be 1800. 13:07.400 --> 13:11.720 So when position will be equals to that or bigger than that, we can go to main menu. 13:12.050 --> 13:13.670 Let's go to script. 13:15.260 --> 13:17.360 First, I want to take this into a method. 13:17.390 --> 13:18.470 Extract method. 13:18.470 --> 13:20.330 Go to main menu. 13:24.790 --> 13:31.300 Then we're going to go back here and make a serialized field, private float off screen. 13:31.990 --> 13:32.980 Uh, position. 13:32.980 --> 13:33.520 Maybe. 13:33.520 --> 13:37.690 Let's make it equals to 1800 by default. 13:39.350 --> 13:48.950 Then in the update I'm going to do if rect t anchored position dot y is bigger than offset screen position, 13:48.950 --> 13:50.960 then go to main menu. 13:52.480 --> 13:53.740 Now let's save this. 13:53.740 --> 13:55.450 Let's go back and see it. 13:55.450 --> 13:56.620 I'm not going to touch anything. 13:56.620 --> 13:58.480 I'm not going to click any buttons. 13:58.480 --> 14:01.870 I'm just going to take this text and bring it back here. 14:02.380 --> 14:02.860 Okay. 14:02.860 --> 14:03.730 Let's go. 14:06.060 --> 14:09.210 So it is moving, not clicking anything. 14:15.910 --> 14:18.100 And we went to a new game. 14:18.100 --> 14:19.150 Very nice. 14:19.150 --> 14:20.740 Works very well for us. 14:20.770 --> 14:25.630 Now let's save everything and let's go to the next video. 14:25.630 --> 14:27.880 We're going to make fade in and fade out effect.